top of page
Anchor 2
Way Logo.png

Way.com

Web and App

 

Lead and design the omnichannel experience to support the needs of car owners.

Skills:

+ UI/UX Design

+ Wireframing

+ User flow

+ Product Management

Hero3.png

App Onboarding Experience Redesign

Project Background

THE PAIN POINTS

In the app, Way.com didn't allow users to land on the home screen without having an account, which blocked some potential customers who were hesitant to give out personal information at the very beginning of the user journey. Also, the onboarding design is outdated and having usability issues.

THE NEW BUSINESS NEED

At the time the company wanted to redesign the experience, we also started to work with a partner and would like to have the partner's logo somewhere during the onboarding process.

Research

STAKEHOLDER INTERVIEW

I interviewed stakeholders in our company to learn the business direction we wanted to pursue and the main issues we'd like to address in the new design.

  • Allow guest customers to view the content of the app and make purchases while still gather user information during the onboarding process if possible.

  • Have the partner's logo during the onboarding process while still having a seamless user experience.

COMPETITIVE LANDSCAPE

I also analyzed our competitors and other well-known brands' onboarding experience to gain inspirations and to learn what things should be avoided. 

spotHero_edited.jpg
uber.png
booking_edited.jpg
eventbrite_edited.jpg
pinterest_edited.jpg
getaround_edited.jpg
IMG_4599.PNG
IMG_4598.PNG
IMG_4184.PNG
IMG_4185.PNG
IMG_4189.PNG
IMG_4183.PNG

Old Design Analysis

Old.png
Navigation Flow

The information architecture is too complicated for users to find login methods other than using the phone number.

login _1.png
sign up_2_defualt.png
UI Design Problems

The font sizes were too small, and the font color was too light to read.

Buttons were too small and too close to each other, which would cause usability issues.

Design Goals

  • Provide simple navigation flow for the users to achieve their goals.

  • Minimize the steps before the users can land on the home screen.

  • Have friendly user experience which meets usability needs.

Design Iterations: Skip Button

FIRST VERSION
SkipLogin01.jpg

We wanted the new users to experience the app without creating an account. Since we still want to encourage users to sign up, I only added a small skip button to the existing design and tracked how many more users finish the onboarding process.

The results were encouraging but didn't reach our goal so I updated the design.

SECOND VERSION
SkipLogin02.jpg

For the second version, when the users landed on the login screen, there was no keyboard but a more visible skip button.

With this version, 10% more users land on our home screen compared to the existing product, which met the project goal.

The Compromise:

Although it requires one more click for the users to open the keyboard and login, this new design achieved the business goal. Also, new users can experience the app without going through the whole onboarding process which is a plus. 

Final Design

INFORMATION ARCHETECTURE
Old.png

Old

New.png

New

I reduced unnecessary layers of the information architecture and presented all the login options as early as possible so users don't need to navigate through the flow to find their preferred option.

USER FLOW
App Login Process for Users from Partner

Partner's Customer Flow

I created the entire user flow for the partner's customers, which also helps me think every scenario through the journey and facilitates communication with other team members such as engineers.

USER INTERFACE
w=375.png
Sixt Login_01.png

Partner's Customer Login

sign up.png

Sign Up

Login_01.png

Login

I made the login screen only one-third of the screen size so users can easily skip the login process. Meanwhile, the big "I'll do this later" button still exists which gives a clear indication that this step can be skipped.

Now all the login methods are presented at a glance and users can choose which way they prefer to login.

Cover.png

Other Projects at Way.com

Web Home Page Redesign

  • Led the project and directly communicated with the engineering team to ship the product

  • Conducted data analysis after launch to inform design change and improved the user experience

  • Designed the page from scratch as the sole designer on this project

The old home page was more like an introduction page of a company and was built a few years ago. In the new design, I focused on presenting the company as an e-commerce site where users can view the products Way.com provides right away. In terms of visual style, I provided richer content to give the site a vivid vibe.

HomePageComparison.png
Desktop_Home_Web copy.jpg

Desktop Web - Partial View I

Desktop_Home_Web copy 2.jpg

Desktop Web - Partial View II

MobileWeb_Home.jpg

Mobile Web - Partial View

Monthly Parking Payment Setting

  • Designed the web pages and app screens from scratch as the sole designer on this project

  • Collaborated with the product manager to deliver the product 

The challenge for this project was to display all information in an organized way so users could find the information they wanted at a glance while keeping our business goal in mind. I discussed with the product manager the information needed from the perspective of both the users and business needs.

In the end, I kept the minimum information the users needed and adding when the user started using our service to build sentimental value into our product. 

Desktop_Dashboard_MonthlyParkingAutoRene
Desktop_Dashboard_MonthlyParkingAutoRene
Desktop_Dashboard_MonthlyParkingAutoRene

Desktop Web

iPhone 8.6.png
iPhone 8.10.png

Mobile App

Parking Landing Page

  • Designed the web pages from scratch as the sole designer on this project

  • Collaborated with the marketing team to deliver the product

This is a marketing page for the new service: monthly parking. I worked with the marketing team to make sure the message is easy to understand and the SEO performance meets internal expectations.

MonthlyParkingStaticPage_PhotoBG Copy.pn

Desktop Web

Mobile_MonthlyParkingStaticPage 1.png

Mobile Web

bottom of page