What Is Mobile LSC?
What Can It Do?
Why We Created It?
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?
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.
UNDERSTANDING THE CONTEXT
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.
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:
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:
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.
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.
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.
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.
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.
Key flows and screens within the product management component are showcased here. Considerations for each flow are briefly summarized under each flow title.
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.
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.
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.
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.
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.
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.
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.