LSC_banner2.jpg

Mobile LSC

Business Management Tool, Mobile Website

Type              Interaction Design

Time       Summer 2017 | 12 weeks

Team             Another designer from Alibaba UED INB-UX Team

My Role       Product Management UX Design, Interactive Prototype, UI Kit

Tool               Sketch, InVision, Illustrator 

 

What Is Mobile LSC?

Lazada is Southeast Asia’s No.1 e-commerce platform. Lazada Seller Center (LSC) ‘s mobile site helps Lazada sellers perform complex tasks on-the-go that closely tie to their sales performance. 

What Can It Do?

VIEW SALES DATA   Sellers can quickly grasp sales performance and perform routine actions.

VIEW SALES DATA

Sellers can quickly grasp sales performance and perform routine actions.

 
MANAGE PRODUCTS   Sellers can add new a product, edit product details, and bulk manage products.

MANAGE PRODUCTS

Sellers can add new a product, edit product details, and bulk manage products.

 
MANAGE ORDERS   Sellers can process multi-item orders, search a specific order and view order details.

MANAGE ORDERS

Sellers can process multi-item orders, search a specific order and view order details.

JOIN PROMOTIONS   Sellers can view promotion details, submit products and edit sale prices.

JOIN PROMOTIONS

Sellers can view promotion details, submit products and edit sale prices.

 
TRACK PAYMENTS   Sellers can view account summary and details in weekly financial statements.

TRACK PAYMENTS

Sellers can view account summary and details in weekly financial statements.

 
REPLY MESSAGES    Sellers can receive admin notifications, read and reply to customer reviews.

REPLY MESSAGES

Sellers can receive admin notifications, read and reply to customer reviews.


Why We Created It?

OBJECTIVE

EMPOWER SMALL BUSINESSES

How can we make it easy to do business in Southeast Asia? How can we empower small businesses through the Lazada platform?  

SOLUTION

LSC mobile site's design provides efficient functions and reliable interactions to improve sales performance, increases communication transparency to build trust between Lazada and individual sellers, and creates an adaptable structure that can be used by sellers in 6+ countries.

 
 

 

01

UNDERSTANDING THE CONTEXT

BACKGROUND

After Alibaba's acquisition of Lazada, the INB-UX team was asked to redesign the existing Lazada Seller Center app. The goal is to completely own the design and empower small businesses in Southeast Asia through Lazada, a new member of Alibaba's e-commerce eco-system. In the mid-way of the project, due to limited time and developer resources, the product team decided to shift the product type from a mobile app to a mobile website. The team was able to quickly propose new design solutions to adapt the change, and deliver all screen flows and visual guidelines on time to developers.

 

RESEARCH INSIGHTS

The user research team went to Singapore and conducted on-site interviews and usability testings with local sellers. The design team identified 4 major insights that could guide future design decisions:

Small Business/Android User  Most of the target users are individual sellers who use Android mobile devices to update inventories instead of using API.

Small Business/Android User

Most of the target users are individual sellers who use Android mobile devices to update inventories instead of using API.

Performance Driven  Sellers want to see sales data and they care more about having useful product functionalities than UI aesthetics.

Performance Driven

Sellers want to see sales data and they care more about having useful product functionalities than UI aesthetics.

Communication Barrier  Sellers are not able to directly talk to Lazada admins or customers and identify actions to improve sales performance.

Communication Barrier

Sellers are not able to directly talk to Lazada admins or customers and identify actions to improve sales performance.

Value Reliability  Sellers appreciate confirmation since many tasks are time-consuming and transaction related, and thus cannot be undone.

Value Reliability

Sellers appreciate confirmation since many tasks are time-consuming and transaction related, and thus cannot be undone.


02

PROTOTYPING & ITERATIONS

Based on research insights, the design team started developing interaction flows. Designers, product managers and developers conducted design reviews every week to constantly communicate the proposal's alignment to business goals, user experiences and technological feasibilities. Throughout 3 months of development, each functional component design has gone through the sketch, mid-fi mockup and hi-fi mockup stages, and was iterated 10+ times.

I was mainly tasked with the "Product Management" component. Below are my sample works for each stage and some key design changes I made during the iteration process:

SAMPLE WORKS

 

CHANGE 1 - Avoid the "Dead End" Situation

When designing for the "0 search result" page, the initial design only considered providing immediate feedback for users' search action, but not their underlying intention, which is finding the product. 

The iterated design added the top search bar and the “Similar Products” section to increase users’ possibilities of finding the product rather than encountering a dead end while searching. 

 

