This summer, I had the chance to join the Storefront Experience Design team at Wayfair. Before I started, I determined three areas that I hoped to improve on:

Project Brief

For my main Internship project, I redesigned the Wayfair homepage's hamburger menu and account menu in order to reach our team's short term of bringing customers one step closer to the shopping experience and increase conversion rate.

The final design has been launched. You can see them on wayfair.com

Design Process

Background

Currently, the Wayfair homepage header consists of two menus: the HAMBURGER menu and ACCOUNT menu. Within the hamburger menu, there is a list of tools, with “Department” being at the top. Clicking the department link opens to a drilldown of the department list.

Goal Outlined by Product Manager

The big picture goal is to elevate the department list so that it’s the first thing users see in the hamburger menu. As a result, the other items would be moved to account menu.

• Hamburger menu is one of the highest traffic sections on the entire website
• Within the hamburger menu, the department item receives 46% of the clicks, making it the highest traffic item in the menu
• By elevating the department list, we could take users one step closer to the products and start the shopping journey earlier, which could potentially significantly increase our orders.

Project Plan

Our team has three stages planned to achieve the end goal. I am in charge of designing the no-brainer stage for this internship.

Main Challenge

We need to be very careful with changing anything in the two menus because they receive millions of clicks in traffic per month. By elevating the department list and moving all other tools to account menu, we would potentially cause confusion to the users. Specifically, in e-commerce, users are extremely likely to bounce when they encounter a small obstacle in the flow.

Defining my Problem Space

How to achieve the product goal of elevating the department list while causing the least amount of friction for users and preventing them from bouncing?

Menu Comparison

I first conducted in-depth analysis on how the two menus are constructed currently, specifically looking at which items are duplicated, and which are unique to each menu. Because these menus are different at each screen size break points, I analyzed full screen desk top, 1280, 1024, and mobile. Here is an example of my result. (SRBs and Perigold are other brands backed by Wayfair. I’ve also analyzed them as we are hoping to unify these sites in the long run)

Redesigning the Menus based on Assumption

Without conducting any user tests yet, I first created an iteration of the two menus based on my assumption. This represents the final stage that we’re hoping to achieve: that is, having the department list be the only item in the hamburger menu, while moving everything else to the account menu.
We then organized these menu items into a table based on how confident I felt with their placement. For example, I was fairly confident that “My account” and “My Orders” are always found in the account menu, so I ranked it “high confidence”. We ended up with seven low confidence items that we would then bring to the user test.

Goal

The goal of this test is to see if users can find the menu items when they’re designed exactly aligning with the product team’s need.

This project is different from user tests I’ve conducted before, where we gather results so that we can design solutions largely based on user needs. With this project, we already know that the product team wants the menus to be designed a certain way. We use this test to analyze whether this design would pose obstacle to users and how we could minimize that.

Test Method

I created a prototype of the website where they could click into each menu to find items. Using UserTesting.com, We tested 7 groups of users (one for each low-confidence item) with 3 users in each group. The test consists of three sections.
‍
‍Section 1: Find the item that they are assigned from the prototype
‍Section 2: Go to your account and talk about the first three things you see.
‍Section 3: Users are asked to sort the seven menu items into the two menus based on their understanding.

Overall Findings

• Hamburger menu is the main menu: When being asked to find certain items, users often go directly to the hamburger menu, saying that it is “the main menu”.
• “Department” as indication: When users open the hamburger menu and recognizing that it is only for the department list, they say out loud: “I see, this is just for departments”
• Items that are now high confidence:
• Recently Viewed – Account menu
  
• Help & Contact – Both
  
• Gift Card – Account menu
  
• Wayfair Credit Card – Account menu
  
• Wayfair Financing – Account menu
  
• Items user had trouble finding and are therefore, still low confidence:
• Wayfair Professional
  
• Ideas and Advice
  

5 Decision Factors

With the user test data, I started exploring different ways to organize and display the menus. To back up my design decisions, I considered five different factors: Three are from user test results and two are about their values toward the company.

