Enhancement for E-commerce App

Advance the shopping experience on mobile app

Background

One day, business unit noticed that there was a significant drop on the App product metric during purchase process. While Development Team worked on checking the setting of data tracking, I worked as a senior UX designer and partnered with another UX designer to identify the problem as well. We analyzed the existing tracking data and conducted user study to better understand user behavior. We also compared the usability testing results of users' purchase journey on the mobile device from our service which include App and mobile web.

Company

Rakuten Taiwan introduces the unique B2B2C e-commerce business model to local market.


Team

UX team, App Dev Team, PM, Business Department


Responsibility

I was a senior UX designer, conducting the user research and analyzing the qualitative and quantitative data to identify the problem and reason from users behavior. I also shared the insights from research to cross-functional teams and helped to define the next step for the product enhancement.


Problem Statement

As a designer/ developer/ product manager I need to know the reason cause the drop and plan for further App enhancement.


Understand App Users’ Behavior

Unveil App user online shopping journey

Diving deep into the App users' behavior and needs, I led a collaborative effort with another UX designer to conduct insightful user interviews. We translated our findings into a comprehensive journey map, unveiling three user types.

This journey map of app shoppers shows there are three types of users with different goal for purchase.

Usability testing for comparing the mobile experience

To compare the experience for mobile app and mobile web for different UI and use flow on each platform, I conducted usability testing to further explore if there is any usability issue that would stop users from their purchase journey on existing products - mobile web and mobile app.

The usability test result on task completion shows the existing in-shop search performing better than other two enter points -  mobile web header search and mobile web in-shop search
The usability result by steps completion shows the existing app in-shop search performing better than mobile web header search.

Insights from research and data

Base on qualitative and quantitative data, we were able to reveal the facts how users experience their purchase journey with our E-commerce App. The research results indicate the next step for enhancement:

  • Better division of search scope

  • More efficient for screening search results

  • Clear communication for member points and order status

After discussion between Business Department and Product Department, we decided two enhancement approaches for a quick win with limited resource.

Design Outcome One: More Efficient Search on Mobile Device

Painpoint

  • Input keyword every time for searching a product is troublesome. Users might repeat the search or slightly tweak their search keywords during their product picking process.

Solution: Add shortcut for keyword search

  • Fasten keyword search with providing keyword history.

The flow of switching between global search and in-shop search with add on keyword history  
The flow of interactions on keyword history panel
The implementation of keyword history

Design Outcome Two: Wishlist Enhancement

Painpoint

  • Hard to identify product status when users scan through the wishlist.

    • Cannot distinguish campaign from sold out in same label style efficiently.

    • Hard to distinguish CTA, Add to Cart Button, from available and unavailable products in similar gray color.

The original wishlist config design that confused users when they scan through their wishlist

Solution: Help users fasten their scanning on wishlist items

  • Convert config layout into full width for more space showing product info on the mobile screen.

  • Indicate product info with an update.

  • Easy to differentiate product statue for item with a campaign or not for sale.

  • Easy to differentiate CTA buttons status - available or unavailable for purchasing.

The new wishlist config design helps users in scanning their wishlist with sufficient information 

Interested about this project?

Contact
Previous
Previous

Retail Sourcing