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.
Before I took over the navigation redesign work, some requirements had already been brought up, which I concluded as below:
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.
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.
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.
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.
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.
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.
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.
3. The New Arrival category had only one link - Shop all styles, which wastes the navigation resource and is not visually appealing.
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.
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.
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.
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:
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.
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.
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.
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.