top of page
Serenade Case Study Banner.png

Project: Serenade responsive website

Role: Lead UX Designer

Project Overview


The Product: Serenade is a musician booking website for the up and coming wedding venue, City Winery. City Winery wanted a product that their clients could use to book talent for their wedding events in once centralized place. 


Duration: January - February 2023


My Role: Lead UX Designer. Designer designing the apps, Serenade, booking process.


The Goal: Design a desktop version of the sister app for City Winery that allows users to book a musician for their wedding, easily, securely, and efficiently.


Responsibilities: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and integrating on designs.  


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.


The Problem: Busy clients or event planners need an easier and more efficient way to book a musician without the hassle.

P1 - Profile Page – full.png

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



The calendars not syncing up to musicians availability, causing scheduling issues.



Should be broader selection to fit people from many different backgrounds, races, cultures, etc.



Text heavy screens can be overwhelming and time consuming to get through.



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



Name: Elliot

Age: 31

Family: Engaged, no children

Occupation: Culinary Chef



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.

Starting the design

  • Paper wireframes

  • Digital wireframes

  • Low-fidelity prototype

  • Usability studies

Paper Wireframes

I sketched out some paper wireframes for each key screen of the website, keeping the user pain points about navigation, browsing, and booking flow in mind.  


Paper wireframe 

screen size variation(s) 

Because Serenade’s users access the site on a variety of different devices, i started to work on designs for additional screen sizes to make sure the site would be fully responsive. 

Digital Wireframes

Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. 


Prioritizing useful button locations and strong visual element placement on the homepage was a key part of my strategy.

Easy access to talent

Homepage is optimized for easy browsing through list of categories (popular categories) and navigation menu items.

W2 - Homepage.png

Digital wireframe screen size variation(s) 

W2 - Homepage.png
iPhone 14 Pro – 1.png

Lo-fi Prototype

To create a low-fidelity prototype, I connected all the screens involved in the primary user flow of booking a musician. 


At this point, I had received feedback on my designs from members of my team about things like placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.

Screen Shot 2023-04-21 at 4.08.52 PM.png

Usability study: parameters


Study type:

Unmoderated usability study

icon (2).png


5 participants

icon (1).png


United States, remote

icon (3).png


25-30 minutes

Usability Study Findings

These were the main findings uncovered by the usability study:






Primary CTA wasn’t obvious from homepage.

Booking Process

Once a musician was selected, user was unsure if they were available for their specific date.


While browsing talent options, there was no way fo them to filter out specific musicians.

Refining the design

  • Mockups

  • High-fidelity prototype

  • Accessibility


Based on the insights from the usability study, I made changes to improve the site’s browsing flow. One of the changes I made was adding the option to filter the selection of musicians to fit the users desires. This allowed users more freedom to browse and compare different musicians.

Before usability study

After usability study

Talent Category - Browse 2.png
P1 - Talent Category - Browse.png

To make the browsing process better for the user, I added a carousel that highlights “Top Talent” that they can click on and be directed straight to the talent profiles. 

Before usability study

After usability study

Talent Categories 1.png
P1 - Talent Categories.png

Mockups: original screen size

P1 - Welcome-Login-Sign Up.png
P1 - Talent Category - Browse.png
P1 - Inbox.png
P1 - Talent Profile.png

Mockups: screen size variations

I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users browse from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile so users can have the smoothest experience possible.

MW - Homepage.png
MW - Talent Profile.png

Hi-fi Prototype

My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study, as well as several changes suggested by my peers.

Screen Shot 2023-04-21 at 4.58.13 PM.png

Accessibility considerations

I designed the site with alt text available on each page for smooth screen reader access.



I used headings with different sized text for clear visual hierarchy.


  • Impact

  • What I learned



Our target users shared that the design was intuitive to navigate through, more visually engaging with the images, and demonstrated a clear visual hierarchy.


What I learned:

I learned that even the smallest changes in a design can have a big impact on the user experience. The most important takeaway for me is to focus on real user needs when coming up with design ideas and solutions. 

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. 

bottom of page