About user

Posts by :

FlipthefunnelCopy

FlipthefunnelCopy

 

Homepage

 

FlipthefunnelCopy
Consultation Scheduling
Flip the funnel
Flip the funnel experience
Flip the funnel
Driver License Scanning
 
A growth design trick: leveraging ah-ha moment

Flip the onboarding experience.

Bank connection is a huge friction point.  I flip the order of the onboarding experience by giving users the ah-ha moment before the bank connection. Did users get motivated by seeing ah-ha moment early? Let’s see how it goes.

 

My role: strategy partner, designer

Stakeholders: Risk, legal, Infra team.

 

FlipthefunnelCopy
 
Background: What does Earnin do?

Earnin: Cash out your paycheck early

Earnin is an app that lets you draw small amounts of your earned wages before payday.

FlipthefunnelCopy

Activation: Cash out within 7 days.

But we have a long onboarding flow before cash out.

Since Earnin’s funnel is overly long, and cash out is right after onboarding. Hence we are going to improve activation by increasing conversion in the onboarding flow.

FlipthefunnelCopy
Earnin Funnel

Sign up step conversion

sign up steps conversion mapping by step. The exact number is not shown here due to NDA. According to the data, the biggest opportunity we can have is the “connected bank” step at this stage.

FlipthefunnelCopy
Growth Design: Business metrics

What are the metrics we are targeting on the bank connection step? 

The overall conversion rate: 58%
 
FlipthefunnelCopy
Growth Design: Business metrics

What are the granular metrics we are targeting here?  

 

FlipthefunnelCopy
Growth Design: Problem definition

What problems do users have with connecting bank?

We got some insights from qualitative user research:

 

FlipthefunnelCopy
Growth Design: Problem definition

How might we get the distribution of the drop-off cause? 

 

FlipthefunnelCopy
Growth Design: Problem definition

We launched a couple of surveys and analyzed existing data.

 

FlipthefunnelCopy
Growth Design: Hypothesis ideation

How might we solve those user problems to get a higher conversion?

 

FlipthefunnelCopy
Growth Design: Hypothesis ideation

Which hypothesis should we test?

FlipthefunnelCopy
Growth Design: Hypothesis ideation

How might we get users motivated to find their bank credentials?

Hypothesis: If we give users some motivation, they will try harder to find their bank credentials to connect their bank and the conversion rate will increase.

Through user research, we found that there are 2 kinds of motivation that could potentially drive users.
Showing benefits users can get by educational copy

Motivation 1

Showing benefits users can get by educational copy
Allow users to cash out before bank connection

Motivation 2

Allow users to cash out before bank connection
Growth Design: Hypothesis ideation

Motivation 1: How might we motivate users by showing benefits?

– Invalidated

 

FlipthefunnelCopy
Growth Design: Hypothesis ideation

Motivation 2: What could be the possible ways for cashing out when we haven’t approved users’ eligibility yet?

Earnin’s business model requires bank connection, GPS, .etc to approve users’ eligibility to cash out. So in order to allow users to cash out at this point, it will be a different experience from normal cash out users have.

 

FlipthefunnelCopy
Growth Design: Hypothesis ideation

Motivation 2: which alternative should we go about?

 

FlipthefunnelCopy
Growth Design: Design decisions

Motivation 2: How might we motivate users by cashing out before bank connection but send money later after approval?

FlipthefunnelCopy
Growth Design: Design decisions

Motivation 2: How might we allow users to cash out before bank connection but still have a delightful experience?

 

Design Exploration Diagram

Design Exploration Diagram

Growth Design: Design decisions

Let’s look at one of the design exploration combinations: 1.1 + 2.1 + 3.1. how do we evaluate it?

 

FlipthefunnelCopy
FlipthefunnelCopy
FlipthefunnelCopy
Growth Design: Design decisions

How do we make a decision not to move forward with this solution?

Through user testing, we got some feedback from users and invalidated some of our design explorations.

 

FlipthefunnelCopy
Growth Design: Design decisions

