https://drive.google.com/uc?export=view&id=1DI25jVjuEuu13VRlqxFBb5oRmYKnFQj3

Navigation Redesign

September, 2017

Overview

Global navigation plays a key role for an E-commerce website. It affects users' product finding ability, which will further affect the sales. As the only UX designer in an E-commerce firm, I redesigned the navigation in 3 aspects: Function, Interaction, and Guidance.

My Role: UX/UI designer.

Background

Before I took over the navigation redesign work, some requirements had already been brought up, which I concluded as below:

  1. Remove too much empty space.
  2. Add pictures or videos to make the navigation more attractive.
  3. Make the sales section highlighted.

These requirements were very clear and could be fixed fast by just modifying the layout as shown in the video below.

If I did it this way, the change could fulfill the requirements. However, from a UX designer’s perspective, I felt like these changes could possibly not the right way to solve problems.

All the requirements focused on the visual perception, but no non-visual problems had been brought up, which I think could be easily identified. So in order to make a right design, I decided to conduct more research and redefine the requirements.

The 3-layer Research Frame

Since the navigation design is not something new, I planned to take a top-down method for the redesign process. Therefore, instead of conducting scattered research directly, I first asked myself a core question: what is a good navigation for an e-commerce website? After looking through some design and user research articles, I concluded that a good navigation should have good performance in three aspects: function, interaction, and guidance.

img/portfolio/ETNav/Group@3x.png

1. Function

The very first thing for a navigation is to let users know what they are capable of in this site. And the fundamental role a navigation plays is to help users relocate. The two both required the navigation's information architecture(IA) clear, understandable and comprehensive.

I planned to take 2 actions to improve the IA. First was conducting an expert review to identify current IA’s problems. Second, research other retailers’ websites and brainstorm to see if extra categories or features could be utilized in our navigation.

2. Interaction

Good user experience is a key indicator for a navigation. Besides the IA, the sequence of each tier of categories, easy-to-understand terms, unified element styles, and visually appealing layouts are also critical factors when forming good interactions. So I planned to conduct a survey to find out the better category sequence.

3. Guidance

A good navigation can let users go where they want to go; while a better navigation can guide the users to perform the journey the company had mapped out. To realize the guiding power, the design should take users, team, and brand into account, and provide a win-win strategy for users and the company.

Research and problems

Expert review

By conducting a cognitive walkthrough, I identified several problems listed below.

img/portfolio/ETNav/Expert Review 1.png

1. Shop by brand was very confusing.
Novice users or even repeat users could not tell the difference between the two brand from the literals or even from their linked pages.

img/portfolio/ETNav/Expert Review 2.png

2. Sale description.
Making users exploring the product differences among 5/$39.9, 5/$49.9, and 5/$79.9 was cruel. Also this distinguishing method made the brand look cheap.

img/portfolio/ETNav/Expert Review 3.png

3. The New Arrival category had only one link - Shop all styles, which wastes the navigation resource and is not visually appealing.

Competitive analysis

After investigating other retailer’s sites and analyzing our site, I listed the most important navigation components for our websites. They were product catalogs, sales, bestseller, new arrival, blog, and search. I planned to use the list in the later survey to find out their priorities. Also, during the process of researching other retailers’ websites, I recorded different layouts, features, and responsive methods as the design references.

User survey

With the fact that our brand was new to most people, and our new visitors occupied 50 percentages from Google Analytics' report, I planned to incline the design more for the new visitors’ experience. So I did a survey to know what components of a navigation are important for new visitors. 6 participants were involved in this survey and they were asked to pick 3 elements in the list they would be most interested in as a new visitor. The first choice got 3 points, the second got 2, and the third got 1. The table below shows the final result.

EBE and ET are two brands of my company. EBE is a makeup brand, while ET is a costume brand. The number represents the score in total.

From the data, we can see that most people would like to see the catalog first, and then the best seller, and then the sale and the new arrival.

Also, I did a survey within my company to collect our team’s thoughts about what features were important for our navigation. The result showed that the new arrival could bring more profits and exhibit the brand image well, and the best seller could have a higher conversion rate.

Our company has already passed the rapidly expanding and money-needing period. So I believed it was a good time to emphasize our brand image. With the intention to show our brand image well, I decided to increase the new arrival’s weight in the design.

Ideation

Without doubts, the product catalog was in the first priority in the navigation. So I firstly ideated two layouts for the product catalog. One is the “T” style, in which the pictures will be shown in one column; the other is the “H” style, in which the pictures will be shown in a row.

