Wyze E-commerce "Buy" Section

Re-designing the product page hero section to create consistency & scalability.

TIMELINE

February, 2020 - March 2020

METHODS & TOOLS

Human-centered design method; Figma

MY ROLE

User researcher, UX Designer, UI/visual designer.

TEAM

Solo

Overview

We learned from community that our customers cannot find the information they want efficiently when browsing our products. At the same time, as the company grow, we start to have more and more products, and having different hero section design not only hurts the usability & conversion rate, but also becoming hard to scale and maintain for the team.

As a project within the big design system update, I’m the only designer for this project end-to-end, from initial user research, exploration, user testing, to final design document redline delivery.

This is a work project with tide time constraints, so I decided to use an iterative design process. By conducting research on existing ecommerce solutions and on Baymard research, I built the foundational understanding of the hero section of the product pages. I was able to diverge and came up with more than 20 potential directions and gather feedback from other designers to make sure I covered all use cases. Then merge into 1 solution and conducting user testing to hear feedback from real users. Finally, incorporating feedback into design and componentize everything to make it easier for other designers to implement.

The result shows that this hero section design can be easily applied for other product pages and very scalable when we want to add new sections.

Process

Discover, define, design, and deliver

Even thought this is a work project that I have to finish within a limited amount of time. I still tried to follow the User-center design process but make changes to fit the project.

Discover the current issues and conduct research on where we should improve. Define the problem, discuss with stakeholders, and make this project into 2 phases. Exploring and ideating all potential directions, then gathering feedback and conducting user testing. Finally craft the design and push every pixel to deliver it to developers.

Situation & Pain Points

Hero Section is the most critical part of entire product page. But our current hero section design is not satisfying customers' needs nor aligning with business goal.

Our data shows that users generally stay on one product page for 1 minutes and about 50% people will drop after the hero section. So the hero section becomes the most important section for us to sell our product.

We have different hero section design for different products. But as we launch more and more products, this starts to not only hurting our customer experience, but also not aligning with our business goal. For example, we received feedback from our community that our buy button is not at the same location for different product pages. They need to look for it every time. As we trying to expand our service, more and more products have multiple options to purchase. This leads to having multiple different types of design for the same components, which cause inconsistency on the design and repetitive work on designers.

Research Goal

What are the things we are missing?
What we can improve?
What is the industry standard?

Literature Research

Read research articles from Baymard.com to learn about user research studies on e-commerce experience. when don’t have time for user research, I would leverage existing studies & findings and to synthesize insights.

Insights:

  • Having straight-forward description or product highlight of the product near buy section (nice to have: above the fold) and avoid using excessive marketing copy.
  • Style the Primary “Add to Cart” Button to Be Unique and Prominent.
  • Place offer and discount descriptions in the “Buy” section in close proximity to the product price, and generally display a single offer only once.
  • Provide a “Total Order Cost” Estimate Near the “Buy” Section.
  • Place “Free Shipping” Information In or Near the “Buy” Section.
  • Provide an Estimated Delivery Date or Range Near the “Buy” Section.

Competitive Analysis:

I also did research on other e-commerce platform to learn from existing solutions to understand common pattern of existing design. This can be critical because users built expectation & behavior by shopping with a lot other e-commerce platforms, and we don’t want the design become counterintuitive to users, especially designing for e-commerce site.  As users will only stay on your platform when they want to purchase a product, the most important goal is to convert them into purchasing rather than build a new shopping behavior.

Insights:

  • Consistent layout of product pages are important, especially for buy box section.
  • Product images on the left side, purchase/product info on the right.

Analyze our current design after research...

Take all research insights into consideration, I then ideated how we can structure the page with the right information architecture for us...

Design Principle

Design principle can always help me to keep my target users in mind and design for good. The following 3 are the design principles we share within the Wyze design team.

Accessible

Design must be functional for everyone and built with access first.

Human

All of us have different perspective and personalized experiences and that must be represented within the design.

Unified

Each piece is designed with purpose and fits into a whole.

But what about the principle or most-important mindset for this project?

Mobile-friendly

Starting design with mobile version, then design for web. around 60% of our customers mainly use phone to visit our store. Thinking of responsive design, it’s easier to start thinking from mobile ver.

Scalability

- Aim to provide solutions to all product pages hero section.
- Design with block-frame mindset so each section can work individually and not depending on another block to work. Then in the future, it’s also easier to quickly implement changes or add new blocks.

Design Challenge

How might we unify the design of product page hero section so that it can be more accessible and scalable?

Iteration 1

Diverge and ideate

Among more than 20 possible directions of the exploration process, I picked 6 main directions to discuss with other designers. Then synthesize their feedback into one design, which is this first iteration. The goal is to communicate the information architecture and see if there are any other missing use cases.

