Usability testing setup

We all know that the check-out process is one of the essential parts of online shopping. Thus our first learning goal was to evaluate the current check-out process. Then another component we were looking into is the navigation and search function. How can customers complete other tasks if they can't find the products? Therefore, the second learning goal was to obverse customers' browsing behaviors.

Tasks
‍
01. Browse the app and add the products you like to the shopping cart.
02. Place the order after completing task 1.
03. Purchase one pack of Fresh Clams and two packs of Codfish.

Findings & Recommendations

01 / Hard to see the critical information

01. Users need to read the announcement because it has a lot of critical information, such as how to place orders, where to pick up seafood, when the deadline is, etc. However, the link seems unclickable.

02. Users felt confused about no free-shipping offers or billing information on the shopping cart page.

03. Some products' descriptions are outside of the screen on the product information page.

04. Freshness is the most significant advantage of Dragon Baby compared to other similar products. But those seafood images with dark overlay look unattractive and make it hard for users to believe they're freshly caught.

Recommendation

01. Display the critical information in a more prominent position
02. Use clean and attractive product images
03. Provide discounts, free shipping information on the cart page
04. Inform users of other fees, including tax, service fees, and tips

02 / Hard to find the products

The app lacks search functionality, while many users often rely on searching to find the product they're looking for. Although it has different categories options on the home page, they share the same layout and look exactly like other products. More than half interviewees ignored these category options.

Recommendation

01. Incorporate a search on the homepage
02. Relayout the homepage, separate categories and products

03 / Missing error prevention

01. Currently, Dragon Baby only provides delivery service in San Francisco, but users living outside San Francisco can also place an order successfully with no warnings.

02. Users felt unreliable because there was no error alert when entering the wrong information.

Recommendation

01. Provide an error alert when users enter the wrong information
02. Autofill the address
03. Locate the user's address before purchasing

Optimizing customer purchase experience

A few users reported that it's highly frustrating when there is no warning at all when they are outside the delivery area. To avoid that, we proposed a brand new onboarding process to encourage users to log in before browsing so that they'll be notified when their addresses are not deliverable. The latest user flow has less friction, and customers will achieve their goals quickly and easily.

Previous customer flow

New customer flow

Taks flow wireframing

01 / Onboarding experience

02 / Add products to the cart

03 / Check out process

Frictionless interaction & Seamless buying process

Based on the recommendations from the usability study and the optimized customer purchasing process, we focused on improving the onboarding experience, product searching, and check-out pages.

01 / Sign In / Sign Up

Dragon Baby primarily uses WeChat to communicate with customers, so we added a log-in with the WeChat option on the sign-in and sign-up pages to make customer service more accessible.

02 / Auto Location

After customers log in, the app will ask them to access their location and guide them to add the shipping address. Even if users' addresses are not deliverable, they can still enter the homepage and browse products.

03 / Announcement Popup Window

The Announcement is essential to read before purchasing, so we made it a popup window that appears when customers first log in. It can also be found on the contact page now.

04 / Browse

Customers can easily find products with the search bar or switch categories.

05 / Back in Stock Notifications

Add a subscribing option for users to get notified when the wanted product is restocked to avoid customers leaving the app immediately.

06 / Product Page

We added a shortcut to the cart, and a save feature so that customers don’t have to go back to the home page to find the cart button.

07 / Shopping cart Page

We changed the default selection of all products to a flexible selection and added recommendations, purchase history, and free-shipping reminders.

08 / check out Page

There were not many changes on Check out page except an error alert for the invalid information.

Reflections

After working on this project, I realized that a smooth user flow and good navigation are essential to e-commerce platforms. Support typos and error alerts can gain more trust from customers. Make sure the search is functional and easily accessible to all customers, then the customers will be able to achieve their goals quickly and with ease.

It's necessary to provide helpful notifications when we cannot meet the customer's needs, such as the products being out of stock or the orders cannot be delivered. A warm and sincere welcome not only gives a sense of caring and makes customers feel appreciated, but also helps sustain customer interest by creating an expectation. All in all, a good user experience needs all elements working in unison.