Context
It's easy to rent studio spaces, right?
I wanted to figure out what exactly worked and didn't work for this business. The studio had started back in 2021, and had large success since most major studios were closed down due to COVID. However, the owner is much busier now with nursing school, and the old ways of managing the business are not holding up. After chatting, I could see that Two Car Studio's rental process could be improved upon with my help. How might we streamline the studio rental process for the owner and customers?
To understand the studio's past, present, and future, I chatted a bit with the business owner.
What I wanted to know:
How are rentals currently managed?
What are the 3 most important things customers would need on the website?
What are the painpoints for the business?
Insights:
Rentals are currently managed using Instagram and Google Docs, but it requires a lot of time since the business is solo-owned.
3 important things for the site: booking, seeing the studio space, seeing past customers in the space.
Business pain points: managing deposits, clear communication of rules, keeping track of payments.
Project Management
Learning to lead.
Leadership tools that helped me:
Weekly meetings were every member is responsible for presenting what they worked on and are able to share what's happening in their lives.
Having daily check-ins where each member shares what they finished, are working on, and what they need to succeed.
Utilizing Notion and Discord to organize and see which tasks are being worked on.
When communicating with members, staying neutral in my tone of voice, while still holding clear work expectations.
Sometimes you need to step in and finish the work yourself (while still offering the other person the opportunity to contribute if they decide to).
Research
What do other studio websites look like?
I wanted to learn about dance studio websites, so I conducted a heuristic analysis with existing dance websites like Snowglobe, STEEZY, and OFFSTAGE.
What to include ✅
For our website, keeping a focus on studio rentals only
Calendar view of all rental timeslots
Simplifying the number of steps and pages on the website
What to avoid ❌
Visual clutter that can confuse the user
Poor information architecture. Too many choices at a time can deter users from completing the main action
Inconsistent typography and color
Personas
Dancers like Kate and Kyra struggle to find dance classes that best fit their needs
Defining the Structure
How can customers rent a space?
Based on what I gathered from chatting with the owner, I decided that the most important things to build were the booking flow and homepage/about pages.
From here I began thinking about how exactly users would get from the homepage to renting a space, as well as what tasks the admin would need to manage on the site.
Ideation
Building the interface.
We have to start somewhere.
.png)
I decided to keep the wireframes limited to the main flow of importance, the booking process, rather than build out all the user routes to save time.
What could the calendar look like?
I began thinking about how exactly I wanted to visually organize the rental calendar:
At this point in the project, I began to notice that our team wasn't communicating as much I had hoped. More than often, I felt lost in the dark as I had to reach out to members constantly to check up on what they were working on week by week. Members were not communicating their needs and schedule changes ahead of time, which led to a bad experience for everyone.
I ended up reaching out to my career mentor and PM friend to ask for advice on how to better manage the project and learned the following.
Ideation
Kicking it up to high fidelity.
As we built the high fidelity screens we went through many iterations (5 in total!)
Throughout the creation of the high fidelity screens, I spoke with the owner to get a better idea of how he wanted to visually represent the studio. Taking inspiration from the existing physical space, he wanted the website the represent the same ideas: a home, community, and simplicity.
The minimal look of the design allowed for us to explore various color palettes, typefaces, component styles, and layouts for screens. I would jump from section to section, some days revisiting previous screens and deciding that I wasn't a fan of what I had just made the day prior (sometimes even redoing the screen entirely).
First Test
How will users behave?
The first prototype of the website (Design Version 3) was ready to be tested by potential users. After setting up a Figma prototype, I gathered data and feedback from 5 participants.
Users were asked to perform the most important task for the business: reserving a studio time.
Main insights:
2 out of 5 participants felt that the purpose of the website was unclear on the landing page.
3 out of 5 participants mentioned liking the visual look of the app, while 2 felt that the branding/theme wasn't strong enough.
5 out of 5 participants found the task easy to complete, but 2 expressed concerns about booking smaller portions of available times.
We now had data-led feedback on our designs, and a clear direction to focus on CTA points, the calendar, and visual branding. It was time to make some changes.
Homepage design: Taking insights from critique and testing, I made changes to the homepage design. I reduced the color palette down to black and white, as well as increased the amount of negative space to better align with the business's minimal aesthetics.
Calendar view: I also changed the calendar screen and flow, breaking down the reservation into smaller steps for users to have more control of the booking process.
Iteration
Improving with components.
At this point I decided to reach out to another product designer (one of many that gave me feedback) to critique my work. She immediately recommended that I spend time learning how to create and implement components, which would help users better understand where to go on the website.
With the help of a quick YouTube lesson, I was able to add components and hover states that helped bring the prototype to the next level.
.gif)
Navbar with nested components. It was fun figuring out how to build these (like a puzzle!)
Hover states for buttons and more dropdown menus. I just scratched the surface with the capabilities of components. They definitely helped me design user flows and different UI states with more intention.
Second Test
What do users think of the changes?
The updated version of the website was ready to be tested again by potential users. After setting up another Figma prototype, I gathered data and feedback from 5 more participants.
Users were asked to perform the the same task: reserve a studio time.
Main insights:
5 out of 5 participants felt that the purpose of the website was clear on the landing page.
5 out of 5 participants mentioned liking the visual look of the app, enjoying it's simplicity.
5 out of 5 participants found the booking process easy to complete, with users booking both full and partial session times.
A participant pointed out that users should be able to view their upcoming bookings on the calendar.
Final Design
Reserve space at Two Car Studio with ease.
Studio Booking & Checkout.
.gif)
Conclusion
Final thoughts.
Although this project had it's ups and downs, I felt happy with most recent version I designed. Users were able to reserve studio spaces with ease, and both the business owner and users were happy with the visual look of the site. Almost every participant expressed that they would have an easy time booking a space with the website
Throughout this project, I realized how much skill and work is needed to manage a project from start to finish. Even though our team was small, it still required me to learn skills to improve as a project manager and as a lead UX designer. Overall, I believe that the site will help Two Car Studio have an easier business flow, one that allows customers to book with ease and removes most of the stress for the business owner.
Learnings:
- Communication is key.
- When it comes to any creative project, clear communication and expectations are needed before moving forward. Especially when working asynchronously between teams, people need to share what they are working on and what their needs are.
- Be supportive as a leader.
- When issues arose with team members, I learned to offer support to figure out what wasn't working for them. This ensures that nobody feels attacked when confronted.
- Be supportive, but don't wait around.
- Yes, leaders should be supportive throughout a project, but what if a team member continues to not communicate with the team? I learned that it's better to pick up their portion of the work (while still inviting them to contribute).
- Always keep in touch with developers.
- As a designer, we should always check in with developers to see if our designs are feasible.
- Establish Figma practices.
- This includes labeling practices, components, grouping, and work time expectations (both synchronous and asynchronous).
OTHER PROJECTS
.gif)
.gif)
.gif)
.png)
.png)
.gif)
.gif)
.gif)
.gif)
.gif)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)