We consolidated the feedback and made the final decision. 

 

FlipthefunnelCopy
Growth Design: Design decisions

What is the final in-app experience?

 

FlipthefunnelCopy
FlipthefunnelCopy

A/B Test Plan

Control: Original funnel(gray text in the diagram below)

-50% on iOS & Android

Variant: Flip the funnel (Black text in the diagram below)

-50% on iOS & Android

 

Final Result:

Variant: 20% absolute conversion↑ + 2% activation ↑

+ surprisingly a slightly increase in tip rate.

 

FlipthefunnelCopy
What is “Growth Design”?

What is “Growth Design”?

 

What is growth design?

This is a short intro for people who visit my portfolio but confused about the “Growth Design” concept. 
Growth design vs. Classic design

“Too long; didn’t read.” 

What is “Growth Design”?
 

I don’t understand this flow chart. Is there an example? 

e.g. What do we do to get “rain growth”?
What is “Growth Design”?
People did some “research” and thought that there is a sky god controlling cloud. There is no rain because he is unhappy. By doing something that can make sky god happy will get more rain.

 

Classic mindset:

Correlation chain with low certainty 

What is “Growth Design”?

Under this subjective recognition, in ancient times, people will hold a rain dance ritual to please the “sky god” and pray for the rain.

However, in modern times, people took a reversed thinking process: instead of trying to solve the problem by random techniques, the research started from the final result and going backward to problems and solutions.

 

Scientific mindset:

Causality chain with high certainty

What is “Growth Design”?

Now, people will do cloud seeding to change the clouds’ behavior.

Growth design in a nutshell

Growth design: an evolution of adopting scientific research in UX design

 
What is “Growth Design”?
Let’s do a quick recap

You’ve browsed this far. Now let’s take a look at it again. 

 
What is “Growth Design”?

Want examples in design context?

I appreciate your curiosity, let’s continue our journey with the projects below.
Consultation Scheduling

Consultation Scheduling

 

Homepage

 

Consultation Scheduling
Consultation Scheduling
Flip the funnel
Flip the funnel
Flip the funnel
Driver License Scanning
 
 
Consultation Scheduling

Consultation Scheduling

A feature in Vida’s mobile app that helps the user to schedule a consultation with their health coach. 

 

Consultation Scheduling
 
Background

What is Vida Health?

A digital platform that bridges the gap between health goals and individuals through health programs and coaching.

Consultation Scheduling
 
Problem

Members are having a hard time finding coaches’ availability to schedule a consultation.

Activation within a member’s first week is a key contributor to long term retention. During periods of high volume, in and around customer launches, it becomes increasingly difficult to find coaches with availability for consultation scheduling.

About 30% users drop off due to not having a coach consultation

About 30% users drop off due to not having a coach consultation

Defined Challenge

Make consultation scheduling as easy as possible.

Current consultation flow a customer will go through. 

Consultation Scheduling
 
 
Understand the Problem

What are the problems with the consultation scheduling in the product end?

Consultation Scheduling

Through user interviews with coaches and clients, we discovered a few pain points here:

  1. Limited availability. Users can only view 6-days availability into the future and often view days that could have 0 availability.
  2. Limited time duration. Users can only set up a consultation of fixed time duration. (initial consultation 40 mins, follow up consultation 30 mins), but it often doesn’t take that long, some shorter available time slots were wasted
  3. Limited edit access. Users have to message their coach to set up a follow-up consultation and reschedule a consultation. 
 
 
Product Requirements

What are the possible approaches to these problems?

Based on the discussion we had with the dev team and product team, we refined the requirements to ensure they can make much maximum impact without adding massive engineering effort.

  1. Unblock availability. Allow a user to only view dates with availability and look at all future days of availability.
  2. Two options of time duration. Members can schedule flexible time slots of 30 or 15 mins only for follow-ups.
  3. Unblock follow-up consults. Users can schedule follow-up consults when they want, without requiring coach permission or confirmation.
 
 
