Roles: User Experience Design, User Interface Design, User Research
Timeline: December 2018 - February 2019
Tools: Adobe XD
BookLive is a social and performance management platform for freelance musicians. The company was founded in 2017 and made a pivot in Fall 2018. Having previously worked with its sister company, Dream City Music, I took on the responsibility of spearheading the creation of a design system for the mobile and web applications. 
Given my strong outside interest in music, this was a fantastic opportunity to utilize my skills in user experience design, user interface design, and research while drawing upon data from previous projects to inform the development of a new application.
Freelance musicians often manage a variety of tasks in order to book a gig, developing their own processes to manage these tasks. However, the process of booking a gig is rather ambiguous and can be both burdensome and stressful if not properly managed. Some tasks musicians perform in managing performances include:
     • Communicating and negotiating with clients
     • Setting up terms of agreement
     • Organizing groups of musicians
     • Coordinating schedules between musicians for gigs
     • Managing a budget
     • Dealing with musician and client payments
Given our team consists mostly of freelance musicians, we were able to create guiding questions and functional requirements quickly. My own questions included:
     • How can we streamline ambiguous and confusing processes in booking gigs?
     • What makes performance management easy to use for everyday musicians?
     • What is the best way to facilitate interactions between musicians on our platform
     • What features can we incorporate to foster connections and social interaction?
Defining the space
Given the problem space and an existing prototype of the web application, I sat down with the founder, an experienced freelance musician himself, to outline the various application components and processes that would most benefit musicians. 
We compiled bulleted list current processes and features from web application prototype to get an initial understanding of the project scope.
Information architecture
With this information, we created a basic site flow outlining the potential different screens and menu items that could match the features and functionality of the web application. The idea was to understand the underlying information architecture and functionality while uncovering any obligatory screens and optimal content configuration.
After shooting ideas back and forth and making adjustments to both the performance and contract flows, we eventually decided upon the following application structure.
Given a short timeline of three weeks for the project and previously working on low-fidelity wireframes for its sister company, we opted to skip some of the sketching for some similar pages and move straight to higher-fidelity wireframes. We met multiple times throughout the creation of these wireframes, and eventually concluded on the following high-fidelity wireframes.
Selecting a color palette
From initial screenings, we found the prior color palette didn't resonate with many musicians—including the founders. As we closed the wireframing process, I began experimenting with different color palettes, interviewing five musicians across two tests to start defining a unique visual identity for the company.
I was consequently given liberty to employ a new palette in the BookLive design system. Using various samples from images of performances at night venues to 1930s jazz posters, I developed 12 palettes for user testing, including two "night-mode" schemes.
For each of these 12 palettes, I created a high-fidelity mockup of two pages and had each musician (out of 5) rate each instinctually on a scale of 1-10, given approximately 7-8 seconds to view each palette. From this I was able to narrow down the palette to the following four, which then led to the final palette selection.
While the light mode became our central palette, we decided to additionally incorporate a dark mode for the application. This is important because musicians using the app to view set lists at gigs—which are usually in dark venues—may develop eye strain due to the brightness of the light mode. This ideas was initially proposed from user testing our previous application.
Because the wireframes were already high-fidelity, the final mockups just needed color, dummy data, and minor adjustments.
Performance Creation
The most valuable feature of the platform is performance management. After multiple revisions, we determined a streamlined flow based on whether a user is organizing an event, creating, and/or performing.
Contract Creation
Equally valuable to the platform is contract creation. For organizers lacking experience writing contracts, we developed a streamlined creation flow while allowing for more customization for clients who want to integrate their unique contract structures. Finding the right balance for the average BookLive user is something we're still exploring, and will likely become more apparent as we continue testing.
Final Mockups
In total, the app has approximately 50 pages excluding popups for confirmations and other small details to accommodate for the various features integral to managing performances and enabling social interactions.
This application has certainly been a growing experience for me as a UX/UI designer and creator, especially since given complete creative freedom to design BookLive's visual identity and design system from scratch.
Of course, there have been mistakes—such as not testing the mockups on mobile soon enough and having to resize most of the text, an ordeal that took hours to correct. However, they are principles I can certainly carry forward into future projects. 
As this mobile application reaches its final stages of development in the coming months and knowing the tremendous support from musicians around the country thus far, I couldn't be more excited to be on this ride. In the end, it's not the design of the app, but the impact it will bring that matters.
Back to Top