The Designer’s Guide to Redesigning your Company’s Website: Part 2

Part 2: The Design Process

Time to start making!

Hi, I’m Natalie. I’m a member of the Gusto brand design team, working as a web designer and developer. If you haven’t already, check out the first part of this series, The Designer’s Guide to Redesigning your Company’s Website: Part 1: Strategy and Planning. It walks through the strategic milestones designers reach throughout their site redesign journey.

At Gusto, we recently launched 20+ new features and 3 brand new pricing plans, spurring a complete website redesign to match. Using our redesign as a case study, I’m going to outline the steps our team takes when constructing the site structure and visual design.

First, talk to real people

I know, I know. User research — it’s the thing all designers reference as part of their process and yet when facing looming deadlines and limited resources, it’s often first to the chopping block. Conducting user research allows a designer to understand the needs of their audience. Talking to real people often makes the difference between opinionated, effective design and generic design that tries to fit everyone but ends up resonating with no one.

Have a clear problem in mind before going into a user research session. The insights will be more actionable and easier to suss out when there is a specific piece information you are trying to obtain. Consider if there are any questions that you consistently ask yourself when designing for your company.

At Gusto, we use a combination of several of these user research techniques:

  1. User interviews: There is a lot of information to be gleaned from just asking users the questions that you have for them. These can include questions about their professional background, use of the product, motivations, or pain points. They’re about quality, not quantity, and typically conducted one-on-one or with a notetaker.
  2. Surveys: Helpful for asking a large number of users one or two pointed questions. You won’t be able to ask any follow-up questions, but will be able to answer a specific question quickly.
  3. A/B testing: A/B testing allows you to measure how users actually behave on your site. Create two similar versions of a page to track which one results in a desired action at a higher rate. Which variable performed better?
  4. Usability testing: Showing a wireframe or mock-up to users and asking them to complete a desired task will tell you if your design is intuitive. These are especially helpful for more complex flows such as account creation or onboarding.

Next, lay it all out

Information architecture is the practice of organizing the information, content, and functionality of a website so that it delivers the best user experience it can, with information and services being easy to find and use. It may sound like an outdated term, something you’d read as an undergrad in The Elements of User Experience, but it’s a critical first step to establish your site’s foundation. It’s basically an abstracted model of information and hierarchy for your website: useful for determining the nuts and bolts of which pages should be discovered and how.

It also has the additional benefit of presenting an abstracted version of the site architecture, which allows stakeholders to make trade-offs and decisions on a strategic level, without conflating design feedback with strategy feedback. If you’re not sure where to start, look back on the goal of your redesign and go from there.

Gusto.com’s top level information archiecture

Make skeletons (aka build wireframes)

Wireframes are the skeleton of the website and should map to the information architecture. They visualize the layout of a website’s content and how the UI elements and navigational systems will be arranged on the page. They lack visual polish, including typography, color, and imagery. In fact, at Gusto we use Balsamiq, a rapid prototyping tool whose default typeface is (pause for dramatic effect)… Comic Sans. Balsamiq’s functionality uses cookie-cutter UI elements and placeholder typography so designers can direct the feedback they receive toward function, rather than form.

This phase of the design process benefits from a close partnership between the design team and the team responsible for creating the content. In Gusto’s case, this is the product marketing team. Because the links, UI, hierarchy, and copy must work cohesively together to accomplish larger goals and tell an overarching story, we’ve adopted an agile approach to designing and writing copy simultaneously. This prevents the content on the page from dictating design decisions or vice versa.

