HAHAJING

Helping users purchase groceries


more efficiently in Beijing.

Mobile App Design (2017)

Haha Jing, is an mobile O2O (online-to-offline) platform that utilizes a network of local convenience stores to allow customers to place orders online for delivery or pick up.

The company was suffering from low user engagement
due to usability issues and lack of guidelines for storeowners. 

ROLES
USER RESEARCH
INTERACTION DESIGN
VISUAL DESIGN
PROTOTYPING

1/Background

I was brought in to introduce the team to how design processes work in America.

As an American-born Chinese citizen, I did not know how to read or write Chinese, but my ability to speak Mandarin helped me communicate with the team and customers. Besides the normal roles of a product designer, I also led brainstorming and feature prioritization sessions with the team as well.

This experience opened my mind to the customs of a different culture and how those social habits translated to digital experiences. I had to be mindful of experiences that were okay to leave alone vs. experiences that could be improved, although it might be new for users.

I took note of behaviors in which
Chinese people shopped for grocery
items through data from app usage,
customer feedback, and the team. 

Based on the findings, we found certain features that were unused, such as the app asking the user their gender, to a tab bar showcasing a users’ “liked” stores. However, most of the pain points clustered them into three bigger themes: Efficiency, Transparency, and Credibility.

There were many pain points around the efficiency of
accomplishing a task from browsing to order.

• Scrolling through a list of stores that were organized by only distance
• Tapping each store to look for specific items they were trying to find
• Manually removing items from the cart that became out of stock
• Manually copy and pasting phone numbers to contact store owners

Manually removing items from the cart that became out of stock

TRANSPARENCY

Transparency was an issue that led customers to contact Haha Jing frequently due to lack of knowledge of key information regarding their orders.

• Not knowing when to expect their deliveries
• Unawareness of how far they were away from free shipping
• Receiving points for purchases that didn’t result in anything

The other two themes were a result of certain business decisions such as a lack of customer service guidelines being enforced on store owners to not proving real time data for deliveries.

• Receiving late/expired orders
• Coupons not being honored due to cash payments being accepted

• Confusion with potential users who thought the Haha Jing app was
   used solely for purchasing Haha Jing purposes due the app sharing
   the same name and logo

We focused primarily on efficiency and transparency as they were solvable through design, while keeping in mind
the business challenges of building credibility. 

By turning them into problem statements, the team and I were able to come up with ideas that were narrow in scope, but broad enough to uncover touch points outside of the app as well.

We judged each idea on how effectively it satisfied our business goals: Increasing adoption of the app and establishing a stronger brand identity.

4/Design of New Features

After prioritizing our features, we had a clear focus on what we could build out in the near term to help customers make purchases confidently.

PEACE OF MIND
FOR DELIVERIES

As Haha Jing did not work with a third party delivery service, we were unable to provide real time tracking. But we could provide delivery time estimates for customers based on past data collected (from order confirmation to delivery). To build trust, a push notification would ask customers if they wanted to contact the store regarding their order when it didn’t arrive within the time estimate.

EASIER WAY TO
COMPARE STORES

All the major food delivery apps in China utilize the 5-star rating system. This makes sense for restaurants where each person’s palate factor in subjectively. As Haha Jing focused on convenience stores, their customers just wanted to make sure their order was correct and on time for delivery or pick up.

By removing star ratings and asking our customers if they were satisfied with their order with a “yes” or “no”, we can help new customers decide more easily where to shop based on the
percentage of satisfied orders. 

FINDING RELEVANT STORES
OR ITEMS

The current browsing experience required users to scroll through listed stores by closest distance and restricted to keyword search by stores only. The new experience simplifies the visual hierarchy while allowing for store browsing based on delivery estimates as well as the option to search by items.

PROGRESS INDICATOR
FOR FREE SHIPPING

All the stores on the app have similar amount requirements for free shipping, which required customers to purchase on average of a few items to qualify. However, in the current app experience, users sometimes leave items in their cart due to the uncertainty of how much more they need to add to qualify for free shipping.

By adding a progress indicator to let customers know how much they’re away from free shipping, we can encourage them to complete the transaction which benefits stores as well as build trust between the customer and Haha Jing.

I've written an article about this project with greater detail
around my design process. Check it out below.

[unex_ce_button id="content_kjeqius6r,column_content_3rjnm9vpc" button_text_color="#10c226" button_font="custom_one_italic" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#ffffff" button_padding="15px 60px 15px 60px" button_border_width="2px" button_border_color="#10c226" button_border_radius="66px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#10c226" button_border_hover_color="#10c226" button_link="https://medium.com/@willywang/simplifying-the-ux-of-an-grocery-shopping-app-in-beijing-dde15dfdf94f" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]Read Full Case Study[/ce_button]