Recommendation 1

Decision: I duplicated the tools “My Orders”, “Lists” and “Help & Contact” as they are highly valued items. I place them at the top of the hamburger menu to be better accessed. All menu tools appear in the account menu.
‍PM Response: There are too many tool items on the top of the hamburger menu unrelated to departments. It’s too far from the ultimate goal of elevating the department list.

Recommendation 2

Decision: I placed “Lists” on the top as it’s more related to products and the department list. “Help & Contact” and “My Orders” are moved to the bottom but still accessible by users in the hamburger menu.
‍PM Response: It’s risky to place “My orders” and" “Help & Contact” together. When users are looking for information about their order, they might be prompted to contact our customer service, which is a major cost of money.

Recommendation 3

Decision: I placed “My Account” on top of the hamburger menu. When users click it, they would be able to access the other tools.
‍PM Response: The hamburger menu is much cleaner this way, but it’s not clearly indicated that “My Orders” and the other tools are in a drilldown under “My Account”. In addition, the action of clicking into “My account” to find the other tools is the same as clicking into the account menu. It does not indicate where to fine the tools more easily.

In the last week of my internship, I had the final handoff meeting with my design team, the engineer lead, and product lead. My final design was well-received by the group and we felt confident about launching it for a test. I used the design system to create the handoff package, making sure that the components are built the same way as the current sites, getting down to the pixel-perfect level. I created mockups at eight different screen sizes, hovered states, as well as signed in and signed out states.

Hamburger Menu

Account Menu

Next Steps

Launching and Measuring Success: Since the plan is to launch these changes in the next couple of weeks, I wasn’t able to see it come alive yet in the ten-week’s time. The current plan is to launch the account menu changes first so that all the menu items would exist in both menus. We would analyze the traffic in both menus to see if users are more inclined to use the account menu to find items. We would then launch the hamburger menu changes after that. In the long term, we would be looking to see if more traffic is directed to the department list, generating higher conversion rate.

‍Moving on to Midterm Stage: As previously outlined, we have midterm and longterm changes already planned. We would work closely with stakeholders that own the other areas of the homepage to redesign the entire page, aiming to make it even easier to access the products users want.

‍Unifying All Sites: Apart from the main Wayfair website, our team also owns the other brands: AllModern, Joss and Main, Birch Lane, and Perigold. We are also aiming to unify all the changes across these platforms so that engineer work could be easier in the future. Before I left, I created a first round of iterations for Birch Lane utilizing its brand language. More tests are needed for these platforms but this is a first step in kicking off these future projects.

Takeaways

Communicate with Different Stakeholders: I worked with PMs, engineers, designers in my team and other teams, and conducted tests with users. I learned to communicate different to these stakeholders based on their backgrounds and needs: for example, I made sure to back up my decisions with data when meeting with PMs, and to provide more big picture perspectives for designers that are not on my team. I also learned how my designs would be built out and made sure to keep the engineering effort in mind when producing design files for handoff.

‍Be Flexible: There were countless times when the projects did not go as planned and we had to make last minute changes, which sometimes meant starting a completely new design file from scratch. There was also a project I worked on that our product lead decided to put on pause until a year later. I learned that these changes are all natural parts of working in a team and are sometimes what makes this job challenging but interesting. Hitting a brick wall and figuring out how to turn around and find another better route is a skill I would be constantly polishing.

‍Learn to Scope Projects: Throughout my time here, I made sure to take care in observing how other people tackle their work. Among these observations, I learned that scoping a project is one of the most essential skills. In this header redesign project, for example, I had to design the no-brainer stage while keeping in mind the longer term changes. Being able to decide my timeline when receiving a design need is an important step to becoming a more mature and independent designer.

‍Take Calculated Risks: My wonderful manager and team members have made it a safe space for me to take risks and voice my opinions. They provided me with amble knowledge of the company and the platform in order to help me set up constraints with these risks. I would continue to learn to be bold about taking risks while also knowing how to define the boundaries independently.