Problem ❓
Spa and salon employees need help learning how to use Studio Desk.
Studio Desk is a module of a spa and salon management software that helps small businesses manage their day by facilitating walk-in appointment scheduling and management, payments, rebooking, etc. The onboarding experience is so confusing and frustrating for spa and salon employee users that the developers had to turn off the onboarding experience. But this leads to another problem: users feel lost when using Studio Desk for the first time and remain unaware of some features. How can we redesign the onboarding experience to actually be useful in helping employees get familiar with Studio Desk?
solution 💡
An animated onboarding experience that educates and engages
Immerse (Upon Entry)
Conversational, welcoming language to kickstart the product tour—the product interface itself is abstracted to focus on the content that matters
Conversational, welcoming language to kickstart the product tour—the product interface itself is abstracted to focus on the content that matters
Immerse (Upon Entry)
Introductory information is included in the form of an initial product tour
Introductory information is included in the form of an initial product tour
Immerse (Upon Entry)
Subtle priming for future interactions (i.e. switching between appointment tabs while rebooking) before the user even starts using Studio Desk
Subtle priming for future interactions (i.e. switching between appointment tabs while rebooking) before the user even starts using Studio Desk
Execute (First Interaction)
Quick, helpful tool tips that meet users where they're at as they navigate the product (Studio Desk)
Quick, helpful tool tips that meet users where they're at as they navigate the product (Studio Desk)
Enhance (10 Days Later)
Introduces advanced features (i.e. group checkout) many users don't know about and their complex interactions through animated tooltips once users have gotten familiar with the basics
Introduces advanced features (i.e. group checkout) many users don't know about and their complex interactions through animated tooltips once users have gotten familiar with the basics
research 🧐
Understanding the problem and our users
Getting a grasp on "onboarding" by looking at who else does it well and why in a comparative analysis
I needed a deeper understanding of "onboarding"—touchstones, purpose and who is doing it well and why. I did some desk research to familiarize myself in addition to identifying common patterns and elements in onboarding experiences and immersing myself in navigating the onboarding experiences of products I was and wasn't familiar with to analyze what worked and what didn't in addition to doing some background research around the concepts of "onboarding" and "learning."
.png)
Framing takeaways from desk research and comparative analysis as actionable ideas
Reframing my research takeaways into the form of potential user needs relevant to onboarding in a more general sense, I ideated elements of potential solutions that mapped directly to specific user needs/main research takeaways.
At this point, I realized that a majority of the components that make a good onboarding experience could be summarized into two key ideas: communicating a product's value and keeping the customer engaged. Reframing the problem, I kept these new ideas in mind as I began immersing myself in the product itself: Studio Desk.
How can we create an onboarding experience that communicates the value of Studio Desk and is engaging?
Understanding Studio Desk by hearing about pain points directly from users and analyzing user engagement metrics
I tried out Studio Desk myself to get familiar with it and identify potential pain points as a new user. But I can't speak for all users—I had to hear from the target audience. Based on qualitative customer feedback, I was able to summarize their pain points into three key takeaways.
1
The difference between being in “training mode” and “normal mode,” along with how to exit “training mode,” is unclear.
2
Forced entry into training mode upon first use caused confusion and frustration.
3
Numbers caused confusion and the amount of text at once was too much to process.
I didn't just want to know pain points—I wanted to know what customers used Studio Desk for. What was the value users get from Studio Desk? What's the value I was to communicate? I examined user engagement metrics about clicks and more from users currently using Studio Desk to identify the key actions:
1. Booking a walk-in appointment
2. Managing a guest visit
3. Completing checkout
1. Booking a walk-in appointment
2. Managing a guest visit
3. Completing checkout
Digging deeper into Studio Desk's purpose with user archetypes and user goals (in the form of Jobs To Be Done)
How is Studio Desk's value different among users? How is what is engaging different among users? This requires understanding Studio Desk's users and their goals and motivations in using Studio Desk. I began by identifying who (in the form of archetypes) among the spas and salons of a small business would use Studio Desk.
Conductor
Someone who is responsible for the daily flow of the business
Optimizer
Someone who is responsible for the efficiency and profitability of the business
I translated my previous findings about onboarding into a list of jobs to be done in the form of a list of tasks and the results of completing each task.
design goals 🎯
Setting my definition for success
Moving from research to ideation, I knew I wanted to make an onboarding experience that communicated value and was engaging. I wanted to define success in two ways: quantitatively (a significant increase in the number of people who complete the onboarding experience and a significant increase in the number of people who use advanced features) and qualitatively (users saying they feel more confident and comfortable with using Studio Desk).
Another goal was making my process for creating an onboarding experience replicable. I wasn't just creating an onboarding experience—I was creating a framework for the design system so that creating onboarding experiences for other modules of the software in the future would be easier.
Another goal was making my process for creating an onboarding experience replicable. I wasn't just creating an onboarding experience—I was creating a framework for the design system so that creating onboarding experiences for other modules of the software in the future would be easier.
concept development ✍️
Putting the pieces together
Journey mapping to break up the experience into focused, purposeful phases
I created a user journey map of the experience, considering the idea of progressive onboarding through phases (first-time experience and learning that comes later on) to ensure users aren't overloaded and stay engaged. The actions in the mapping consist of the "ideal" actions I imagine the users would take to make the most out of the experience (and to complete the tasks I identified in the jobs to be done model).
.png)
Considering pain points in each stage helped me identify possible opportunities to improve the onboarding experience, which was useful going forward into ideation.
Brainstorming many ideas to explore possible directions
I considered "training" users vs. giving users a form of "practice." I wanted to find a good balance of direct teaching and exploration since exploration and discovery is often what keeps users engaged and learning better.
1
I explored the idea of gamification through tasks or missions but considered it to be not too practical and too time-consuming—the users want to start using the software quickly.
2
I considered using a sort of character to guide the user through different steps, but I realized a character would have a lot of ties to branding which I didn't have the freedom to experiment with.
3
I considered the importance of teaching through a user's first-time experience because that's where the product's value can be introduced and used to keep the user using the product.
Ultimately, I realized it was most important for me to meet people where they are—to teach them what they need to know only when they need to know it. I looked at this project through the lens of experience design, mapping out when users would want to know different pieces of information (with a strong focus on the first-time experience) through different phases, and brainstormed possible ways to delight and engage: easy-access skips/exits, animations, conversational and encouraging language, etc.
Finding opportunities in context to meet users where they are
I identified opportunities to give users information so that I could teach users what they needed to know when they needed to know it.
Initial sketches that organize information based on priority for the user
I prioritized different pieces of information in terms of importance to the user to organize the information to be taught into different phases (what needs to be learned during the first-time experience vs. more advanced features that can be learned later).
In sketching out my ideas, I abstracted the background and limited functionality in Phase 1 to ensure there isn't an information overload. I also tried to chunk information so there wasn't much being taught at once to help users retain information.
In sketching out my ideas, I abstracted the background and limited functionality in Phase 1 to ensure there isn't an information overload. I also tried to chunk information so there wasn't much being taught at once to help users retain information.
Iterating with a more specific goal in mind by recategorizing information based on feedback
At this point, I wanted to focus this entire project on onboarding users to Studio Desk alone rather than introducing other aspects of the product in Phase 3 since the other modules were being revised. I dove deeper into the details of Studio Desk as I recategorized information to find the phase that fit each piece of information best (aka the phase in which the user would benefit most from learning it) after a feedback session with other designers.
🤔
reflection 1/3
Information architecture: set the tone early
Working on a project for a real company with limitations made my design process feel a lot messier/less linear. I constantly got feedback and learned new things about the product that made me constantly reorganize information and change the direction of my project. I was making the same model in different ways as information changed. While I do think it's important to remodel data and update based on changes throughout the process, I think I could've benefitted from having a clearer model and information architecture earlier in the process to iterate on later. I hope to do that in future projects.
motion design 💨
Purposeful animation at each phase to support interactions
Early on in the project, I decided that using animation would delight and engage users, making it likelier that users don't skip important information. I wanted to ensure I used effective motion, so I thought about the purposes of each phases as I considered where motion might be most effective.
1
Since the Phase 1 guided the user through the main steps, I saw an opportunity to use subtle priming to interactions to make users familiar with interactions within the software.
2
Since Phase 2 occurs when the user is already using the software and is focused on the user's own actions, I felt that motion wasn't necessary — it would distract the user from their own exploration and agency. I wanted to keep the information in this phase as slight nudges that guided the users.
3
Phase 3 consists of complex features and information that aren't necessary to use the software but can be helpful. Since these interactions are complex, I felt users could benefit from seeing how these complex interactions work through motion.
I identified key features of these animations so that I could put them in the framework for future onboarding experiences to make it more replicable.
1. They should be short. Users might quickly skip otherwise.
2. They should have a good level of abstraction. Users do't want too much information — that would overload them; however, too little information will leave them confused.
3. Animations are useful for demonstrating complex interactions that aren't obvious.
1. They should be short. Users might quickly skip otherwise.
2. They should have a good level of abstraction. Users do't want too much information — that would overload them; however, too little information will leave them confused.
3. Animations are useful for demonstrating complex interactions that aren't obvious.
🤔
reflection 2/3
Animations: small is big
Through my own practice of iterating through possible animations, I learned a lot about designing motion, especially about the details of micro-animations. The smallest changes could have a large effect, and experimenting helped me think about timing and how keeping things less even (using principles like slowing down and speeding up) could bring life to the motion. Animations (and tooltips) were fairly new to the design team I was working with, so being able to spearhead something new for a team made me feel like I was doing something valuable. Some of my work was codified into the design system which made me feel like I had a lasting impact as well.
Design Decisions ⚖️
Design decisions based on user needs and impact-effort prioritization
Justifying decisions with user needs and pain points
Users need information
Tooltips over hotspots because hotspots were too exploratory and could leave information to never be discovered.
Users want control
A clear skip button with every step gives users power, along with the ability to take the initial tour later on when the user chooses.
Users may already know the software
The user can skip the tour at any point, which accounts for experienced users.
Users get bored easily
Animations were used in Phase 1 (the Immerse phase) because users are tapping through information which can be boring.
Users don't have a lot of time
The users are able to "tap-tap-tap" through the steps so that the it doesn't feel too time-consuming.
Users feel "locked" in tours
Progress indicators were included so that users know how much is left in the tour.
🤔
reflection 3/3
A balance game: the user's power vs. telling the user what to do
I found designing an onboarding experience to be really applicable beyond this project—I was essentially exploring how to design "teaching" and "learning" which is transferable to a lot of other projects. I found balancing exploration vs. telling to be an interesting challenge, and this project really made me consider how to balance giving the user agency (or the illusion of power) vs. guiding the user through my design choices.
ux writing 🖊️
Deciding the language
Since I wanted to ensure that users didn't feel like they were "being taught" but rather that they were taking control of their own learning, language played an important role. Instead of using confirmation buttons that just said "Next," I used conversational language such as "What's next?" and "Awesome" to keep the user engaged.
I played around with different words, trying to find text that was concise but said everything that needed to be said. I broke up text that was long into chunks. For example, I broke up Step 2 into two parts: "Tap to check-in guests as they arrive..." and "...or drag and drop guests into the lobby."
final design 🔥
How it all came together
impact 💥
Evaluating the impact of my work on my users and the company
Evaluating the impact of the onboarding experience on users through feedback modals and quantitative measures of success
I knew it was important to test the effectiveness of the tour on users in order to iterate. I designed a reminder to complete the tour for those who don't finish it immediately and as a way to get feedback on Studio Desk at different time intervals (5 days and 2 weeks). By comparing the feedback of those who completed the tour and who didn't (and seeing the metrics of how many people completing what steps of the tour), we can identify what parts of the tour are effective and which are not. A major piece of critique I got was that giving feedback can be annoying and time-consuming for users, so I tried to make the process as "tap-tap-tap" as possible for the users to ensure it was easy and fast.
In line with the measures of success I identified with my design goals, I proposed evaluating success through the following metrics (though my design wasn't shipped during my internship so I couldn't see the actual numbers):
%
increase in the number of people who complete the onboarding experience to understand the overall usefulness of the design
%
increase in the number of people who use advanced features to understand how many users know about advanced features and the effectiveness and timing of the tooltips
%
of users skipping at each step to understand when users are no longer engaged
Presenting at the design speaker series to the rest of the company and establishing a framework for future onboarding design
I had the opportunity to present my work on the Studio Desk onboarding experience to the rest of the company, along with a framework on how to design for onboarding in the future: I broke up the onboarding experience into broad phases, focused on the idea of finding opportunities (to teach) in context of the user, and introduced the idea of animations that are abstracted, short and useful for demonstrating complex interactions. A lot of my work around tooltips and onboarding also got codified into the design system. It was really cool to see my contribution preserved in the design system and talk through my ideas with people from all over the company.
