problem
Users for a new SaaS company are having a difficult time onboarding to the service.
solution
Design a sign up experience that encourages users to continue the onboarding process.
research
I started by conducting a competitive analysis of current SaaS products on the market and completing their onboarding process.
- Box
Pros:
Contrasting colors on pricing
Progress indicator on wizard
Plan comparison table
Cons:
5 steps to sign up - Dropbox
Pros:
Easy to read comparison table
Highlighted popular plan
One page checkout
Cons:
No summary of plan differences - Slack
Pros:
Plan summaries/features
What's a ____ feature
Progress indicator wizard
Cons:
No contrasting colors
to highlight plans
I continued my research by interviewing 5 ideal users and creating a user persona.
The part of the user interviews that stuck out to me were the following points:
1. They enjoyed knowing where they were in the sign up process2. They disliked completing more than 3 steps
3. They wanted the ability to compare their options thoroughly
user flow (ideal)
I distilled the information from my interviews and my competitor analysis and created a sample user flow for my application.

design
The next step I took was to start to implement some of the information I had gathered through my primary and secondary research. I mapped out the user flows for the sign up process to understand the necessary pages and to ensure that the process is not cumbersome for users.

testing
After sketching out some general ideas of the solution, I wanted to A/B test a few options to ensure that I had the most effective option in my final design.




branding
When I had the wireframes of the site composed, I wanted to design a brand identity to encapsulate the purpose of the application and help keep the elements consistent. I pulled inspiration from different cloud applications and bright, colorful illustrations. I created a logo that would be easily recognizable and scalable as well. I wanted to pick a color that would be corporate and trustworthy, and landed on a mint green.

Final
