The Designer’s Guide to Redesigning your Company’s Website: Part 1
Part one: Strategy and planning
In September, we redesigned the Gusto website from top to bottom — or nav to footer, you might say. This is the story of our redesign and the lessons we learned along the way. If you’re considering redesigning your company’s website, read on — hopefully something we learned on our journey will be helpful on yours.
Hi, I’m Natalie. I’m a member of the Gusto brand design team, working as a web designer and developer. We recently launched 20+ new features and 3 brand new pricing plans, spurring a complete website redesign to match. Having worked on several redesigns in my tenure at Gusto, I thought it was time to consolidate my thoughts into a simple guide to redesigning your company’s website.
In this guide, I’ll outline some practical and tactical steps that you can follow when embarking on a redesign. Spoiler: Only a part of it involves actual use of Photoshop or Sketch. And why? The days of design as a purely visual exercise are over. Designers should be involved in planning, strategy, and user research. Choosing fonts, micro-interactions, and new colors is fun and important work, but these decisions will seem arbitrary if you can’t justify the rationale behind them. Designers should be able to defend their decisions with qualitative and quantitative data and map them back to company goals. If we can’t do this, it’s too easy for others to poke holes in the plan and squabble over subjective design decisions.
Choosing fonts, micro-interactions, and new colors is fun and important work, but these decisions will seem arbitrary if you can’t justify the rationale behind them.
There are two main phases in a redesign: planning and designing. I’ve outlined my process and some helpful tips in hopes that they may be helpful for designers embarking on redesigning their company websites too.
Part One: Planning and Strategy
As a creative problem-solver, the first step of the design process should be to solidify the strategy and game plan behind the redesign. Resist the temptation to pixel-push and dive into visual solutions. Making sure the problem you’re solving is well-scoped will save you from going down rabbit holes or shooting for an ever-moving goal post.
Define the goals of the redesign
If you’ve done this before, then you already know: redesigns are notorious for engendering passionate debates among stakeholders. Deciding which problems to solve (and more importantly, which ones you are not) will save you time by providing the framework with which you measure success. It will also protect you against the many-headed beast known as feature creep.
Some common goals for a website redesign:
- New marketing strategy
- New logo or company name change
- Usability improvements
- Technical clean-up or scalability
- Moving to or from a CMS
- Google friendly
Establish the metrics of success
After defining the goals of your redesign, it’s time to figure out how to measure them. Metrics are the tangible numbers behind the goals of the redesign. They’re helpful for measuring how you’ve delivered upon these goals, and helpful for keeping you and the team accountable.
Your metrics should be quantitative and measurable — the more granular, the better. Choosing a nebulous metric like “increased customer engagement” makes it difficult to determine when you’re done, versus “increase time on page by 35%” or “reduce bounce rate by 15%.” A more qualitative goal, like “updating the site to be more modern,” could be measured by “creating a mobile-first experience” or “being featured on Awwwards.” Determine what’s realistic for the project, what maps to the established goals, and what you can measure.
Set clear roles and responsibilities
Be clear about who is responsible for the different parts of the redesign process. This will embolden team members to take ownership over their part of the process and allow them to focus on the execution. It also prevents tasks from slipping through the cracks.
Common types of roles:
- Individual contributors: Who is the team responsible for actually producing the work? Examples: Designer, engineer, copywriter, project manager
- Stakeholders: Who are the cross-functional experts in the company that should be consulted for website decisions? Examples: Product managers, Sales, Engineering, Legal
- Decision-makers: Who are the individuals within the organization with the final say on the output? (Tip: Try to keep this group small, the ideal number being between one and three.) Their role is to be the ultimate decider on strategic decisions and to weigh in on tie-breakers. Examples: CEO, Head of Marketing, Head of Design
So, how do we ship it?
To force yourself to ship on time, make the damn GANTT chart. Time is often one of the scarcest resources, so determining milestones, timelines, and hand-offs upfront can help ensure you’re running according to schedule. Ideally, there’s a project manager to keep the trains moving on time, but if there is not, a shared calendar and Google Sheet GANTT chart will keep everyone on the same page.
Other things to consider upfront:
- When and how do the engineering teams need to be involved? How can your team receive input on the technical complications to producing these designs? How many engineers will be assigned to this project?
- How will you track performance? Which tools need to be in place to ensure that we’re able to measure the pre-established metrics of success? (Tip: Be consistent with tools you’ve used in the past so you can compare any insights apples to apples.) Popular tools: Crazy Egg, Inspectlet, Lookr, Google Analytics, Hotjar
- Is it an experiment or full rollout? If the redesign is an A/B test, decide what you’re testing against the original homepage, the distribution of traffic, and what metrics you’re measuring.
- How and when should your team collect feedback from the rest of the organization? Decide the cadence of check-ins with the rest of the team depending on their desired level of involvement. It’s helpful to be explicit about the type of feedback you’re looking for at each stage. For instance, when looking at early wireframes , strategy feedback will be more helpful than interaction feedback.
Next step, The Design Process
You’ve done the necessary pre-work for your website redesign. Finally, you’re ready to roll up your sleeves and start designing! Stay tuned for second half of this series: The Designer’s Guide to Redesigning Your Company’s Website, Part Two: The Design Process.