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
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.
Old Design Analysis
Navigation Flow
The information architecture is too complicated for users to find login methods other than using the phone number.
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
Ｗe 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
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
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
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
Partner's Customer Login
Sign Up
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.
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.
Desktop Web - Partial View I
Desktop Web - Partial View II
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 Web
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.
Desktop Web
Mobile Web