Take care of the 7 essential parts of Web redesign

Web site update iterative redesign I am afraid that many sites must be through the link, how to do a good job of Web page redesign is also a lot of designers and products to consider things. Today's article is the famous electric business platform Shopify for its enterprise service platform Shopify Plus redesign some of the experience of the summary, hope to bring some enlightenment ~ ~ ~

Shopify Plus is Shopify's enterprise version of the E-commerce hosting platform, since the release in February 2014, so far only one update iteration, and it is in this case, I proposed to redesign the site proposal.

In this year-long period of time, we have a deeper understanding of our customers, but also clearly understand that the old brand and the old design is no longer adapt to the current situation.

Different companies and different teams, for the redesign has different needs and considerations, naturally there are different processes. We didn't follow a particular process, but during the iteration we did the following 7 things and finally got the results we wanted.

　1. Interview

I had a one-on-one interview with each member of our decision-making team to make clear what Shopify Plus was in their minds. In order to be close to the truth, I took notes and recorded each interview, then played back and studied it carefully.

After the interview, you can usually get inspiration from it-from there to learn about the various details of the product. This makes it easier to confirm whether the product's future vision, objectives, branding guidelines, Project principles, or Web site copywriting are more readily available. As a website, better convey the message, can really let the user feel pleasantly surprised.

　　2. Project Introduction

Before we really get into the deep development, we need to write a project profile to ensure that the information and progress of each participant are aligned. According to the actual situation of the project, we will adjust and revise the introduction content at any time and update it in real time.

Typically, a project profile answers the following questions:

• What are we trying to achieve?

• How do we confirm that the project is successful?

• What do we need to do?

• Why do we need to do this?

• What are the things that must be done?

• Who are we doing these things for?

• How do they know about these things?

• Who are included in the project team?

• When is our deadline?

　3. Analysis of competitive goods

We also need to look closely at our opponents. To do this we list our competitors and begin to understand how our products serve our target customers outside of the E-commerce arena.

We will compare our strengths and weaknesses with our opponents, the opportunities we encounter, the unique features, and the issues that need to be circumvented.

　4. Information architecture

A reasonable and reliable information architecture can effectively organize content and make it easier for users to gain and understand information. In the design of the Web page, the structure of the map to present the entire site of the relationship between the screen, can enable you from a higher level to grasp the entire site.

So, I first use the schematic diagram of the old version of the screen relationship between the site. Before updating the upgrade, I had a full screen of content, goals, and traffic distribution, and made recommendations. The structure diagram helps us define the scope of the project implementation, like a detailed checklist, which lets us be clearer when organizing content, designing interfaces, and writing code.

5, line diagram

In the heavy design process, I will use the wireframe to outline the whole, help me think about the problem, get through the train of thought. Some people like to doodle ideas on paper napkins, some people like to share ideas face-to-face, and others like to put ideas into the draft online sharing.

The advantage of wireframes is that you can quickly and easily populate different content. Only to implement the idea of the document is not enough, rough draft is not regular, the line block diagram can better evade these problems, different types of content neatly arranged together, you can clearly control the layout, module and the relationship between modules.

High-precision Shopify Plus heavy design line diagram

　　6, the Inspiration board

We'll show the new brand's visual design on the inspiration board, showing what it might look like, which is one way I get support from the team.

At the same time we will use Pinterest, in order to prevent us in a single artboard in the mud, we created a number of artboards for navigation, dynamic, typesetting and other fields, targeted to collect cases, to obtain inspiration.

When I have an idea, I sketch it in AI, which is usually a combination of words, images and colors that looks like an ad. Then, the same design elements will appear in our drafts, but the position and appearance of each element will vary, and there are many different versions.

Shopify Plus's Inspiration Board

Exploring the Shopify Plus brand on the inspiration board

　7. Visual manuscripts and prototypes

Many people don't care about wireframes and visual drafts printed on paper. Sure, it's nice to see it directly on the screen, but it's better to look directly at the wireframe, visual draft, and prototyping that are implemented on paper.

In addition, I started to make interactive visual drafts (prototypes) at the time of the diagram drawing, and communicated them to the customer until they were finally implemented as code and actual from the program.

Shopify Plus Invision Project page

Collect Feedback for Shopify Plus

　Conclusion

Although many design agencies tend to follow the process to design strictly, we usually mix the 7 links together. Using the process that really matches your actual work is the key to a successful redesign.