Lifo mobile - redesign
Transcript of Lifo mobile - redesign
WEN ZHANGUX | PRODUCT DESIGN
wenzhang.design
Project @Lifo.ai
Creator Hub Mobile App Redesign
TEAM ROLE DURATION TOOL
1 PM, 4 Engineers, 2 Other Designers
Led Creator Hub Mobile App Redesign
Feb 2020 - Current Figma Slack + Asana
* Before redesign
BACKGROUND
01
A Marketplace To Connect the Creators, Brands, and Consumers.
Current Creator Hub as the Core of Life Ecosystem
01 03 04
02
Current Job To Be Done
Connect to Brands by my Campaign
Home - Campaign Apply for Campaign Manage Process Upload Content
8
Connect to Consumers by Lifo Shop
Shop Landing Product Selection
Shop Setting Manage Links To Share Review Earnings
Current Job To Be Done
9
The Problem and Business Goal
Since Version 1.0 Released
Low Lifo Shop adoption rate after launching for 1 month
To Increase Lifo Shop Adoption Rate
10
The Opportunities and Constraints
Optimize Lifo Shop Business
Business Exploration
Constraints
Build Desktop Seller Center for complex Lifo shop sales operation
Limited time and engineer resources
DISCOVERY
02
Current Product Auditing 1. Hard to find the entry point 2. Complicated steps and decisions for users 3. Reversed orders for first-time users 4. A hidden feature to edit product collections 5. Sales performance info missing
01
03
04
02
Like current UI Design Will recommend Lifo Shop to their friends
Find it easy to manage Lifo Shop
Learning From User Survey
4 in scale of 104 in scale
of 103 in scale of 10
14
The Findings From User Interview
Overwhelming informations and CTA
Invisible entry
Too many big decision to make With a small screen
Difficult to manage sales and payments
Doesn’t look good
Critical
Mild
Unclear about what can achieve and how it work
Find it easy to manage Lifo Shop
4 in scale of 10
15
Define Design Problems
Users don’t do complex task on mobile devices
Information architecture /Hierarchy
is misleading
Key functions is under-communication
Too many frictions on major screens
16
Design Opportunity
Rethink mobile ’s vital function
Make complicated features with low frequency of use
desktop only
Simplify informations and
the steps
Make lifo shop feature more
exposed to users
17
Design Principals
Intuitive Effective FrictionlessSimple
1. How To Make a Intuitive and Effective Information Architecture
2. What Data Matters
3. How to Incorporate New Branding
CHALLENGES
03
CHALLENGE 01
A intuitive and effective information architecture
20
Restructure the IA of Lifo Shop
Mobile Desktop
Sign up for lifo shop
Simple shop profile editing (Name + URL)
Sales Performance review - Key statistic
Product inventory review
Simple product detail editing ( Images, name, description)
Earning review + Deposit earning
Sign up for lifo shop
Full Shop editing (Name, URL, Store cover and
other marketing assets)
Sales Performance review - Full statistic
Product selection/ Import/ Merge
Product inventory Management
Full product detail editing ( name, description, SKU, Price, images…)
Earning review + Deposit earning
Vital Functions - Base on the Most Frequent Use Cases From User Interview
21
Restructure the IA - Design Exploration
Option 1: Central management dashboard that provides quickest access to vital features.
Option 2:
Independent portal ; Landing in the Lifo Shop to maximize the exposure of Lifo shop.
Option 1: Central Dashboard
Option 2: Independent Portal
24
Matrix To Make Design Decision
Easy Access to Lifo Shop
Frictionless Onboarding
Easily Adapt to Future Changes
Option 1
Option 2
3
5
Easy To Learn the Overall Function
4
3
Possibilities of Future Business Model Changes
5
5
1
5
Encourage Engagement
5
3
Wireframe Iterate - Make It Self-Explanatory
CHALLENGE 02
What data matters?
27
Lifo Shop Dashboard - Stats
Testing -
1. Total earning/order amount is not critical, recent trend is.
2. Exact amount and axis in infographic is not important, trend is.
01
02
“ I just wanna have a general idea.”- Creators are visual person
01
02
Constrains of Schedule and Engineer Resource
Stats Stats
Traffic
Traffic
28
Wallet - Pending Earnings
Testing -
1. Pending amounts matter a lot.
2. Earnings from Campaigns and Lifo shops should be clearly differentiated.
01
02
01
02
Findings via Testings
“ I do need to know the portion of earnings from each side. They are very different.”
29
Wallet - Pending Earnings
Option 1
30
Wallet - Pending Earnings
Option 2
+
Wallet - Where To Split It - Independent Page? Or in Wallet?
1. Centralized place to manage money related issues. Straightforward for users
2. Efficient use of information, avoid repeating information
3. Creators care about how well their brand is doing. Earning is not the top priority
Win !
“ I don’t want to look at all sorts of numbers at the very beginning.”
CHALLENGE 03
Embrace the new branding
33
New Branding
34
New Branding
35
Exploring the Color Composition
36
New Branding
Fonts
Colors
Round Corner
Icon
Spacing
Lifo Shop - After Lifo Shop - Before
Hi-Fi Mockups
38
Result From User Testings ( 5 Participants)
‘’ It definitely has more character and looks much clearer.
?
Lifo Shop Adoption Rate
“ I think that's all I need for the app.
“ It is pretty straightforward. I do wish there is a preview of the shop or a link to it. Like current UI Design
7 in scale of 10
Will recommend Lifo Shop to their friends
Find it easy to manage Lifo Shop
4 in scale of 10
8 in scale of 107 in scale
of 10
4 in scale of 103 in scale
of 10