Initial Design

Initial Design

Iterated Design

Iterated Design

 

CHANGE 2 - Break Interaction Consistency

When designing the pop-up confirmation for cancelling while adding a new product, the initial design followed the product's interaction pattern to place the "Yes” button on the right. However, if users follow their accustomed habit and accidentally hit "Yes", they will lose lots of progress due to all the required entries for adding a new product.

Thus the iterated design flipped the “Yes” and “No” buttons to intentionally break interaction consistency and help users make less mistakes.

Initial Design

Initial Design

Iterated Design

Iterated Design

 

CHANGE 3 - Build Anticipation

When designing for the "select product category" interaction when adding a new product, the initial design only provided elements that support immediate actions but did not help users have a holistic view of their progress.

The iterated design added the breadcrumb trail to show current progress and easily navigate between category levels to make changes. In addition, a large proceed button was added at the bottom, and would not be activated until users reach the end of the current step. These changes helped users building anticipation of possible actions as well as the length of the overall process.

Initial Design

Initial Design

learning-Select Category2.png
Iterated Design

Iterated Design

learning-Select Category5.jpg
 

CHANGE 4 - Ensure Scalability

When designing the product snippet, the initial content layout did not accommodate country differences , which include language, unit, currency, etc.

The iterated design gave 2 lines for product names and gave price its own line to ensure the product's adaptability to those differences, and its scalability to even more countries. 

Initial Design

Initial Design

Iterated Design

Iterated Design

 

CHANGE 5 - Avoid Mental Overload

When designing for the "product info entry" page, the initial design combined many interaction types into one page, which included typing texts, selecting list items, taking pictures, toggling switches, spinning wheels, etc…which are mentally tedious for users.

The iterated design reorganized the information and reduced the interaction types, which not only makes the page more clear, but also allows for tracking current progress.

Initial Design

Initial Design

Iterated Design

Iterated Design


03

HI-FIDELITY DESIGN

Key flows and screens within the product management component are showcased here. Considerations for each flow are briefly summarized under each flow title.

ENTRY POINTS

We identified sellers' most frequent actions in their daily routine: replenish low stock products, add new products, and fix problematic product submissions to Lazada. In order to increase sellers' work efficiency, we provided quick entry points on the dashboard to surface these actions. We used info tiles instead of graphic icons to structure the dashboard, aiming to provide more useful data for sellers and make the best use of the limited space. 

 
lschifi1.jpg
 
 

BROWSE PRODUCT LISTS

We grouped products into 4 categories based on seller's logic in store operation. Live products are ones that are in the store and visible to customers; low stock products are ones that have stocks below a certain number regardless of their visibility; pending products are ones that have problems and thus hidden from the store; inactive product are ones that sellers do not want to sell at the moment.

 
lschifi2.jpg
 
 

ADD A NEW PRODUCT

As mentioned earlier, many flows were redesigned due to the app-to-website change. The original design for this flow was a list of fillable sections. If this design was duplicated to the mobile site, data loss might occur due to frequent page refreshing. Therefore, the new design was compromised into a lengthy linear interaction. To make this experience more pleasant, we added the progress indication and optimized the information grouping logic to minimize needed work.

 
lschifi3.jpg
 
 

BULK ACTIONS

Considering potential needs in making similar changes to a large number of products, I proposed the "bulk actions" function to the product team. The proposal was well received, and was adopted in other functional components as well.

 
lschifi4.jpg
 
 

PRODUCT DETAILS

 
lschifi5.jpg
 
 

FILTER & SORT PRODUCTS 

Filter and sort functions are designed to allow sellers find their target products as quickly as possible. Since in most cases sellers' products will focus on a few number of categories and brands, there is no need to display all categories and brands in the system for sellers to filter from. Since price range can vary greatly across sellers, it might be quicker for them to type in numbers than selecting from a long list of price ranges.

 
 

04

VISUAL DESIGN SYSTEM

We developed a visual design system to keep everything scalable and cohesive with Lazada's original branding strategy. We brightened the overall color theme, and chose Helvetica typeface to give the mobile site a modern yet professional look. All potentially reusable design elements are collected into the UI-Starter-Kit, and grouped into global elements and component-specific elements. Each element is a Sketch symbol that can be easily modified and updated later. Below are the snapshots for the global elements, as well as typography and color themes. 

lsc_visual.png

04

NEXT STEPS

The project will continue iterating on the current design based on user feedback, as well as completing the design of other features such as seller account, storefront editing, data analysis, etc. There is also a possibility of developing a new version of the seller center mobile app in the future.