Brainstorm

What is the mental model of scheduling an appointment?

To start off, we rethink the scheduling flow. There is an argument around the mental model of scheduling from a calendar view vs. a 3-day view. We conducted a usability test to inspire the new consult scheduling UX designs, and to observe and record which calendar view they preferred and why. 

Have a date in mind first and select a time that is available. (Using Calendly.com)

Calendar view

Have a date in mind first and select a time that is available. (Using Calendly.com)
Have a series of times in mind first. (Using Acuity scheduling)

3 day view

Have a series of times in mind first. (Using Acuity scheduling)
Takeaway

Most of our users think about which dates work over which times and so prefers the calendar view.

Calendar view: It works much better because they can see the month out. 

3-day view: They didn’t want to see a whole grid of days, especially if those days didn’t work for them. They don’t want to shift through days that don’t work for them.

 
 
Brainstorm 

What are some possible calendar view scheduling alternatives?

I looked up different scheduling features on the market and came up with 3 directions of scheduling through a calendar view.

Available time slots style

Available time slots style

Provide available time slots for a user to choose from and it takes least interaction for users to accomplish the task.

Reservation style

Reservation style

Users would experience the frustration of repeatedly finding no time available, and it is not efficient for scheduling.

Calendar booking style

Calendar booking style

The coach’s calendar should not be visible to the member. It might cause some extra interaction problems or extra taps to accomplish the task.

 
 
Iteration

What are changes being made based on the new idea?

Set up the first consultation flow
Consultation Scheduling
Set up a follow-up consultation flow
Consultation Scheduling
Feedback

It might cause mistakenly touching unintended time slots.
The consultation info page and confirmation page could be consolidated into one page.
etc…

 
 

Final Design

Set up the first consultation flow
Consultation Scheduling
Set up a follow-up consultation flow
Consultation Scheduling
 

Final Consultation Scheduling

Consultation Scheduling
 
Summary

What is the result?

1. Limited availability. 2. Fixed time duration. 3. Unable to set up a follow-up consultation.

Old design

1. Limited availability.
2. Fixed time duration.
3. Unable to set up a follow-up consultation.
1. Unlimited future availability. 2. 15 min and 30 min for users to choose. 3. Set up follow-up consultation through the same flow.

New design

1. Unlimited future availability.
2. 15 min and 30 min for users to choose.
3. Set up follow-up consultation through the same flow.
 
ID Scanning

ID Scanning

 

Homepage

 

ID Scanning
Consultation Scheduling
Flip the funnel
Flip the funnel experience
Flip the funnel
Driver License Scanning
 
ID Scanning

ID Scanning

A new identification scanning flow that addresses the high drop-offs resulting from our current Driver’s License scanning flow and accommodates market requirements.

 

 

Project Scope

A project for Lime’s mobile app

My work: Designed the whole ID scanning flow and planned for the future roadmap.

Team: Core Product Team.

ID Scanning
 
 
Problem

Current Driver License scanning has a high dropoff and only accepts limited forms of identification.

In total from data analysis, we see a 10-15% drop off at the identity card scan.

High drop-offs

In total from data analysis, we see a 10-15% drop off at the identity card scan.
Markets are increasingly requiring various forms of identity card-based verifications. The government relationship team is requesting a more flexible ID scanning feature.

Market requirements

Markets are increasingly requiring various forms of identity card-based verifications. The government relationship team is requesting a more flexible ID scanning feature.
 
 
Understand the Problem

Why does the product have these problems?

Today, we have a basic US-style driver’s license scan using Google Vision. We did some user testing and data analysis, and found out that this approach has a number of problems as it does not:

  • Create a seamless UX because of the quality of scanning tech and the user flow.
  • Work for people without a US-style DL
  • Enable all the government needs.

 

 
 
Design Goal

What do we want to achieve through ID scanning redesign?

  • Seamless UX. 
  • Meet governments’ needs. We fulfill base requirements for all governments today and in the next 3 months
  • Scalable solution. We create base ID scan modules that work across all Lime products.
 
 
