Weee! category page redesign

PROJECT OVERVIEW

Weee! is the largest Asian grocery delivery store in the US. People can buy fresh food through our website or app. On the weee! application, customers can browse and buy all our products through the shopping list and category pages. Providing users a successful browsing experience is an important key to growing the revenue. For this project, I redesigned the browsing experience to provide consistency and a clean design in order to keep customers focused on established products and to create a new related products feature to gain revenue.

PROJECT DETAILS

My Role

  • Analysis of existing design and find opportunities
  • Research competition
  • Create questionnaires and collect feedback
  • Create wireframes and high-fatality prototype

Deliverable

Final Hi-Fi prototype of mobile app

Duration

1 month

Team

1 product manager, development team, QA, plus myself

Tools used

Figma, photoshop

THE PROBLEMS

The shopping list and category pages are two main areas where customers scan and purchase products. However, the revenue from the category page was much lower than that of shopping list page. In addition, many customers complained about the complex navigation system, the inconsistent filter structure, and a narrow product list where they scan products. Lastly, we showed the relevant products on the product detail page, where customers rarely visited, so the results were not standard.

THE SOLUTION

We broke the old category page into two separate pages. The first was the category list page with featured and categories sections. Here, customers can easily browse products through various perspectives. The second was the product list page with a larger product list and consistent filter and sort features. With a better experience, customers can browse the product list for the products they need to buy, as well as explore other new and exciting products. We showed related products directly after customers added products from the product list page, rather than presenting them on the product detail page.

Browse products through the category tab

You can click any category and browse exciting products with a clean and structured layout. Narrow down target products using the filter and sort function and explore more related products after you add one to your shopping cart.

THE RESULTS

  • The related product feature increased 3% of revenue in online A/B testing.
  • During the usability testing with 26 new users through Usability Hub.
  • 77% of participants agree that the new application is easy to use.
  • 70% of participants prefer the new design.
  • A total 72% of participants completed the task in an average of 31 seconds.

REDESIGN PROCESS

I broke the UX redesign process into five steps — analysis, research, opportunities, ideation, and final deliverable.

Analysis

What is the current structure?

To understand the pain points, I deconstructed the category page to scrutinize the information architecture behind the interface. Hence, I can reorganize functions from the core values rather than the surface.

The structure was not standardized and many different types of information were mixed. Therefore, users might get lost and instead browse products through other pages.

What are the insights I can get from the data?

I also analyzed the category page with another similar page, shopping list page, on the Weee! application. 45% of products added to the cart through the category list on the homepage, which goes to the shopping list page. Compared to that, only 10% of the product was added to the cart through the category page. However, people purchased more products from the on-sale, trending and bought tabs on the category page, rather than on the product list page or the other entrances from the homepage.

The category page was similar to the shopping list page. But why did people choose to add products on the shopping list page instead of the category page?

I made some assumptions—first, location. The first screen on the home page had the highest view in an application, so many people used the category list as entrances to browse particular products that they wanted to buy. Second, layout. The shopping list had larger images and a more straightforward layout, so users might quickly pay attention to attractive product photos. Third, behavior. People browsed on the category page for inspiration but shopped on the shopping list page for specific products.

Research

Who are our primary competitors?

If you know the enemy and know yourself, you need not fear the result of a hundred battles.

To win the fresh delivery battles in the bay area, I studied our competitors to learn form their advantage and take care of the difference.

Good Eggs had the most similar business strategy to Weee!, but they focused on the  American organic market, and we focused on the Asian mass market.

How do they design those pages?

Category page

Product list page

Opportunities

Why do we need to do the redesign?

Comparing with our shopping list page and other companies' category page, I found several pain points on the current category page. Those issues include data structure, interactive, user interface, and more.

What part do we want to update?

I grouped them into four main areas, which might have more impact on increasing revenue. I wanted to improve and redesign those parts, which include adding a category list page before the product list page, unifying the filter and sort function and redesigning the product list layout on the product list page, and presenting related products after users adding products into the cart.

Ideation

How to reorganize the current categories?

Currently, we listed all tab in the same way, but there were two different types of methods — filtering products, featured, and categories.

Therefore, I decided to separate them into two groups with a different design. Featured items were the popular filter on the current version, so I kept them on the top and added two more common filters in which users hardly found the entrance in the app.

Which layout do users like most?

During my research, I found several different layouts to present products. They both had their strength and weakness. Instead of deciding for users, I would like to hear users' opinions first.

