Design better experiences Get started free
InVision Enterprise Learn more
The world's smartest companies use InVision

The world's smartest companies use InVision Enterprise Edition

Design Teardown

7 elements of a website redesign process

View all posts

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.

competative

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

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.

wireframes (1)

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.

mood-board

Shopify Plus Inspiration board

other-mood-boards

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-mock

InVision project page for Shopify Plus

invision-mock (1)

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.

Author

Filippo Di Trapani, Designer at Shopify
Filippo is a designer working at Shopify’s headquarters in Ottawa, Canada. He’s a loving husband, father of 2, and an avid music lover.

Join over 1 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 1 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 1 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 1 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 1 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.