A look at Studio Simpatico’s web design process September 09, 2020 | Design Philosophy

Greetings, and welcome to Studio Simpatico!

Though our portfolio communicates the end product of the projects we’ve completed with our clients, we know that as a prospective client, it’s important that you understand how we get to the end result. What type of process do we use? How often do we interact with our clients? How do we go about understanding their businesses, and how do we solicit and incorporate feedback?

Below, we’ve outlined how we go from blue sky ideation and cocktail napkin sketches to pixel-perfect WordPress implementations.

Discovery, a/k/a learning what we don’t know we don’t know

During the initial weeks of the project, our team is in information gathering, “getting to know you” mode.

We aim to exit the discovery phase with a clear understanding of your organization or products, goals, redesign success metrics, and content (both existing content, and planned future content).

To achieve this, we may conduct any or all of the following, depending on your company or organizational structure:

• Internal Stakeholder Interviews—We work closely with you to identify all relevant stakeholders, and the type of information that each stakeholder (or stakeholder group) is equipped to provide and insight they offer to the redesign process.
• User Interviews—We are always interested in speaking with target users of the website (outside of the organization) to understand the value they find in the site, and what’s working and not working about the current experience and architecture. This also gives our team a great sense of empathy for the people for whom we’ll be designing.
• Audit of Current Site—We take a deep dive into the current site, conducting a full content and heuristic audit, accompanied by an examination of your current Google Analytics account to find trends and patterns. This also involves looking at the WordPress build and documenting the content structure of all existing content (content types and taxonomies) in order to plan for a successful, seamless migration.
• Competitive Analysis—We also spend time looking at other websites (both in the same vertical and in other verticals) for inspiration.

Defining the user experience and project requirements

When we’ve completed gathering data from the Discovery process, we begin the fun work of distilling all of these findings into a strategic plan for the new site. There are several deliverables that we create during this phase (which is a blend of user experience, strategy, and content planning).

Our highest-level (and therefore lowest-fidelity) deliverable is site map. For those unfamiliar, a site map typically shows all of the pages that will be included in your new site and the hierarchy of those pages. At Simpatico, we include a few more pieces of information: we include planning and infrastructure details surrounding which WordPress content types we’ll use for these pages, the templates and modules that will be shared and re-used across pages, as well as contextual information about what information will appear (and why). If you have an existing site with a sizable amount of content, we’ll also prepare a migration spreadsheet to ensure that all existing pages are properly redirected to the corresponding pages in the new build.

Often, we’ll present an inspiration deck alongside the site map with examples. Perhaps our plan is to create a resource center on your site so users can watch webinars and download whitepapers, in which case the inspiration deck might show examples of features, microinteractions, or visuals of other content libraries that we like. If we’re crafting a new visual identity (as opposed to working from an existing set of brand and visual identity style guidelines), we’ll often share broader mood boards or website examples to discuss and ideate together.

When the site map is finalized, we create detailed wireframes for all pages and templates. While a site map shows a bird’s eye view of all pages, a wireframe is a skeletal outline of each page. It communicates the page hierarchy and interactions, but is low-fidelity in nature and doesn’t suggest anything about the visual design. We typically use Balsamiq Mockups for our wireframes, but we will also sometimes use Omnigraffle or even Sketch templates. Wireframes are less about the tool, more about the information being communicated.

High-fidelity design: the marriage of UX and brand

Once the wireframes are approved, it’s time to marry the visual look and feel of your brand with the information organization and user flow of the UX deliverables. As noted above, if you already have robust brand and identity style guidelines, we’ll pay close attention to them so that the website is a fluid extension of your visual identity. If you don’t, we’ll do more creative discovery work with you to establish and look and feel that matches your company, organization, or products’ core value propositions.

We typically design a few directions for the homepage, and iterate on these directions based on your feedback. We almost always present the first direction of the homepage in person (or, especially during these COVID times, over a screenshare), but after the meeting we’ll share a link with you that allows you to add additional comments directly on the mockup.

Once we have a shared vision for the site’s look and feel, we begin designing the page templates and modules that were finalized during the UX phase.

We use Sketch for high-fidelity designs, and typically design two breakpoints (though our designers inherently understand the fluid nature of designing for web, and account for this in their process). In addition to the design mockups, our creative team will often use Principle to create prototypes that show ideas for subtle JavaScript or CSS animations and interactivity. Though we love presenting and discussing our designs with you during in-person meetings, we also use a tool called Invision that allows all of your team members to add comments and share feedback directly on the design mockups.

Retreating into development cave

When all of the site requirements and designs are complete, it’s time to build!

We built our websites on WordPress, which is the most popular content management system in the world. We build entirely custom themes, but use WordPress for the “back-end” — the interface where you’ll be able to swap content and images, and upload new articles and content after the site is live. Our developers are all hybrid designer-developer types who are passionate about ensuring that the final front-end code perfectly matches the mocks completed during the visual design phase. For the techies in the room: we are enthusiastic about creating clean, commented, semantic HTML5 code, and utilizing best development practices. We use media queries to adapt the CSS for different breakpoints (as makes sense in the design) so that your website adapts gracefully and looks beautiful on all device sizes. We avoid using frameworks like Bootstrap and Skeleton to avoid code bloat, and use jQuery (one of the most popular Javascript libraries) for animations and interactivity. To accommodate robust CMS content creation requirements, we use Advanced Custom Fields.