Dragon Baby Seafood is an online seafood grocery store based in San Francisco. At first, their target customer group was only nearby Chinese, customers usually just placed orders through WeChat groups. In 2020, as the user base grew, Dragon Baby launched their app and website for customers to purchase and track orders more efficiently and conveniently.
Now, Dragon Baby has been expanding its customer groups and delivery areas. At the same time, however, users reported more issues with the purchasing process.
Redesigned the user purchasing process and optimized main features to create a frictionless and efficient interaction.
Prototyping & Wireframing
4 Product Designers
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.
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.
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.
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.
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.
01. Provide an error alert when users enter the wrong information
02. Autofill the address
03. Locate the user's address before purchasing
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.
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.
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.