WishPost Logistic EPR Redesign.
Improve the learnability, findability, and visual consistency for a system that handles 1.5 million orders daily.
DURATION
MAY-JUL, 2018
(2 months)
MY ROLE
UX Design Intern
TEAM
1 Product Owner + 2 UX Interns + 1 Frontend Engineer
intro.
Project Background
By integrating logistics and warehousing, WishPost greatly reduces the shipping costs for small orders.
From 2015 to 2018, WishPost served a few large merchants. Starting from 2018, Wish expand the horizon, to make it the default logistic solution for all merchants.
Final redesign
We improved the visual consistency by introducing a new style guide.
we increased learnability and findability by reconstructing information architecture.
We improved scalability by creating consistency in data table layout.
challenge.
The status quo: 3 pain points
Usability: Previously, WishPost covered only a few giant merchants, as it expands to countless small merchants, use cases also expand.
Findability&Learnability: In the past three years, engineers have been adding features to the system. The flat hierarchy, technical UX writing labels greatly reduced the learnability and findability of the system.
Visual consistency: WishPost started as a joint program with ChinaPost, that's how the dark green color palette comes from. Now, WishPost runs independently, thus needs more consistency in visual design.
process.
Project timeline
In May 2018, I joined this project with Jiaqi, another UX design intern.
The redesign was launched in October 2018 to all Wish merchants. Currently, this platform handles 1.5 million orders daily.
research.
To understand of our users better, I approached them in these ways:
- Desktop research: I analyzed external news posts and internal former documents.
- Competitive analysis: I investigated other similar platforms.
- Interview: I talked with Jason from the merchant training department.
- Questionnaire: I designed a questionnaire and the marketing department helped me to send that out. I got around 80 responses from merchants. Also, I read previous survey responses from the marketing department.
With these data gathered, I was able to create task-based personas like below:
Other key findings are:
story#1
Re-construct the information architecture
The original platform has 25 items inside the sidebar and no hierarchy among these items, making it especially difficult for merchants to navigate and find objects.
I started by grouping items in two dimention: frequency and category. This method helped me build a quick hierarchy so I can test it later.
story#2
Consolidate the data tabel experience
Like every ERP system, WishPost has countless data tables in it. For each Each data table has three main elements:
- Summary
- Actions
- Spreadsheet
2.1 Adding information hierarchy to summary cards
2.2 Creating consistent layout for actions
In the MVP version, every table has their own layout of functional buttons(searching box, filter, pagination, export). It a extremely cumbersome experience because the pattern is constantly changing
There are mainly three functional components:
- Searching box
- Filter
- Export button
Below are the iteration process of looking for the most effective layout of functional components:
2.3 Applying progressive disclosure to spreadsheets.
The 'order detail' table was a 12-column spreadsheet that has everything about a order in a row. However, the huge data table also brings:
- Information overload - Random numbers and foreign words made the experience very noisy.
- Less accessible - A longer horizontal table is also less available to those merchants working on smaller screens.
by folding certain details into child rows, I reduced the 12 column to 8
story#3
Build the design system for WishPost
The design system mainly has three parts:
- Styles
- Card Layout
- Data table layout
reflection.
Localization
For a long time, I hated the majority of the Chinese Internet products: They’re noisy and overcrowded. One of my passions that drives me to started to pursue a design career is that I feel I’m obliged to bring those clean and silent design solutions to people I love.
However, when I looked close enough, I realized that there is never a universal design pattern for every culture — design is not science, you cannot just bring those successful solutions from developed industries to a newborn one and blame the users when it’s not working well. (well I think the same is true for other complex systems like politics and economy)
Design is about solving problems, and problems have their causes — language, value system, and digital accessibility — they all vary significantly between different cultures and thus have significant effects on design solutions.
So, why the horizontal filter works better on Chinese websites? The answer can be traced down to language difference:
1.Information density: Chinese characters are denser than any other languages.
2.Flexibility: In Chinese, designers can always adjust the number of characters used without losing its original meaning. 'shoe' can be translated as '鞋' '鞋靴' ‘时尚鞋靴’
Stand higher and ask for the macro picture
In Wish, I worked as a User Experience Design Intern — I take my whole three months here to draw a clear line between ‘user experience’ and ‘user interface.’
Since Wish Shanghai team mainly focus on to B platform that serves merchants, and merchants would never just quit Wish simply because the user interface is not as they desired, so it’s both legitimate and reasonable for the engineering team to use mature UI frame to deliver faster, consistent, and flexible backend platform solution.
But that we don’t need to drown ourselves in pixels doesn’t make designer’s job easier, I spend most of my time trying to figure out the macro picture and business consideration, conduct experiment and optimizing the operation flow, find a balance between user-friendly solution and developer-friendly design, create orders and patterns across different platform.
This experience diverted my focus from crafting beautiful and elegant interface to looking for connections and trying to help people find orders in everyday chaos. For me, that’s a significant step forward.
Adapt to the quick iteration.
Wish was expanding super fast: during my three months internship, the engineering team nearly doubled its size.
So, it’s important for our designers to stand in multiple shoes -- one from the user, one from the engineer, and the rest from other departments.
When I was working on the Wish Merchant Training Website. We successfully reduced the development expansion from 2 months to 4 weeks by involving both designers and content creators from the beginning to the end of the project.
Wish Merchant Landing page.
The landing page for Wish Merchant. Before I started working on this project, they've tried a few versions, but none of them have better A/B testing feedback compared with the former one.
My main job is to eliminate the information redundancy and create a simpler and more joyful visiting experience. I conducted the visual design of icons and banners and rearranged those elements. During my cooperation with the operation department, I understood how to apply data as a powerful tool in design decisions. (Visit site)
Team: Simiao, L(UED designer) + Ningdan, Z(me, UED intern)+ Jiaqi, W(UED intern) + Mengyu, Y(engineer) + Alin(operation)
WishPost ERP system.
Wish's logistics ERP system that enables merchants to assemble and manage their shipping orders.
My job was to give the original WishPost a makeover; the specific tasks include re-arrange the information architecture, create the visual guide, and improve functional consistency. During the process, I mainly focused on enhance data processing experience by designing better data tables that allow users to scan, filter, sort, and manipulate order information.
Team: Simiao, L(UED designer) + Ningdan, Z(me, UED intern)+ Jiaqi, W(UED intern) + Arthur, M(Backend engineer) + Bingwen, S(Frontend engineer)
Wish Merchant Training Platform.
A content website that gathering all the merchant training material including articles, audio, events, and videos.
My role was to craft the high-fidelity design based on wireframes and build it using Wordpress. During the process, I cooperated tightly with the merchant training department to understand user demand and stakeholder demand. (Visit site)
Team: Simiao, L(UED designer) + Ningdan, Z(me, UED intern)+ Jiaqi, W(UED intern) + Jason, Z(Merchant training)
