How might we increase conversion on new user signup?
Stache.com Onboarding Overhaul
Summary
Stache is a community based two-sided online marketplace that connects people needing storage with people who have extra space. Hosts rent out space in their home and renters pay a monthly storage fee. Stache’s revenue comes from rental fees so they need a large supply of host listings to get more renters. Stache needed us to design a solution that would increase new user signup. We developed a prototype that reduced user pain points and led to a higher number of users confidently completing the signup process.
This project was a pro bono redesign of Stache’s onboarding flow and landing page.
My Role
Prototype Lead, Figma
Competitive Analysis
User Journey Map
Rollout Strategy
Build Landing Page
Project Type
Client
3-Week Sprint
November 2020
Team of 3 UX Designers
Final design of onboarding welcome screen - click to enlarge
The Challenge
Stache’s ads brought prospective hosts to their site; unfortunately, conversion was very low, and they were not acquiring the number of hosts needed for the business to succeed. Stache did not track the analytics to show us where hosts were dropping out of the flow. The only thing we knew was the bounce rate from the landing page was high, and that there was another significant drop somewhere during the onboarding process. Our solution needed to reduce the friction and pains that were causing so many users to leave.
User Persona (designed by Cielo Lachica)
We discovered these major user pain points:
Unclear wording led to user errors
Users didn’t know what Stache was, how it worked, or if their information would be secure
At the end of the signup process users didn’t know that their listing had been published, or what to do next
Crucial interface elements were missing or improperly implemented
No information was provided to users to help guide them through the process
Solution
Our solution:
Reword landing page and onboarding text to inform users what Stache is and instruct them how to use it
Include tip boxes to resolve user frustrations and answer common questions
Implement UI elements to give users freedom, control, and prevent errors
The outcome:
A higher number of users confidently completed the signup process and published quality listings
A decrease in user confusion and errors
Design
Figma - Sketches - High fidelity clickable prototypes - Design studio
The final prototype went through 5 rounds of iterations and was tested with 12 users.
Major layout changes
Click images to enlarge
Listing Preview
The old design didn’t allow users to preview their listing before it went live, making them less likely to share their listing or even publish it in the first place. Adding the listing preview page let users know the status of their listing, getting rid of confusion at this part of the signup process.
We changed the submit button from “CREATE A SPACE” to “PUBLISH MY LISTING” which clarified for users that their listing would go live when they clicked it.
Final “Listing Preview” page design
Listing Confirmation
With the old design there was no confirmation that a users’s listing was live, and there were no directions for them on what to do next. This page was implemented at the end of the flow and solved user confustion.
Another new feature was the Stache Superhost menu, which used gamification elements to:
encourage hosts to complete their profile, making them more likely to get renters
make their next steps clear without them having to go through every page of the dashboard
Text and visuals to clarify Stache’s business model
The original host landing page focused heavily on the long term benefits of being a Stache host. It had graphics of a car, a house, and a palm tree to show what you would be able to afford with all of the money you were going to make, but users were confused by the images and accompanying text and didn’t even know what Stache was or how it worked at that point.
Final Prototype
Research + Insights
Heuristic evaluation - Task analysis - Competitive analysis - Stakeholder interview - Contextual inquiry
Stache was asking too much from the user
Mapping out the path a user must take to complete the signup process clarified the areas needing work. Purple diamonds represent decision points and red ovals represent where a user could fail to complete the process
Users need help getting measurements
Users need help writing a good description
Suggested pricing needs to match the advertisement that brought them to the signup process
by Keeley White
Tested mid fidelity prototype
Competitive Analysis
I evaluated the onboarding processes of industry leaders with similar business models, and implemented and tested the features that best correlated to our users’ needs.
Help box
Back button
Listing preview
Overall tone of UX writing
Format of layout
This journey map helped get design buy-in from the CEO and engineering
Reflections
Next Steps
Continue redesign to host dashboard. Every host we interviewed felt confused and lost when they ended up here after signing up.
Design and test mobile web screens to make signup easier for users signing up on their smartphones.
Evaluate and enhance accessibility of Stache.com.
What would I do differently?
Scope creep was an issue for us. The more testing and research we performed, the more things we found that needed improvement. I would be more clear at the outset about the “minimum viable product” and help keep the team from adding things along the way.
There were a few instances where the information we requested from the client was delayed in getting to us or didn’t exist at all. I would have moved forward with our assumptions and tested them in a way that was not dependent on the data.
What went well?
The team dynamic was wonderful. Each of us had different areas of strength which allowed us to support each other throughout the many speed bumps we encountered.
The handover of deliverables was smooth. Our client was very happy and excited to start the redesign!
All of the testing we did on our final prototype showed that our designs reduced confusion and improved the overall experience.
Key Takeaways
The importance of wording clarity and how it impacts the usability of a product and the importance of testing to determine if it translates well to users.
About a million things are going to go differently than planned, and you have to be able to constantly adapt and change your plans.
Communication between stakeholders has a big effect on the efficiency and success of a project.
The research and designs we handed over to Stache were tremendously valuable to them. Particularly the research which helped their lead designer get buy-in from the engineering team. They are currently redesigning their landing page and host onboarding using our designs.
Additional materials
Click links to view Google docs