7 major elements of web page redesign Share the 7 major elements of web page redesign

Shopify Plus is the enterprise version of the e-commerce platform we founded. Released in February 2014, it is still the first version. I think it's time for a revamp.

After more than a year, we have a deeper understanding of both our customers and ourselves. The old brand is no longer relevant.

We don’t have any special process, we just connect the following 7 things together to achieve our goal.

Interview

I held one-on-one meetings with members of the executive team to clarify what Shopify Plus was. To ensure authenticity, I recorded each interview for later playback.

After the interview, inspiration struck—I felt like I knew this product inside and out. Writing vision, mission statements, brand guidelines, project overviews, and website copy just got easier. Our website needs to do a better job of communicating information and generating insight.

Project Overview

Before diving into the project, we wrote a project overview to get everyone on the same page. We will update it as appropriate to reflect the current status of the project.

Some questions you might ask in your project overview:

• What are we trying to accomplish?
• How do you know if the project is successful?
• What needs to be done?
• Why do you need to do this?
• What are the necessary conditions?
• Who is this for?
• How to let them know?
• Who are the project team members?
• When is the deadline?

Competitive product analysis

We looked at what other similar products there were. I started with a list of competitors and then moved on to companies outside of the e-commerce space that were targeting the same customers as us.

We looked at the strengths, weaknesses, and opportunities of our competitors, as well as key areas we wanted to focus on—and areas we wanted to avoid.

Our competitive product analysis document

Information Architecture

Information structure is the organization of content to make it easy to understand. In web design, a structure diagram reflects the relationship between the pages on a website, allowing you to see the composition of the website from a higher perspective.

I drew an information structure diagram for the old website to show the relationship between the pages. Before updating and changing, I evaluated the content, goals and workload. This chart helped us scope the project and served as a to-do list for all the pages we would write, design, and code.

Shopify Plus information structure diagram

Wireframe

Throughout the redesign process, I used wireframes to help me think through problems and inspire creativity. Some were drawn on napkins and shared face to face, while other sketches were shared online.

Wireframing has an unexpected benefit: it helps you write content. Writing a document makes it difficult to visualize everything. Pasting content in a wireframe gives people a clear sense of the jump flow of the page and how each piece of content relates to the others.

High-fidelity wireframes for the Shopify Plus redesign

Inspiration board

My inspiration board showing what the new brand might look like. They help me get feedback from the team early in the project.

I use Pinterest to create multiple artboards to break down topics like navigation, animation, and fonts so that ideas don’t get lost in a single artboard.

During the research process, I drew inspirational ideas in Illustrator, combining text, pictures and color palettes into advertising-like patterns. The same design elements appear in various design drafts, but their positions and expressions vary.

Shopify Plus Inspiration Board

Explore possible branding for Shopify Plus from inspiration boards

Renderings and interactive prototypes

Most people don’t pay much attention to wireframes and web designs when they are printed on paper. Showing the design on screen is great, though.

I start creating interactive renderings early in the wireframing process. Continue sharing them with the client and team until the site is coded.

I asked them to speak their minds while browsing so I could understand what they were thinking when they were operating the interface. These feedbacks highlighted local issues and verified the design solutions, facilitating the finalization of the project.

InVision Project Page for Shopify Plus

Collecting Feedback for Shopify Plus

While some organizations insist on a particular order in their redesign process, these seven steps worked well for us. Choosing a strategy that fits your workflow is an important factor in the success of your redesign.

Author information:

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.