Tidying up.

STEP-IN APP

Step-in — July 2022
Role
UX/UI Designer
Tools
Figma, Marvel, Pen and Paper
Timeline
July 2022 - Oct 2022
Project Type
Self-initiated Project
Overview
This project allowed me to connect my design skills to another passion of mine: dance.

I led the design of a mobile platform for dancers to discover and enroll in dance classes, regardless of previous levels of experience. I worked under the guidance of my bootcamp mentor.

This was an end-to-end project including: research, user flows, and prototyping.
Overview
❌ The Challenge
How can we simplify the dance class booking process?
✅ The Solution
Develop a class booking app that helps users easily discover classes and facilitates seamless booking.
Results
100%
100%
task completion rate (previously 60%)


100%
of users wanted to see the concept fully developed

Background
It's easy to find a dance class, right?
Being a trained dancer of 10+ years myself, I have experienced some of the shortcomings with the dance class experience.

While studying dance at UCLA, I spent most of my days in street dance (hip-hop, house, etc) classes both on and off campus. However, there was a problem ... I almost always heard about these classes through word of mouth.

I began to wonder how people with no dance experience or connections would find out about classes. After talking to a few friends and looking online, it was clear that there was no reliable solution to this issue.
Research
What do people use to find dance classes?
I wanted to learn about existing products, so I conducted a heuristic analysis with existing class booking apps like Mindbody, STEEZY, and ClassPass.
Competitive analysis.
What to include ✅
  • For our app, keeping a focus on dance classes only.
  • Information related to classes and instructors.
  • Using onboarding to personalize the experience immediately.
What to avoid ❌
  • Visual clutter (led to slow load times).
  • Poor information architecture. Too many choices at a time can be confusing.
  • Inconsistent typography and color.
  • Too many steps in checkout processes.
Interviews
What struggles do actual dancers face?
To understand the struggles with dance classes, I conducted interviews with 5 current/former dancers aged 19-50 years old. 

*I interviewed a total of 5 people with varying levels of dance experience. Of course, this is still not representative of all potential users, especially with differences between ages and skill-levels* .
Lots of interviews.
What I wanted to know:
🔍
How do people currently find dance classes?

What deciding factors are important to selecting a class? (price, style, time, etc)
👯
Why do people want to take dance classes?
😕
What are current pain points that discourage people from dancing?
"I know a lot of dancers like to do different classes to grow in different realms of dance right? And to kind of keep up that momentum and inspiration for their own dancing and their own style. But for me, I just kind of do it for funsies... Yeah, cause I just can't do it seriously."
What users said:
🔍
People use Google and social media, but they don't get search results they want.
📃
Factors that matter for classes: style, location, price, time, difficulty, and reviews.
💃
Some take classes to improve as dancer, while others like to take classes casually.
🚨
Things that prevent people from dancing: time, feelings of insecurity, and location.
Insights from research and interviews:
💃
People dance for fun. Beginner or professional, people want to feel joy.
🙋
Individual needs. People want to take classes that align with them. Things like location, time, and styles can make or break a person's experience.
😥
Pain points with search engines. Most people find out about classes through social media, as there isn't a centralized location to find the information.
🤝
Community. How can we create a product that is safe and inclusive?
Defining the Structure
How can students find a class?
Based on what I gathered from user interviews, I decided that the most important user routes were log-in and class enrollment. Users need to be able to personalize their class results and easily enroll in the class of their choice.

I wanted first time users to immediately go into the onboarding sequence, that way they were already in the process of curating their experience. After, they would be prompted to either create an account to save their preferences, or continue as a guest without the preferences saved.
Ideation
Building the interface.
As I sketched out screens, I wanted the experience to be minimalistic, both visually and in the number of steps from log-in to checkout. I limited each screen to about 1-2 actions to keep tasks as simple as possible.

After sketching out ideas for screens, I was able to quickly make a rough paper prototype that I could test out with participants. Through guerilla testing sessions, I was able to discover which aspects of the app to keep and what to reiterate.
A few of the main findings after guerilla testing:

Users confused by "signing in vs signing up", which I resolved by changing the wording and visual looks.

2 out of 5 users chose to skip the sign-in process.
🤔
There were concerns in regards to inputting payment info.
Wireframes.
While creating the screens, I focused in on the following: having clear CTA's, multiple sign-in paths, and implementing a search function.


To create a personalized experience, I made sure to include a detailed onboarding sequence that would use answers to suggest specific classes. However, to make sure that onboarding was concise, I moved some of the initial questions I created over to the search filtering system.


The search function utilized search filters so users could look for classes that fit their specific needs, whether that be things like time and price.
Visual Design
Step-in is inclusive, trustworthy, and fun.
Second Test
Testing the hi-fi prototype
After many iterations of the wireframes, I eventually brought the screens up to high fidelity. It was time to put the design into the hands of users.
Insights:

Credit card screen looked "like a fake website" compared to other screens.
🛠
Adjusted interaction points on the keyboard page (typing email and password) so that users won’t feel stuck on the screen.
😵
2 out of 5 participants stuck and confused by the keyboard screen during log in.
🤔
Participant pointed out that text positioning was a bit close to edges of images.
Interaction points within the prototype were very important, as they help direct the user through the enrollment process. The next iteration of the prototype should make better use of visually supported CTA's.
Final Design
A centralized app to discover and enroll in dance classes.
Onboarding.
  • I reduced the onboarding sequence length to lower the user drop rate by 80%.
  • Use of imagery to give a sense of what dances are.
  • Ability to skip onboarding and create an account later (when purchasing a class).

Class Enrollment

  • Whitespace so that images can effectively highlight what a class entails.
  • Ability to see how many people follow a category or if friends are attending a class they are looking at.
  • Users can edit their order on the summary screen instead of having to backtrack
Class Enrollment.
  • Whitespace so that images can effectively highlight what a class entails.
  • Ability to see how many people follow a category or if friends are attending a class they are looking at.
  • Users can edit their order on the summary screen instead of having to backtrack.
Search.
  • Filter system to refine search results based on user preferences.
  • Location entry placed at the top of page as most people wanted classes close to them.
  • "See all" buttons so users can view more results for specific sections (classes, teachers, etc).
Conclusion
Final thoughts.
Although there's always room for improvement, I felt happy with the state of the app. Users were able to complete tasks with ease, finding classes they enjoy and most importantly, enrolling in them. Almost every participant expressed that they would use the app to discover classes.

Throughout this project, I discovered how much work is needed to complete a fully functional (and usable) app. I had created only included primary user routes, while full projects cover multiple routes. Overall, I see a great opportunity to provide that service that many dancers are looking for, one that helps make class enrollment more centered on individual needs and interests. 
If more time was available...
Learnings.
OTHER PROJECTS

Let's connect 👋