Onboarding Setup guide Redesign
WePay | Chase Merchant Center | Web tools
I am currently working as a Senior Product Designer at WePay. It’s a startup that was acquired by Chase in 2017 and right now supporting Chase on their integrated payment solution service, which helps small-medium business merchants to process credit card transactions over $50B a year. In this project, I redesigned the onboarding setup guide for the Chase Merchant Center.
Project duration: 4 weeks
Team: PM, Engineering team
My roles : user interviews, stakeholder alignment, UIUX design, prototyping, user testing and engineering hand off
Design Process
This was my self-initiated project. During the design process, I worked closely with my product team and align with my team members at different stages.
. . .
(Context)
Background
After merchants open merchant accounts with Chase, they need to finish a set of Setup Guide tasks in order to start processing payments and withdrawing earnings. In the past, there were only four tasks to complete the setup. But as our product grew overtime, we made the onboarding process more thorough, which required users to complete more tasks.
Previous design:
problem
Users started to feel overwhelmed as the Setup Guide was getting longer.
We were seeing prolonged onboarding time and the decrease of onboarding success rate, which was concerning and became a business objective we were aiming to drive. Therefore, refining the setup guide naturally became a part of onboarding enhancement initiatives when I proposed it.
…
(Discovery)
Research
Uncovered needs by conducting interviews for users and product stakeholders.
At first, I wanted to ask for usage data to help me inspect over user behavior and identify refinement opportunities from the previous onboarding experience. But I was told that we were not able to capture usage data because we didn’t get permission from Chase. Therefore, with limited user data support and as a workaround, I started with user interviews and design evaluation to examine the previous design.
I first started on the users aspect:
Next, I talked to the product team understand the story on the product side. I needed to understand the product context in order to be the bridge between product and end-users and deliver better design for users.
Product Needs(可删掉放到后面说):
A new design that is adaptable for holding more tasks that meet the future requirements while the dashboard metrics can still be appeared at front on home page;
The solution should be easy to maintain to help on development efficiency.
Product Issues:
We might want to add more tasks in the future. The old design was not sustainable and scalable;
Adding more tasks introduced more complex interrelationship among the tasks which the old design wasn’t suitable for.
Dashboard metrics got pushed down at the page fold because of the lengthy setup guide, which caused discoverability issues.
…
(Define)
Design Question
Given the growing task contents, how might we refine the experience so users can be assured and feel at ease?
User Needs:
Information is displayed in a digestible way;
Enough guidance is provided to help users easily on track of onboarding process;
Reminder of incomplete tasks and motivation of keeping making progress on setup guide.
Besides enhancing the setup guide experience for users, I still had other things to consider around delivering a scalable solution that would last long and help on development efficiency in the fast growing product environment. Those were also something in my mind that I wanted to tackle on.
Deep Dive
At this time, I had two main tasks: 1. look for a scaleable entry points for setup guide so that the new solution can last long even when hosting more tasks in the future; 2. clear up and understand task dynamic;
1: look for scaleable entry points
I studied the existing flow and looked for design patterns that transit smoothly with the existing flow. At first I was trying to utilize existing patterns for low-hanging fruit solutions but they were not ideal. In the end, I decided to invest on a new design pattern which I was able to convince the engineering team and get their fully support by showing the benefits of this pattern and potential ways of reusing it for future projects.
2: Understand tasks dynamic
During discovery phase with product stakeholders, I found out that the task dynamics was actually quite complex. Some tasks are only available after the prerequisite tasks are done. And that’s why some task CTAs were disable in the previous design and confused our users. In addition, there ARE preferences in terms of task priorities that WePay would want certain tasks to get completed first. However, all these weren’t communicated or strategically arranged in the past. Therefore, I mapped out task prerequisites and task availability to articulate their relationships and priorities. This helped both the product team and me to align on the product logic and task arrangements.
Even though the task relationships in the latest setup guide only includes independent tasks and tasks with pre-requisites, I was also considering other possible task relationships and explore design concepts to cover the future use cases such as optional tasks, tasks in sequence, etc. That way when we are bringing more tasks to the setup guide which might introduce other interrelationships in the future, the design can still be adaptable.
Challenge
Shorten average onboarding time was one of WePay’s business goals.
Besides fixing the usability and the scalability issues, I also wanted to bring in more design value to this project and therefore I was looking for design treatments that can motivate users to keep making progress on the set up guide. As the end product, I decided to utilize the approach where I labeled the goals users will be achieving by completing the tasks. And because the goal is something that users care, it will naturally bring in more attentions and motivations to users.
During brainstorming section, I also had other ideas around creating reminders, support resources, tutorial materials and promotion campaigns— which need additional resources and effort to build. At the current stage, I was looking for a low cost design treatment or strategy to motivate users. Therefore, the goal-driven approach will be launched first.
Deliverable
Standardize components can be reused during product cycle and increase development efficiency.
Impact
And because this is an ongoing progress, I don’t have end result data to share. As a wrap up, this was one of the first designer self-initiated projects at WePay. In the past, the team was used to get assigned projects and told what to build from leadership. This project appeared as an opportunity to allow designers to demonstrate our value and built better collaboration relationships in the product team by showing our design thinking and engaging stakeholders during different parts of the design process.
Thank you for reading!
please reach out to me if you are interested in learning more design process :)