Taobao App Redesign – Navigation & Shortcuts

Redesigning Navigation and Shortcut Solutions for the Taobao Mobile App

Intro

Taobao (淘宝) is a Chinese online shopping website facilitating consumer-to-consumer (C2C) retail. As subsidiary of Alibaba, Taobao is the world's largest e-commerce website and the 8th most visited site according to Alexa. The Taobao Mobile app integrates Taobao's products, marketplaces, and platforms. It consists of price search and comparison, purchase, order inquiry, collection, management, navigation and other functions.

As a frequent user of the Taobao Mobile app, I found the navigation function is awfully hard to use. Overall, it complies with iOS design guidelines, so that most of the gestures and operation are similar to other iOS applications. However, as Taobao consists of hundreds of sections and a variety of channels, the information hierarchy is substantially more complex than other apps. In this case, new design is needed to create a more effortless user experience. In this article, I present how I modified and redesigned the primary and secondary navigation menus to make it simple to reach to any destination on the homepage.

Project Overview

As the most popular e-commerce mobile app in China, Taobao aims to serve the shopping needs of various user groups. It integrates a significant amount of functions and sub-platforms for users who prefer high-end products and those who are more interested in affordable goods. The majority of Taobao users are between 26-35, including university students, married females, frequent travellers, etc.

In this project, I wanted to redesign the primary screen and the navigation method. After analyzing other similar products, I started to brainstorm. I organized the information flow of the top two layers, and made low-fi prototypes. I continued to create a interactive prototype after making the high-fi models in Sketch. The overall results are satisfactory, and I got some positive feedback from users who participated in my pilot study.

My Role

I was the UI/UX designer who created the design shown in this article. I spent two days developing high-fidelity prototypes after analyzing, researching, and iterating my low-fidelity models. I spent another day making the high-fi mockup interactive, using Principle. I also edited the demo videos in Final Cut Pro so that I could present this design to stakeholders prior to the pilot study.

Current Issues


Users have taken it for granted that they need to swipe right several times, just to get back to the main page. Swiping right is NOT right -- at least when you have to do it repeated it for everything in this app. Just when you thought it's finally done, not there yet -- you still need one more tap!

So you see the frustration.


HOW I FIX IT
Alternative Text

When the Solution is not a Solution

What is worse than having a problem?

That is, you realized that there's a problem, and you really realized that, so you "fixed" it with a solution that does not solve the problem, and forget about it for good.

The current solution for this problem is adding a quick access button at the top right corner with a strange triple-dot icon, which oftentimes indicates more options or settings. The location that they chose could not be farther -- why would they do that?

Strange Layout

There are six destinations in the dropdown menu. These six buttons do not correspond to the five entrances, and the UI design can also be improved. This is when pragmatism was inadequately applied in UX design.

Unintuitive Interaction

I interviewed several frequent Taobao users, and interestingly they did not know the existence of such a function until I showed them. Besides, why would they expect users to go to the top area for quick access to the home page?

Alternative Text

Design Objectives


In this project, I was not redesigning the entire app -- that is not a very practical task for individual designers as the Taobao app has a complex and deep structure for hundreds of sections. Instead, I wanted to solve a specific problem: it is very difficult to get back to the home page or jump to other sections.

Analyze other competitive apps and find out the similarities and differences

Competitive analysis is a critical step to making sure that we have the right design and evaluation strategies. For the same group of target users, how can we create unique features or functions so that our product becomes more appealing and comfortable? Knowing competitors' past methodologies help me quickly narrow down the scope of research. I wanted to find out their strengths and weaknesses, and reflect on the product I am designing to find potential opportunities to make improvement.

Create a fully interactive high-fi prototype

For UX design, it is very hard to evaluate how feasible and effective the design is unless we test it. Thus, I planned to list the design options that I have, and select the top two to reiterate for the mid-fi prototype. The more precise the mockups are, the more time-consuming it gets when creating them. Thus, this type of decision usually needs experience and careful assessment. In a large or long-term project, it is possible to develop high-fi prototypes for all plans. For this small project, I will only select one or two design solutions to explore and demonstrate.

Test the prototype and get feedback, then iterate the design process