Proposed Solution

How are we going to solve the problem?

We will build two in-app modules:

  • Photo-based ID scanning for multiple IDs powered by Microblink
  • Manual ID entry.
High level user flow
ID Scanning
 
 

Based on the technology constraints and the design goal, we would like to invest design resources in the photo scanning screen and to see how we can craft a smooth UX.

1. Testing the scanning flow

 

All ID types in a slideshow

All ID types in a slideshow

Select ID types on a separate page

Select ID types on a separate page

Select ID types from horizontal scroll menu

Select ID types from horizontal scroll menu

The main purpose of this user testing is to find out if:

  1. Users can pass the ID scanning smoothly.
  2. Users can discover the entry of other ID types.
Key takeaways:
  1. Dropdown list oftentimes works but needs to be more obvious.
  2. Horizontal scroll menu and slideshow diminishes the discoverability.
  3. Using a watermark to educate users works but needs to be more specific.
Comments from engineers:
  1. The technology can work seamlessly without specifying ID types.
  2. Having a separate ID list would be a scalable solution on the engineering side.

 

Results:
  1. Have a dedicated area on the screen for scanning.
  2. The watermark is placed according to the best scanning distance and size. 
  3. Highlight the part that needs to be scanned by text and symbol.
  4. A more obvious drop-down list entry.
Refined ID scanning flow

Refined ID scanning flow

 
 
2. Testing the manual entry flow

 

Manual Entry through a button

Manual Entry through a button

Manual entry in the dropdown list

Manual entry in the dropdown list

Manual entry in a horizontal scroll menu

Manual entry in a horizontal scroll menu

Manual entry button shows up after a few seconds

Manual entry button shows up after a few seconds

The main purpose of this user testing is to find out:

  1. how users are going to react when the scan fails.
  2. if users can discover the manual entry option.
Key takeaways:
  1. Users will be actively looking for other options if the scan failed.
  2. A single CTA button has the highest discoverability.
Comments engineers and the GR team:
  1. Manual entry is not always a legit option because of the technology we will be using.

 

Results:
  1. Place friction in the UX for discovering manual entry intentionally.
  2. Furthermore, make it an obvious option when the scan fails to cut down drop-offs.
Refined manual entry flow

Refined manual entry flow

 
 
Final Design
ID Scanning

 

 

Result

What’s the outcome of the design?

Target metric outcome

We would now like to start quantifying the cost of our gov-tech features, i.e. the impact on trips (via user drop off) this feature will have. Thus, we also need to gather the data to show the  impact our feature will have on the market.

  • ID scan works for 70% of users
  • We manage to convert 5% through the funnel for Lime-S
 
Custom How-to-ride Tutorial

Custom How-to-ride Tutorial

 

Homepage

 

Custom How-to-ride Tutorial
Custom Tutorial
Flip the funnel
Client Approval
Custom How-to-ride Tutorial
Asset Library
Custom How-to-ride Tutorial
 

Custom How-to-ride Tutorial

A feature in Lime’s internal tool that allows different markets to customize their own onboarding experience.

Project Scope

A project for Lime’s internal tool

My work: Designed the whole feature for the internal tool.

Team: Core Product Team.

 
 
Problem

How can we accommodate user compliances for different markets?

Custom How-to-ride Tutorial

Our how-to-ride tutorial currently cannot be customized per region, and the content is hardcoded.

Several cities have specific road rules, such as certain required parking areas where scooters should be dropped off, or specific road types that users can ride on (e.g. most cities prohibits riding on sidewalks while Denver requires riding on sidewalks).

 
 
Understand the Problem

What problem does the current tutorial have?

  • Currently, we only have a version of the how-to-ride tutorial that is designed for the scooter market and only accommodates the most general traffic rules.
  • As Lime is expanding to new markets, there is more fleet combination(scooter focused, mixed fleet, bikes only etc) and more traffic rules to comply.
  • The tutorial part is a big talking point when Lime is dealing with local officials. Our product team has received a lot of requests to have a dedicated tutorial based on the region.