Gusto’s typical process for producing a wireframe:

  1. Content doc: This is the general outline and flow of the page. The copy is not finalized or “word-smithed” yet, but is directional and outlines the high-level goals of the page, the sections that should be present, and the order of information. Generally, these are made in Word docs and consist of bulleted information.
  2. Quick wireframes: These are quick wireframes displaying how the information in the content doc could be outlined and presented on an actual web page. This stage is helpful for determining larger strategic design decisions.
  3. Final copy: By taking the extra time to mock up the content doc into quick wireframes, it allows copywriters and marketers to see their copy presented in a design with more verisimilitude to the actual presentation. More often than not, it’s an exercise in how to say more with less and copy is cut.
  4. Final wireframe: This is the last revision in the wireframe process. It will be an artifact of the final functionality and copy on which to base the visual design on. While small tweaks can still be made after this stage, it’s a great time to get stakeholder buy-in.
Example of Gusto’s payroll product page from content outline to high-fidelity design

Okay okay, now you can open Sketch

High-fidelity designs are the final visual representation of your website (AKA making it look pretty). It’s also the part of your job that is conventionally associated with design — the part where you get to put on your black turtleneck and pixel-push to your heart’s content. But, keep in mind that everything done up until this point has been design too!

High-fidelity designs are the part of your job that is conventionally associated with design — the part where you get to put on your black turtleneck and pixel-push to your heart’s content.

From an outside perspective, visual design decisions can feel like the most subjective part of the process. Colors, typography, and other visual elements carry varying cultural significance and resonate with people differently. When presenting work in the high-fidelity design stage of the process, tying your design decisions back to the initial goals of the redesign and the target persona will help you establish a true north star and navigate a diverse set of opinions.

You should:

  1. Create more than one version: Creating a single design is the easiest way to set it up for failure. Not only will producing multiple options make your design better, it will also give people more context onto which they can base their opinions. Two common axis we choose to map the distinct versions on are: conservative vs. edgy or tactical vs. aspiring. The former can manifest in visual design or interactions. How much do we push company branding? What trends are we trying on for size or eschewing? The latter often ties to storytelling. Is this a nuts and bolts transactional page or an elevated journey?
  2. Make it responsive (duh!): It’s almost 2018, people. Users expect your site to work regardless of what device they’re using. Google will rank your site higher if it is mobile-responsive. And when you present your work, you can be certain someone will ask, “How does this look on mobile?”
  3. Write copy and design together: The right choice of words can make or break a design. Creating copy and design synchronously will allows the two to reinforce the narrative.
  4. Make it move: The visual design of a website plays only a part of conveying the look and feel you’re trying to accomplish. How a website behaves and how you interact with it is just as important. Using Powerpoint or InVision (or if the interaction is more complex, Framer or AfterEffects) to create a prototype of the micro interactions will go a long way. As a designer, you may be able to clearly visualize the interaction in your head, however, folks from other disciplines may not.
An AfterEffects prototype of gusto.com’s navigation bar on scroll

Present your work!

The work we do isn’t magic, but from an outsider perspective it can appear that way. To those less familiar with the field, it can be difficult to understand how and why decisions were made. Walking the company through your design journey can illuminate the process and has the added benefit of generating excitement and support for the new design.

It’s not uncommon for internal teams to initially have adverse reactions to design overhauls because of their unfamiliarity. Giving insight into your process equips them with the rationale behind the process and garners enthusiasm.

You don’t have to show them all the directions you didn’t go down, but a quick highlight reel of your journey will suffice. At Gusto, we present the goals of the redesign, the IA, three divergent visual options, and finally, a demo of the final product.

Alright, you got this

The onset of a redesign can feel like an Herculean task. They’re a notoriously tricky undertaking because of their high visibility, multitude of stakeholders, and the brand loyalty they engender. Breaking up the process into distinct phases will promote high-quality work with efficiency and mitigate the risk of ending up in website purgatory.

Here’s a recap of the design process we use at Gusto:

  1. Create a game plan by establishing goals and roles
  2. Talk to users to understand their needs and motivations
  3. Establish your information architecture: your house needs a solid foundation.
  4. Build wireframes to visualize the flow of content
  5. Polish high-fidelity designs before moving into development
  6. Present your work to the company