Good UX designers know what users want. Usually it is not wrong to follow the KISS strategy, i.e. "keep it simplestupid". However, we are never the users as they are a diverse group of individuals with distinct tastes and skills. Therefore, I have to demonstrate the design to existing users and get their feedback and reflect on my current work. Their constructive suggestions sometimes go a long way for minor but significant details that are not noticeable to everyone.

Competitive Analysis

I investigated the most popular 4 online shopping apps worldwide. Amazon and eBay are mostly used by North American and European customers. Lazada the No.1 online shopping and selling destination in South Asia, and PDD is also a top e-commerce platform in China. Overall, their functionalities and operation are similar, except PDD which encourages users to participate in group buying deals. Only Amazon uses a navigation drawer, while the rest use bottom navigation tabs. Overall, Amazon and eBay have clean and smooth design, but they are less efficient for experienced users when navigating. In comparison, Asian e-commerce apps (Lazada, PDD, and Taobao) have a massive amount of entrances to deals, promotions, secondary platforms, etc.

A Comparison of the Primary and Secondary Layers of 4 Popular E-Commerce Apps
Alternative Text

PROCEDURE

Referring to the Guidelines


Prior to the ideation process, I reviewed Google's Material Design and Apple's Human Interface Design guidelines. Design guidelines are more than instructions or rules. They provide some of the most common design practices that have been proven to have efficiency, learnability, and consistency. I selected the top six UI components that can be helpful for rebuilding a better experience of quick access.

PROCEDURE

Analyzing the Menu Hierarchy


Although Taobao has hundreds of sections and sub-layers, they all come from one of the five main entrances: Home, Feed, Cart, Messages, and My Account. Some entrances have a shallow hierarchy inside, including Cart and Messages. The other can lead users to far destinations -- this is why people get frustrated when they cannot have an easy shortcut back to the home page.

Alternative Text
Alternative Text

PROCEDURE

Wireframing & Planning


I sketched a few wireframes to better examine the layout and hierarchy of current menus. I came us with several plans based on my ideation and research. After assessing all the plans, I selected one of them to continue my prototyping process. My assessment was mainly based on my experience, and the final plan that I selected was distinct from the current design.

PROCEDURE

Slicing the Navigation Panel


Placing the element on a tiny screen is art. I referred to Material Design guidelines and give depth points to different components so that users will always know the top layer is the navigation or search panel. A clear structure is a prerequisite for a smooth information flow.

Alternative Text
Alternative Text

PROCEDURE

Mid-fidelity Mockups


At this stage, I can examine my design concept more closely. By creating wireframe mockups, I see how my design fits into the existing product, and determine whether I should move forward with this plan.

Designing & Prototyping

Final Deliverables

The Interactions

Simple, Elegant, Practical

This new interaction approach is simple and intuitive. The animation shows how the bottom navigation tabs transform to a floating tab button (FAB). It is always there. You can drag it, tap it, press and hold for more shortcuts.

Alternative Text

Shortcuts. Really Short.

Imagine any access can be done with ONE tap -- that is possible now. You can even drag the button to the right side if you are using the phone with one hand.


Responsive

Elastic effect was added to the button so that it is responsive and smooth. Physical simulation and effects are important in UX design as they are visually pleasing and attractive.

Customizable

Drag the button to wherever you want on the screen. It is just there waiting for your tap. The glass blurring effect can also be adjusted.

Alternative Text
User's Voice

I think this is a very cool design. It solves the problem that I had while using the app. It is similar to the AssistiveTouch button on iPhone. My only concern is that it would block the content. But this is not a big deal nowadays because the screens are quite big. Overall, I really like this new way of quick access.

User #4

Conclusion

The Taobao app has a nice overall UX design, especially considering the amount of engineering work behind. In this project, I designed an interaction solution only for a single component, and conducted preliminary pilot studies. I think when designing an app like this, it is okay to be more adventurous and create experimental features. These features are probably not less acceptable than existing solutions -- and we can find this out through systematic user studies and usability tests.

Next Project

UI/UX

Interaction Design for Social Robots

A Design & Research Project on Human-Robot Interaction for People with Developmental Disabilities


Read More