*The new onboarding experience has been designed to have a standard pattern, which is scalable for all kinds of requirements.

How-to-ride Tutorial

How-to-ride Tutorial

What content needs to be included in the market?

Based on the market requirements and fleet types. We figured that there are:

  • scooter-only,
  • bike-only,
  • scooter and bike,
  • ride-on-sidewalk versions

for now and potentially some other content in the future.

 
 
Target Users

Who is going to use the customized tutorial?

Custom How-to-ride Tutorial

Local Ops

Lime has local teams based in different markets who are in charge of local settings. Thus it would be reasonable to have this feature in the internal tool.

Custom How-to-ride Tutorial

Central Ops

Operation team at HQ. All the available content should be configured by the central ops team. Thus there should be a separate feature in the internal tool for central ops to configure content.

 
 
Design Goal

What do we want to achieve?

Central ops:  configure and control all content.

Local ops:  can set up their own content and local rules based on their market requirements.

 
Proposed Solution

What will the feature be able to do?

There will be two features in the Internal tool:

For central ops:

Configure content(Including text and animation) 

Configure Tutorial Pages

Configure Tutorial Pages

Comments from Engineer
  • Attach more properties to one animation group will help get more flexibility.
  • Reuse some UI from other features in the admin tool.
Comments from central ops:
  • Easy to use, probably need more instructional text.

 

 

Refined Design for configuring animation groups

 

Custom How-to-ride Tutorial
Local ops:

Support multiple versions of tutorial contents and allow setting of a tutorial version to show per region/sub-region.

Local Rules page: each region/subregion can have one custom “Local Rules” page that will be displayed as the last screen in the tutorial.

Select tutorial based on the market

Select tutorial based on the market

Comments from Engineer
  • Attach more properties to one animation group will help get more flexibility.
  • Make region information more obvious.
Comments from local ops:
  • Needs some explanation for how the result will be regarding the setting up the customized rule.

 

 

Refined Design for customizing how-to-ride tutorial

 

Custom How-to-ride Tutorial
 

In Mobile App:

The combined content of the tutorial + local rules should be displayed 1) during the trip start flow on the first ride and 2) can be accessed via the banner as the “How to ride” in-app deep link.

Custom How-to-ride Tutorial
Custom How-to-ride Tutorial
 
Lime Onboarding Experience

Lime Onboarding Experience

 

 
Lime Onboarding Experience
Lime Onboarding Experience

New Onboarding Experience

An onboarding experience that helps new users get a clear understanding of how to ride lime products as well as build a better government relationship by demonstrating that lime is committed to public education and safety.

 

Project Scope

A project for Lime’s mobile app

My role: Sole designer designed and created the whole onboarding experience.

Team: Core Product Team. 

 
Summary

Final MVP

1. How to ride

1. How to ride

2. ride with helmets

2. ride with helmets

3. Where to ride

3. Where to ride

4. Park with care

4. Park with care

5. End the trip

5. End the trip

 
Problem & Goal

What needs to be addressed in the onboarding experience?

Specifically, there are 3 issues to address through this new onboarding experience per users’ feedback and GR and other teams’ feedback.

It is necessary for us to convey the correct rules of riding clearly so that users can comply with those regulations and get a sense of reliability when using our product.

User Compliance

It is necessary for us to convey the correct rules of riding clearly so that users can comply with those regulations and get a sense of reliability when using our product.
Communicating riding rules in a strong way with users presents that lime is a company committed to educating users in the clearest way possible, which helps form a better relationship with government.

Government Relationship

Communicating riding rules in a strong way with users presents that lime is a company committed to educating users in the clearest way possible, which helps form a better relationship with government.
Our competitors leveled up the design quality of their tutorial to a much higher level, which makes it really noticeable for having a rough tutorial and it has a negative effect on our brand sensitivity in the future.

Brand sensitivity