Feedback Gathering

Gathering feedback from other designers in the team as they are the ones who most familiar with all use cases of the hero section.

Insights/Learnings:

  • Our data shows that our customers want to add multiple products to cart, especially for camera products and accessories.
  • Missing information & use cases:
    • Color options needed for certain products.
    • Cam Plus member can get special pricing message missing.
    • What would happen if too many options they need to choose from in the future? Or options too long to put in one line?
    • What if different price for different options?
    • As we grow, we start to collaborate with other platform to provide add-on services to our customers. But the design of the first iteration is missing this information.
    • We use both light and dark backgrounds for different products.
    • Stock information. In the middle of COVID, a lot of our products facing temporarily out of stock or preorder status, we need a place to let users know about the stock information to make the entire shopping experience more under control for customers.
    • Limited edition or limited quantity products.
  • Photo/video switcher may grab too much attention from users.

Iteration 2

By evaluating and incorporating feedback from peers, I came up with this second iteration. The goal for this iteration is to cover all missing information & use cases from iteration 1, and then make it ready for user testings.

User Testings

Now, it’s time to listen to people who are not familiar with the design and listen to their thoughts & impressions. The test participants are people inside the company, but with no experience with design or product pages.

Key Insights:

  • Like the color pop-up the product, but it also makes everything looks boxy and has a boundary.
  • Overlook the tags on the top.
    • "I’ll read from the product name and then read the information underneath. Then focus on the buy box. So I didn’t realize that this is on sale with limited quantity."
    • “Both of them have the same design and same color, which does not create any urgency for me.“
  • Accessory upsell process should be more straight-forward for users.
    • In the user testings, participants don’t understand what would happen after they click on “add a colored band”. Some common questions are: Is there going to be a pop-up? And how would I know the total price?
  • Not sure the price is total price, or the price of one product. How do they know the individual price?

Final solution

Take one example, to see the before and after...

Redlining

Here's some of the major considerations while I was making the redlining.

  • Following grid system from Wyze web design system.
  • Left-aligning to make it easier to read.
  • Build everything in components/variants in Figma so easier for other designers to drag and use. This would also help keeping design consistency.
    • Redline every section to help developers to understand.

Evaluate the Design

The design meets all metrics before we start the projects. Not only that, it also inspired me to come up with and presented standardized accessory page idea, which enable us to save a lot design/developing time.

  • All product pages have consistency on hero section design and users have less issues of finding certain information.
  • Designed with consideration of future issues. As we have more and more products, and products become more and more complex, we should have the space/design available for future adjustment if we want to add more sections.
  • Saved times for developing product pages & product launches.
  • From the hero section design, I also came up with a unified design for all accessory pages. That design enable us to launch accessory products without developer resource.
  • The hero section & accessory page design helps leadership to notice how much time/labor we can save if we have unified design, and helps us move forward with standardizing all components on the product pages.

Future Vision

Improving on current design, keep learning users' feedback and digging must-haves from business side.

  • Due to limited amount of resource we got to work on aligning all hero sections at once, so have to do product pages by product pages per request. This still cause some inconsistency on the web shopping experience. I'm proposing that we come back and visit this again next year.
  • Receiving request from other teams that they want to break the hero section design by using full screen images. This is also something I'll take into consideration in our next hero section update.
  • On the other hand, I’m also keep documenting all problems on my notes to make sure we think about solutions for those cases next time.

Takeaways

Balancing Business Goal vs. User Experience
When I was working this project, I faced a lot dilemma of whether to prioritize business goal or user experience, especially for upsell.

One of the example would be accessory upsell. The request and our previous solution is to have it on the hero section, and having another section at the bottom of the page to showcase accessories. But during user testings, we found out that this is very distracted and created a disjointed experience for users to have it on hero section. So I made the decision of keeping the bottom accessory upsell section, at the same time, adding another step after customers add the product to cart to show all compatible accessories. In the end, the result shows that our accessory sales increase a lot, such as the SD card sales increased by 50%.

Understanding Real Life Constraints
There's very limited developer resource at the time design is ready to ship. We're not able to make changes for all product pages at once, but in stead, we have to do it per request. Therefore, I tried to make the design document as detailed as possible to help developers to understand.

Propose Ideas To Peers & Leadership
The standardized accessory page idea that I proposed became one of the most handy design and helped saving a lot of time & effort for our team.

Other Projects

Wyze App Shop

Re-imagining the Wyze app shop shopping experience.

Wyze Ecom Buy Section

Re-designing the product page hero section to create consistency & scalability.

Bytedance Lark

Design the user permission system of the shared folder.

Loom

Helping parents of children with Trichotillomania maintain their condition.

Explore Current

An interactive game designed for children.