Discover & Book Music Studios
How I helped the startup to improve the user journey, designing booking systems and metrics dashboards where users can list their studio, connect with musicians worldwide, manage bookings and control availability.
Overview
With Studoyo, users can list their studio, connect with musicians worldwide, manage bookings, and control availability. This is a shipped product; follow up here.
The project aimed to create a user-friendly, intuitive platform for musicians looking to book studio space and owners wanting to manage bookings.
The design included six main components: the sign-in page, search studios, the booking studio main page, the booking reservation, and the studio owner area.
The client already had previous rough sketches and color schemes and wanted to complete the experience using those for easier development.
Stakeholders
Client - Acting as Product Manager
Frontend Developer
Tools
Miro
Adobe XD
Maze
The challenges
Create an attractive and user-friendly interface for musicians seeking to book studio space.
Streamline the booking process to reduce friction and improve user experience.
Provide an efficient, comprehensive area for studio owners to visualize all bookings and manage availability.
My Impact
Improved user journey and provided structure of the experience
Completed all flows for the different user types, identifying potential gaps and fixing them
Enhanced UI and consistency across all different user profiles and actions
The users
Working with the client, we identified the main user personas:
The music studio owners: Those who list their studio for rent can list one or multiple.
The musicians: looking for a studio to practice or record music.
Previous planning
After creating the personas and identifying their pain points, I made a task flow to help me understand the actions of the two user persona types.
I also considered the importance of having multiple moments to log in, as at the beginning of the experience, mainly for the consumers (musicians looking to rent a studio), it is not necessary to log in while browsing and searching.
Defining the user story and requirements: As a studio owner, I need to list my studios, control the number of bookings, pricing, and times, and have accurate metrics to make decisions related to my studio. As a musician, I must search for a studio, filter, find my closest location, visualize my bookings and personal information, and add additional services. As a musician, I also want to list my studio if I have one.
Must-Have: Sign in for two-step verification and mail verification.Search: Studio type, date, time, instruments, rating. Bookings: price per hour Photos, videos, availability calendar, about the studioMusician profile: my bookings, wish list, profile, payments, transactions, list your studio. Studio owner profile: studios listed, earnings, bookings, settings.
Should Have: Sign in: sign with Social.Search: mapBookings: additional extras (audio engineer session, etc)
Since the client already had some wireframes, logos, and color schemes, I stuck to them for easier development and worked to provide a user experience that made sense.
Login and profiling
I considered a simplified sign-in process that requires only essential information for login. A profiling screen helps the platform detect user types for future improvements in user profiling. Social media and email login options were implemented for convenience. I ensured clear and concise error messages for incorrect login attempts, as well as the two-step security verification and email verification, considering the case of the studio owner and musician.
Designing the client-facing area
I focused on the main points of the experience, such as
Search filters for location, date, time, and studio equipment.
Studio overview: detailed studio profiles with photos, descriptions, and pricing.
Reservation & availability: I designed an intuitive booking calendar with availability indicators.
After the user has booked a studio, he can visualize its bookings, liked studios, personal information, payment settings, and transactions.
The user can quickly log in or list a studio from the menu at the top of the screen.
Incorporating easy-to-understand data visualizations into a user interface provides clarity, improves efficiency, and engages users, resulting in better decision-making.
Designing the studio owner's area
The main problem when organizing the interface for the studio owners was to bring all the most critical information in a digestible way. I created a straightforward dashboard where the studio owners could track their bookings, earnings, and business potential in just one view and navigate through the studio owner area for more detailed information.
I implemented a calendar view for the bookings area that displays all bookings and allows easy editing. This is a test of using already proven UX patterns that work for this specific purpose.
I also added features for setting studio availability and pricing, considering that the studio owner could have not only one but many studios, making a scalable solution for implementation.
Summary
My contribution helped the startup improve the user journey, adding essential elements to the experience from designing booking systems and metrics dashboards focused on the studio owner to crafting a complete user experience of the musician profile, search, and bookings management.
This was a very UI-oriented project; the client wanted to develop it using ready-to-use templates and had a previous color palette to follow up, so creating a style guide was unnecessary.
I used many UX patterns already proven effective for this interface type, trying not to reinvent the wheel and adding value to the experience and the development efforts.
The design’s success is evident in the positive feedback from the client.