Our competitors leveled up the design quality of their tutorial to a much higher level, which makes it really noticeable for having a rough tutorial and it has a negative effect on our brand sensitivity in the future.
 
 
Understand the Problem

Current onboarding experience

The how-to-ride Tutorial Part

The how-to-ride Tutorial Part

Since overall onboarding user flow is already optimized, the main focus of improvement will fall in the how-to-ride tutorial part in regards to user compliance and government relationship.

For example, different cities have different rules for users to comply and different markets have different vehicle types(e.g. scooters only markets vs. bike only markets)

 

The tutorial should give users a clear understanding about:

  1. How to ride. 
  2. Lime is committed to public education and safety.
 
 
Proposed Solution

Animation Design

Considering that we need to convey a large amount of information in a very short amount of time, an animated tutorial would be the best approach.

1. Storyboarding

There are basically 5 separate stories need to be included in the tutorial. In order to catch the user’s attention more effectively, all pages are limited to less than 5 seconds.

Lime Onboarding Experience
2. Character Design

For character design, factors need to be taken into account:

  • Social fit(gender, skin and hair color)
  • Represent our user groups
  • Different from our competitor
  • Recognizable
‘6-head’ to make it look young. Also, yellow is one of the brand colors to make it recognizable.
‘6-head’ to make it look young. Also, yellow is one of the brand colors to make it recognizable.
Lime has scooters of 3 different generations that has 3 different lookings. The scooter should look generic and recognizable.
Lime has scooters of 3 different generations that has 3 different lookings. The scooter should look generic and recognizable.

 

 

3. Scene Design

For scene design, it is never only for creating a meaningful scene to convey information. From a product perspective, there are more things that matter. (e.g. Scalability for different markets and contexts.)

Rules for Standard layout of the content

Rules for Standard layout of the content

Rules for the motion of the component

Rules for the motion of the component

 

 

For the actual scene design, it is clear that what rule needs to be followed as most of the constraints are clearly stated:

  1. standard format
  2. scalable for other new types of vehicles
  3. time duration is around 4 seconds
Hi-fi scene design

Hi-fi scene design

 

 

4. Animation export to code

The advantages of Lottie are: 

  • lightweight and fast to load
  • Full playback control
  • Easily fit screens of all sizes
  • Great quality performance

And these are the reason I decided to make the animation in Lottie code format instead of GIf or video.

In order to convert the animation to Lottie code, there is a restricted way of constructing the animation, these techniques are reflected in the scene and character design to some extent.

Consider hand-offs while designing

Consider hand-offs while designing

 

Iteration

There are more combinations of animation that accommodate markets regarding vehicle types and traffic rules. For example, markets that only have scooters on the road should only have scooter-related content in the onboarding experience. 

A management tool is needed to address those problems, which is on the roadmap.

In addition, there are also other GR and regulation issues that are involved in the onboarding experience and they affect our conversion rate.

Lime Onboarding Experience
Lime Onboarding Experience
Fohlio Client Approval

Fohlio Client Approval

 

Homepage

 

Fohlio Client Approval
Custom Tutorial
Flip the funnel
Client Approval
Fohlio Client Approval
Asset Library
 
 
Fohlio Client Approval

Client Approval Workflow

A workflow that helps interior designers get all product specifications approved by clients.
 
 
Project Scope

A project at Fohlio Inc.

 
 
Background

What’s Fohlio?

When interior designers are creating a new designer, he needs to create product specifications to communicate all design details with clients.

Fohlio is a web app that helps streamline designer’s day-to-day processes and helps to make them more efficient. It’s the fastest way to create the product specification.

Interior Designer

Interior Designer

Design scheme

Design scheme

Fohlio Client Approval
Client

Client

Fohlio Client Approval
 
 
Problem

Product approval process is not clear

A designer puts product spec sheet together with other materials such as renderings, technical drawings in a slide deck and gets feedback from clients through a presentation.

However, both designers and clients are having a hard time keeping track of products in the product spec sheet. 

Fohlio Client Approval
Fohlio Client Approval
Opportunity

