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.
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.
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.
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.
I broke the UX redesign process into five steps — analysis, research, opportunities, ideation, and final deliverable.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
You want to buy some organic apples.
After you buy a bottle of soy sauce, you see the recommended list and interest in the uni product.
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.
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.
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.
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.
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.
Based on an analysis of over 87 respondents,
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.