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