CLIENT:
Dandy Paws
YEAR:
2021
SERVICES:
Research, branding, prototyping
timeline:
2 weeks
Dandy Paws is a Software as a Service (SaaS) app concept that helps pet owners maintain their pets’ health and happiness. Dandy Paws offers 3 different membership plans, including a basic free plan as well as two paid plans. This case-study focuses on the sign-up flow for the membership plan through the web application.
You are tasked with designing a signup experience, with a step to purchase one of three different plans, for a Software as a Service (SaaS) product that helps consumers do something. What exactly is that something? It’s up to you! Imagine your SaaS product currently having 1 million active users.
Design Challenge Prompt
A sign-up flow can make or break a SaaS product. The sign-up process is oftentimes the main barrier to entry for these products. If it isn’t streamlined and easy to navigate, the product could lose millions of potential conversions.
For this design challenge, I must create a concept for a SaaS product and develop its sign-up flow that causes the least amount of friction for potential users.
To begin this project, I researched the basics about SaaS products and found that:
Then, I moved on to researching what makes good UX design in sign-up flows.
The more steps and form fills, the more likely a user is going to be overwhelmed or confused by the process and either click off or complete it incorrectly.
Expedia, a travel firm, learned through SAS analytics that one simple form fill was costing the company over $12 million a year. Expedia had included a form fill labeled “Company” underneath “Name” during the purchase process, which confused customers. Customers would enter their bank name in the “Company” field, and then in “Address” they would list their bank’s address. This would invalidate their purchase, costing Expedia millions.
It is recommended to keep the amount of steps in the sign-up process limited to 4 steps or less. Additionally, the sign-up process should only request information that is absolutely necessary to complete the action. If the user can sign-in with a different website they might already have an account on, implement it.
The sign-up process should, at some point, define exactly what service the product is bringing to the consumer and why they should care. Why should the consumer make an account? Why should they pay money for the service? The process must convince users to go through the tiring process of entering their information.
It is recommended to include features like allowing the user to show or hide their password as they enter it, as well as let them know if it meets the system’s minimum requirements. By showing the requirements clearly before entry, users don’t have to guess or remake their password after entering it once before.
Form fills should follow a “waterfall” pattern, where every field is aligned the same going down the page. This way, it is harder for a user to accidentally skip a step. Users should not have to search for the next form fill to complete.
The area around the form fills should be kept as clear and distraction-free as possible to keep the user focused on completing their sign-up.
Next, I decided to take a deeper dive into the sign-up flows of two SaaS products that I am most familiar with: Spotify and Netflix.
Spotify’s sign-up flow highlights it’s value to the user on the homepage and then fast-tracks them to the app without giving them an option to pay for a premium plan. The sign-up process asks for identifying information, but no payment. Then, Spotify allows the user to listen to music for free, but features ads to persuade them to upgrade. The upgrade button is always at the top right of a free user’s screen. The flow doesn’t offer the premium plans when they sign-up because it expects the product to remind them to do it later on. My notes on Spotify are featured below.
Netflix’s sign-up process starts even sooner than Spotify’s; the user’s email is requested on the top of the homepage to start the sign-up process. Once the email is submitted, the user is taken to a plain background series of pages where they set up their password, learn about and choose a premium plan, and pay. Only once the user has paid will Netflix give them access to the app.
Netflix’s process is broken into multiple clear, succinct steps that made them easier to complete without fatigue. My notes on Netflix are featured below.
When trying to decide what SaaS would be good to make, I walked into the kitchen to (I am not kidding) find my cat, Bento, playing pat-a-cake with a wasp. This wasn’t a surprise to me (besides the fact that a wasp got inside?)
As you may be able to surmise, Bento is very familiar with the vet office. When I adopted him, he had eye problems and a heart murmur. Then constipation. Then ringworm. Then puffy cheeks. Then teeth that wouldn't fall out. Then eyeball scratches. Then dandruff. He is the unluckiest cat.
Bento has health insurance to take care of the veterinary costs, which is confusing to navigate and process claims through. He has medical records from different veterinarians from multiple states, and each veterinary office has a different method of sharing medical history.
So from Bento getting stung on the paw by a wasp, Dandy Paws was born.
Dandy Paws is a SaaS product that combines all of a pet owner’s needs into one easy-to-use application. This includes vet appointment and calendar management, health management, product recommendations, 24/7 online vet access, discounts on pet services, and social options like playdate matches and user forums.
Dandy Paws offers three different plans that each provide different features. The lowest level plan is free, and the highest one is $14.99/month. Dandy Paws proudly hosts over a million pet owners and partners with local shelters to give free Dandy Paws Gift Codes for new adopters.
I constructed Dandy Paw's branding with playful, bright colors and a bouncy, rounded logotype. I wanted the brand to feel as lively and exciting as our pets. I also included multiple photos of happy, healthy pets like dogs, cats, and rabbits.
I developed lo-fi wireframes for Dandy Paws’s sign-up process in Figma. I made sure to include the main points I listed in my research in the research section above. I wanted to focus on making the homepage highlight the value Dandy Paws provides. Once the user is convinced to sign-up, the process is easy, informative, and distraction-less.
The sign-up process only asks for what is absolutely necessary from the user at that time. Unlike Spotify, Dandy Paws allows the user to subscribe to a higher plan immediately in case they want to utilize all of the features advertised from day one.
At the end of the process, users are prompted to continue filling in information. Account details, pet profiles, and pet calendars are important parts to fill out as a new user, but forcing the user to do them immediately may overwhelm them. This option is shown in a skippable (and repeatable) pop-up directly on log-in.
I finalized and prototyped Dandy Paws’s sign-up process in Figma. I used vibrant, contrasting colors to bring attention to many of the call-to-actions featured across the site. I wanted the colors and imagery to be bright and fun but also guide the eye where it needs to go to complete the process. This resulted in a much simpler sign-up page than the homepage to limit distractions.
There are some structural differences between the lo-fi and hi-fi wireframes. These are mostly apparent in the homepage. I adjusted the layout of images in order to condense length of informative sections. I wanted to make sure users could get the information they needed with minimal scrolling while they read.
If I were to continue this project, I would run the prototypes through a user testing platform like Usertesting.com. From this, I can receive real feedback on how the average pet owner would navigate the sign up flow as well as what information they would like to see. I would use this information to update the product as needed to increase efficiency, accessibility, and ease of use.