According to the questionnaire I did through the user testing hub, I decided to keep the horizontal list view to present exciting products. Also, the horizontal list view made it easier for people to compare multiple products on one screen, and there were more opportunities for further extensions later.

What information do users most care about in the products they are considering buying?

To learn more about what content was genuinely valued while customers were making their decision, I listed many options related to fresh grocery products. I broke product title down into several different cells, such as the product name, the brand, and the weight. I also added more options beyond the current date structure, such as storage method and nutrition info.

Based on the questionnaire result, I restructured and redesigned the product list to help users make decisions. In the meantime, I used hierarchy, proximity and other design principles to provide more information with balance, so the user didn't feel overloaded while browsing this page.

How to present related products after adding a product to the cart?

One way to increase the revenue was to show more products that users may want to buy. In grocery shopping, users tended to buy several products to make meals. After users added a product into the shopping cart, it was a great time to present some high-related products. Therefore, users can easily add them to carts without switching to other categories or forgetting to buy them.

I chose the first design because the related products and the bought product were in the same area, and that showed a stronger relationship between them.

Clickable prototype

Final deliverable

Category page

With icons and product images, customers can find the correct featured products or categories by scanning. I also added the number of total products to show how Weee! provides various products in every collection.

Product list

I separated the product title into three parts, including brand or place of order, product name, and weight, with a strong hierarchy, so customers can scan products faster and easier without missing important weight information. Providing extra information through icons helped users compare products and make decisions.

Product list page

With the drop-down filter, customers could filter multiple subcategories at once with the popover. Furthermore, they could explore more sort and filter functions through the modal view. They could narrow down the product list and choose items from them.

Recommend products

After customers added a product into the shopping cart, the product list stretched to show related products directly on the product list page to support users buying what they wanted to buy together, rather than switching between different categories. With this design, customers purchased more products, which in turn and increased revenue.

Interactive Prototype

Task 1

You want to buy some organic apples.

  • You are on the category list page, choose the fruit category card.
  • You click the type filter to see the type filter pop-up.
  • You click the apple list toggle button to turn on the filter option for apples and click down to see the result.
  • You compare the products.

Task 2

After you buy a bottle of soy sauce, you see the recommended list and interest in the uni product.

  • You are on the category list page, choose the new arrivals featured card.
  • You click the add button on the soy sauce list to add one in your cart.
  • You see the recommended list and click the uni image to see the product detail page.
  • You look through the uni product detail page.

CONCLUSION

What challenges did I encounter?

First, redesigning the category page was a big challenge because even tiny changes could have  a huge influence on revenue. As a result, it was inadvisable to make large changes all at once. The best way to alter the category page was to test and improve it step by step. Secondly, breaking the category page into two steps was a huge dilemma, because many users still loved to see the categories on the side. However, with regard to a clean and consistent experience, I believe the two-page design was a better solution because customers could focus on one action on each page.

What did I try that didn’t work?

In the original idea, I would like to add more sections to help customers to explore exciting products, such as country collections and brand collections. Each country or brand had its own landing page to give more background or facts to customers in order to build trust and relationships with them. This also means customers might be more willing to try new and exciting products under the description section. However, because of the scope and resources involved, this part was postponed.

What did I learn?

Through different types of user testing, I learned many insights from participants and their feedback. Those comments guided me to revise the design. Throughout this project, I learned to consider design from both a business strategy and user-centered focus. I also learned it's important to design multiple solutions for different situations.

What did I accomplish?

I redesigned the browsing experience on the category page, as well as the design components for many different cases. The final result was all positive. The total revenue increased XX% because of the related feature and over 70% of users preferred the new design and agreed the experience was easy to use.

Conclusion

With Peeper, you will never miss the chance to watch birds closely. You can receive bird notifications with photos on your phone wherever you go. Also, you can review your bird observation histories and learn more facts about birds whenever you want.

Result /Impact

Based on an analysis of over 87 respondents,

  • 86% would consider buying this product
  • 78% liked the final design

Lessons Learned

I learned about several new technologies and improved my coding skills during this project, including Raspberry Pi, Angular JS, and ionic framework. To create this exciting prototype, I cooperated closely with Jesus Guerrero, the back-end developer, and Sijun Yang, the industrial designer. I got much useful feedback and guidance from them and the interviewers, therefore, I could iterate the feeder and the application, again and again, to present my final design here.