MusiCity - Musician Booking App

Project Overview

MusiCity is a musician booking app for a wedding venue in a user’s favourite city.
It takes user preferences into account and offers information to enable users to choose a city,
and then is a platform to book an available musician for their wedding venue.
MusiCity targets users who are getting married, and acts as a tool for professional wedding planners.

Duration:

September 2022 - October 2022

The Problem:

People who are engaged often get stressed and overwhelmed
with the many aspects and considerations of wedding planning.

The Goal:

Design an app that aids in part of the wedding planning process: deciding on the destination of the wedding as well as booking a musician for the wedding day.

My Role:

UX Designer designing the MusiCity app
from conception to delivery.

Responsibilities:

Creating user personas, performing competitive auditing and reporting, user journey mapping, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

Understanding the User

User Research - Summary:

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was engaged couples going through many stressful thoughts and processes when planning their wedding ceremony. A secondary user group identified was professional wedding planners who could use a tool to aid them in their job.
These user groups confirmed that wedding planning is often stressful and that there is currently a gap in the market for a tool where information on cities can be provided along with the ability to book a musician in a chosen city. Other user problems include lack of diversity, inclusion, and accessibility in current market options.

User Research - Pain Points:

Information

There is so much information overload to consider when planning a wedding and the whole process can feel overwhelming.

Diversity & Inclusion

Many existing wedding services are very heteronormative and non-inclusive.

Support

Many services end support when an event is over, but sometimes users may require
support after events too.

Preferences

Weddings can be a very personal event so users often want their personal preferences to be reflected.

Personas:

User Journey Map:

Mapping Andrew’s user journey revealed how helpful it would be for users to have a tool for finding wedding venue cities and hiring musicians within one app.

Understanding the Market

Competitive Audit:

Competitive Audit Report:

Starting the Design

UX Design Storyboards:

Paper Wireframe:

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the musician information screen, I prioritised essential features (i.e. bio, audio samples, message function) to help users make their decision.

Stars were used to mark the elements of each sketch that
would be used in the initial digital wireframes.

Digital Wireframes:

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research. Easy and intuitive navigation was important along with tailored experiences for users.

Biography/
Description of musician as well as audio samples for users to decide whether they want to choose this musician.

Messaging function for users to directly contact and discuss details with musicians before booking them, to give users more confidence.

Easy way to reset all selections so the user doesn’t have to deselect each item individually.

Options that users can select based on their preferences so that the city results shown are more tailored to the user’s wants.

Low-Fidelity Prototype (Figma link):

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was choosing a city, messaging an available musician in that city, and then booking a musician, so the prototype could be used in a usability study.

Research and Usability Studies

Research Study Plan:

Usability Study Notes:

Affinity Diagram:

Research Presentation:

Usability Study - Findings:

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups.
The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Round 1 Findings

Users want results to be easier to go through

Users could choose a musician by reading their bios and users listened to audio samples

Users have confusion during the booking request submission stage

Round 2 Findings

The font was not consistent

Style such as amount of rounding needs to be more consistent to not be so visually jarring

“My Profile” page needs to be fully fleshed out with updated stylistic choices

Refining the Design

Mockups:

Before usability study 1

After usability study 1

Early designs allowed for preferences selection, but after the usability studies, I changed the button size, colour, and shapes to be more consistent with the overall brand image. I also made selections more obvious by adding a border.

Before usability study 2

After usability study 2

The second usability study revealed additional stylistic choices that could benefit from being more consistent, so I changed the fonts and added roundedness to most elements.

High-Fidelity Prototype (Figma link):

The final high-fidelity prototype presented cleaner user flows from login to booking finalisation, with different avenues of navigation.

High-Fidelity Prototype GIF (Figma link):

Accessibility Considerations:

Used icons to help make navigation easier.

Avoided using tables for layout to avoid a specific semantic for screen reader users.

Avoided providing information solely through image form, and did not use images of text as well.

Going Forward, Takeaways

Impact:

The MusiCity app provides a concise platform to gain information on various cities and connect with musicians, taking away a lot of the stress that comes with wedding planning.
‍
One quote from a study participant: “I like that there are audio samples that give me a preview of what the musicians sound like, and getting to chat with musicians before booking them puts me at ease.”

What I Learned:

While designing the MusiCity app, I learned that there are so many steps in the design process. Usability studies and multiple feedback influenced each iteration of the app’s designs, before I could come to a point where I’m satisfied with the prototype.