...

Some root categories had only two subcategories, which took two columns. The “T” style still worked well, while “H” style would leave too much empty space. However, adding things to fill the empty was not hard. So both styles worked for the two-column root categories.

...

However, some categories had more than six subcategories, which made the “T” style had no room left for images. To keep the consistency, our team decided to use the “H” style for the product catalog.

What pictures to show?

After determined the layout template, the next question came up: What could be shown in the picture section?Based on previous analysis and decision, there were two things fitted in the picture section. One was new arrival, and the other was the best seller, because both of them had the catalog property. I chose the best seller for these reasons:

  1. Young females aged 18-35 took up to 70% of our customers. They were more liable to be price sensitive. So the best seller would get more attention because of its competitive price compared with the new arrival.
  2. If we exhibited the best seller in a root category, the most fitting way was to show it by catalogs, which could be redundant. While the new arrival would have a more flexible way to exhibit in a root category.
  3. Supposing this decision received negative feedback from the market in the future, we could change it fast with little commitment. Because the layouts were flexible.

More layouts

For the other root categories, I used different layouts to differentiate it with the product catalog’s layout. Each component had at least two alternations. The marked ones were what we finally chose after discussion.

New Arrival
Sale & Blog

Prototype

I concretized the chosen wireframes with the real content. I chose Adobe XD for creating this prototype because the repeat grid function was very handy for navigation creation.

Some new features were also added in the new navigation like the “new” tag, the highlighted sale columns, and the 200ms delay of displaying the navigation.

Below shows typical comparison screens of EVE BY EVE'S navigation.

New Arrival
 
Makeup
 
Skincare
 
Clothing
 
Sales
 
Blog
 

The changes made in the navigation had fulfilled the original requirements. In order to adapt to the future changes of the marketing strategies, the navigation structure is designed to be very flexible. The marketing team can choose different templates by entering different parameters in the CMS. The marketing team liked it and the engineering team thought it was feasible.

Test

Testing is an important step in the design process. However, a small company had to move fast. Thus, only a small Wiz-of-Oz test session was conducted as a compromised test method. No lethal issue was found in this step.

Overall, I was confident in this design because it followed the 3 principles I brought out in the beginning: Function, Interaction, and Guidance.

  1. For function, although some picture elements were added in the navigation, the main section remained to be the product catalog.
  2. For interaction, the IA has been modified and some minor features had been added, which improved the overall interactive experience.
  3. For guidance, the Best Seller and New Arrival were emphasized to increase the conversion rate and exhibit our brand image better.

I couldn't forecast if it would work in the way I expected, but these changes should have some influence.

To find out if these improvements would perform well, I talked with the CTO about collecting the click data of the navigation. I expected to get feedback from the real market so as to test my new design and receive insights of improvements.

Summary

Guiding the design process with principles works well in this project. But two questions could be explored more in the future design practices:

  • How to determine the design principles in the very beginning?
  • How to know the solution meets the design principles?

This project is just an example of the kind of design process. But I think there will be a universal answer. I definitely will go a step further, think more and do more in the future.

Being new to E-commerce field, especially new to female products, I met difficult situations. Daisy helped a lot to familiarize our products in each category. I also received much support from other colleagues. Thank them all.

Work Projects

https://drive.google.com/uc?export=view&id=1uj8UV9JpsslqAhFivXzhmNIroNY4VkHZ

E-commerce Website Clearance Page Design

UX/UI | PM | Research

Created a webpage for the online clearance sale. Emphasized on redesigning the site-wide filtering tool.

July 2018

https://drive.google.com/uc?export=view&id=10XhXrImNdnoNvCHIL_nu8YlvwF8HCRru

Design System Establishing

UX/UI | PM | Research

Initiated and developed a design system to facilitate designers and developers in the company.

June 2018

https://drive.google.com/uc?export=view&id=1NzdcJhuxM9izwalcsQ0xGxYF6r9PcBhR

Navigation Redesign

UX/UI | Research

Redesigned the navigation of an e-commerce website for a better browsing and product finding experience.

September 2017

https://drive.google.com/uc?export=view&id=1p-pDgk7Uf08BYkrtSpAqsOd-tofL1NvE

Direct Mail Design

Graphic | Print | UX thoughts

Ideated a new mail layout and applied it in the print mail pieces in the 2016 nonprofit fundraising campaign.

December 2016