Project: Serenade Mobile App
Role: Lead UX Designer
Project Overview
The Product: Serenade is an app designed to simplify the process of booking musicians for wedding events at City Winery. Serenade provides a solution by offering a centralized platform where clients can easily browse and book talented musicians for their events.
Duration: January 2023
.png)
My Role: Designer designing the apps booking process.
.png)
The Problem: Clients who lead busy lives or event planners who are always on the go require a simpler and more streamlined approach to book a musician for their events, without any unnecessary inconvenience.
.png)
The Goal: Design an app for City Winery that allows users to book a musician for their wedding, easily, securely, and efficiently.
.png)
Responsibilities: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and integrating on designs.
Challenges
1) Create an interface that allows easy and efficient booking process.
2) Incorporate a way for the user to access as much info on a musician on one page without text overwhelm.
3) Construct a tool that allows users to filter their search.
Understanding the user
-
User research
-
Personas
-
Problem statements
-
User journey maps
User Research Summary
I conducted interviews and created empathy maps to understand the user’s I’m designing for and their needs. A primary user group identified through research was working adults from various backgrounds who are responsible for the majority of their wedding planning.
The user group confirmed the initial assumptions about Serenade’s potential users, but research also revealed that accessibility to the user’s specific wants and needs makes reaching their goal very difficult. Other user problems included, poor scheduling software within booking apps and difficult booking processes.
Pain Points
1
Scheduling
The calendars not syncing up to musicians availability, causing scheduling issues.
2
Variety
Should be broader selection to fit people from many different backgrounds, races, cultures, etc.
3
IA
Text heavy screens can be overwhelming and time consuming to get through.
4
Financial
Price or rates should be displayed earlier in the process to save user some time of looking into a musician who is out of their budget.
Meet the Users
PRIMARY
Name: Elliot
Age: 31
Family: Engaged, no children
Occupation: Culinary Chef
SECONDARY
Name: Leah
Age: 53
Family: Single
Occupation: Wedding/Event Planner
Elliot and his fiancé, Ben, are getting married in late 2023. They found the perfect venue and are now on the hunt for a musician to perform on their special day. It is crucial that the musician is an LGBTQ+ ally, has credibility, and is, of course, available on their wedding date. Elliot values clear and prompt communication with the musician and wants an app that allows him to communicate directly with the musician to discuss any specific needs or requests.
Leah is a well established wedding planner in her area specializing in weddings and events. She is extremely busy and often has multiple events to plan at once. She needs a booking app that's easy to use and saves her time. Leah also values reliability and professionalism in musicians. She needs to be able to trust that the musicians she books will show up on time and perform well.
User Journey Map
Starting the design
-
Paper wireframes
-
Digital wireframes
-
Low-fidelity prototype
-
Usability studies
Paper Wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to the digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized an overview of the apps features with easy navigation elements.
Digital Wireframes
HIghlighting top talent for users to check out first.
Easy navigation menu for efficient way to explore app.
Section to browse talent immediately.
.png)
Image and key criteria on musician that user will potentially book.
List of similar artists that meet users criteria to have easy access making browsing easy and quick.
Lo-fi Prototype
The low-fidelity prototype connected the primary user flow of browsing talent options and the booking process, so the prototype could be used in a usability study with users.
View the Serenade App
Usability Study Findings
1. Users want specific categories
2. Users want an efficient booking process
3. Users want variety in filter options
Round 1 findings
1. Users want more obvious CTA button designs
2. Users want animated notification of task completion
3. Users want clear navigational tools
Round 2 findings
.png)
Refining the design
-
Mockups
-
High-fidelity prototype
-
Accessibility
Mockups
Early designs allowed for some customization, but after the usability studies, I continued to use a very similar layout according to the users input on wanting a minimal homepage design for easy navigation. I also my the main CTA button on the homepage standout with large scaling.
Before usability study
After usability study
.png)
.png)
Mockups cont.
The second usability study revealed some difficulty with page layouts and design. I adjusted the scaling of buttons and imagery to improve the user experience once they enter the app.
Before usability study 2
After usability study 2
.png)
.png)
Hi-fi Prototype
The final high-fidelity prototype presented cleaner user flows for the booking process and interacting with a musicians profile. It also met user needs for clear navigation through the app.
View the Serenade App
Takeaways
-
Impact
-
What I learned
.png)
Impact:
The app makes users feel like Serenade is aware of wedding planning and making sure it’s as easy and secure as possible in a process with many moving parts.
A quote from peer feedback:
“If the entirety of wedding planning was this easy, I don’t think there’d be a show called ‘Bridezillas’”.
.png)
What I learned:
While designing the Serenade app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.
Check out the responsive website for the Serenade app!
Thank you for taking the time to review my work! To see more, click here. Other ways to connect, check out my socials down below.