Improve the efficiency of the approval

Improve the efficiency of their current workflow by creating a new feature in Fohlio that helps designers and clients with product approval workflow, 

 
 
Target Audience

Who uses this feature

Primary User: Clients

  • Range from homeowners to large corporations.
  • Instruct interior designer on the design scheme to fit their needs.

Secondary User: Interior designers

  • Projects range from simple indoor and outdoor home environments to hotel lobbies and lavish mansions.
  • Create indoor spaces that satisfy the client’s needs for aesthetics, safety, and function.
 
 
Context and Needs

What information users need

Context

When designers have specified products with a spec sheet, he needs to get feedback and approval from clients.

Project info: project project name, document version name, issue dates, table of content, general notes. Designers’ info: designer’s company logo, name, contact info. Actions: View all item information. Approve and comment all items

Client Needs(Primary user)

  • Project info: project project name, document version name, issue dates, table of content, general notes.
  • Designers’ info: designer’s company logo, name, contact info.
  • Actions: View all item information. Approve and comment all items
Clients’ info: contact info. Project Info: visibility of items for the client, approval status of items. Actions: Alter the visibility of content. Get notification about the approval status.

Designer Needs(Secondary user)

  • Clients’ info: contact info.
  • Project Info: visibility of items for the client, approval status of items.
  • Actions: Alter the visibility of content. Get notification about the approval status.
 
 
Design Goal 

A feature facilitating approval process

To design a feature that designers can use to have clients review all the contents they need and go through the approval process as easy as possible.

 
 

Design proposals

Workflow around product specification

Designers specify with real products and get client feedback and approval on real products. Then designers make changes per client feedback and note the change orders.

Fohlio Client Approval
 

 

User Workflow
Fohlio Client Approval


Designer User Flow
Fohlio Client Approval
Fohlio Client Approval


Client User Flow
Fohlio Client Approval
Design Proposal 1
Fohlio Client Approval

A separate page  for approval workflow where clients can make comments and approve items.

Pros: All information and functions are clearly presented in different sectors.

Cons: less consistent with other parts of Fohlio. Require much more engineering resources.

Design Proposal 2
Fohlio Client Approval

An add-on feature that helps clients approve items and notify designers.

Pros: require a few engineering resources. More consistent with Fohlio itself. 

Cons: the list is overwhelming and less scannable.

 

Design Decision

After testing with users and communicating with product manager and engineer, we decide to make it an add-on feature that is incorporated into the current web app.

Fohlio Client Approval
Designer End
How a designer share a project with clients
  1. select which project to share
  2. set up designer’s logo
  3. select clients’ access
  4. sent a text invitation through email to the client



Client End
How a client approves items in different views
  1. select items
  2. click ‘Approve’
  3. status of items get changed
  4. click ‘Notify designer’ to send an email to the designer
Grid View

Grid View

Table View

Table View

Final Design

After some iteration on the prototype, I created the final design to cover every detail of the client approval process on both sides of designers and clients.

Fohlio Client Approval
Designer share the project with client

The designer goes to the sharing page and set up the logo, access and send a text invitation to the client’s email. When the client clicks the link, it will automatically generate a private account on the server without client registering manually. 



Client approves items

The link in the email takes the user directly to the grid view. By selecting items and click approve button, it will change the status of item, and the data will be changed on both sides of the designer and the client.

Fohlio Client Approval
Client Approve Items in Grid View

Client Approve Items in Grid View


Fohlio Client Approval
Client Approve Items in Table View

Client Approve Items in Table View


First-time user notification

When the client uses the approve feature for the first time, it will pop up a notification telling the user to click ‘Notify designer’ button on the navigation bar to send an email to the designer.

First-time User Notification

First-time User Notification


Client send a notification email to designer

When the client is done with the approval process, he/she click ‘notify designer’ button and confirm to send an email to the designer. The email includes information about the number of approved and disapproved items and the link to the project on the designer’s account.

Fohlio Client Approval

Load More