7 elements of a website redesign process

Shopify Plus, the enterprise version of our hosted ecommerce platform, launched in February 2014 and was still in its first iteration when I asked if it was time for a redesign.

It’d been just over a year, but we had a better understanding of our customers and who we were. The old brand just didn’t fit anymore.

We didn’t follow any particular process, but doing the following 7 things in tandem helped us get where we wanted to be.

1. Interviews

I did 1-on-1 interviews with members of our executive team to nail down what Shopify Plus is all about. To really be present, I recorded each interview and took notes when I listened later.

Inspiration hit after those interviews—I felt like I knew everything there was to know about the product. So writing vision and mission statements, brand guidelines, a project brief, and website copy all came easy. Our website needed to better convey information so that people could have that same aha moment.

2. Project briefs

Before diving into the project, we wrote a project brief to keep everybody on the same page. We updated it as needed so it always reflected the current state of the project.

Some questions a project brief might answer:

• What are we trying to achieve?
• How will we know the project is a success?
• What do we need to do?
• Why do we need to do it?
• What are the must-haves?
• Who are we doing this for?
• How will they know about it?
• Who’s on the project team?
• What’s our deadline?

3. Competitive analysis

We looked at what else is out there. I started with a list of competitors, then moved on to businesses that serve our target audience outside the ecommerce field.

We compared competitors’ strengths, weaknesses, and opportunities and highlighted areas we wanted to draw attention to—and features we wanted to avoid.

Our competitive analysis document

We compared competitors’ strengths, weaknesses, and opportunities and highlighted areas we wanted to draw attention to—and features we wanted to avoid.

4. Information architecture

Information architecture is the practice of organizing content so it’s easy to understand. In web design, structural diagrams map the relationships between all the screens of a site, giving you a high-level overview of your site’s components.

I drew an information architecture diagram of our old site that showed the relationships between the screens. I evaluated the content, our goals, and traffic before updating and suggesting changes. The diagram helped us define the scope of our project releases and acted like a checklist as we wrote, designed, and coded all the pages.

Information architecture diagram for Shopify Plus

5. Wireframes

I used wireframes throughout the redesign to help think through problems and get approval for ideas. Some were sketched on napkins and shared face-to-face, and others were drafted and shared online.

An unexpected bonus of wireframes: they help you write content. Just writing in a document makes it tough to visualize how everything will fit together, but pasting content into wireframes gives you a clear sense of the flow of the page and how each piece of content relates to another.

High-fidelity wireframe used for the Shopify Plus Redesign

6. Inspiration boards

My inspiration boards showed my vision of what our new brand might look like. They were my way of getting early buy-in from the team.

I used Pinterest, and instead of letting ideas get lost in the abyss of a single board, I created several boards dedicated to specific areas like navigation, animations, and typography.

I sketched ideas in Illustrator as I researched, combining words, images, and color swatches into something that looked like an ad. The same design elements appeared in all the sketches, but their placement and appearance changed from sketch to sketch.

Shopify Plus Inspiration board

Inspiration boards exploring some options for the Shopify Plus brand

7. Mockups and prototypes

Many people don’t pay attention to wireframes or web designs if they’re printed on paper. Showing a design on a screen is fine, but it’s always best to see a design through the eyes of your audience.

I started developing interactive mockups early on in the wireframing process. We shared them with our customers and the team throughout the project until most of the site was coded.

I asked people to say their thoughts out loud as they browsed so I knew what they were thinking as they interacted with the mockups. That feedback highlighted problem areas and validated design choices so we could finalize the project.

InVision project page for Shopify Plus

Gathering feedback for Shopify Plus

While some organizations may stick to a particular order for their redesign process, mixing up these 7 steps worked for us. Using a strategy that fits into your workflow is an essential part of a successful redesign.