Automated Booking to Bridge Audio Engineers and Musicians
JAICA CREATIVE - CASE STUDY
October 2021 - November 2021
Amplifying a Studio
Jaica Creative is a rapidly growing, 24-hour recording studio based in Central Florida. They have upcoming plans to expand into Atlanta and Miami, so the owner needs a way to manage the increasing employees and rooms, while retaining the same 'friendly vibes' their members have come to expect.
This website redesign is a part of a larger reconstruction of Jaica's web presence to prepare for Web 3.0 upgrades. I scoped the project, created data structures, made wireframes and mockups, and developed a working prototype using GatsbyJS.
Realizing the Brand
To scope the project, I had a meeting with the owner, the manager, and two audio engineer employees. Instead of writing down the most pertinent parts, I recorded the audio of the meeting for future reference, as advised in the UX book, The Mom Test by Rob Fitzpatrick. The purpose of this is to focus on the meeting instead of on-the-fly information organization.
Important Questions I considered Before the Meeting
- What services should the Jaica App/Website provide?
- What are the services that a 'room' can provide?
- What info do Audio Engineers want from an artist before a session starts?
- How do A.E. feel about online booking?
- What do A.E. need for a song mix/master?
- Demographics of members & # of members/month
- Favorite organizational apps? (For Owner)
- How is merchandise currently made/shipped?
Part of The Pitch We came up with to aquire the client, made with prezi
The Booking System
The number one feature that I disseminated was Jaica needed a way for their members to book sessions online. There were a few different member types, which dictated available rooms and time constraints. Additionally, to control the schedule data, I split the program into three types of users. The last consideration was to add the ancillary services that Jaica provided such as events and a food menu.
The service tiers Jaica provides
- Member - book 4 days in advance, book the 2/4 hr. rooms
- VIP 1 - book 30 days in advance, 4 sessions with the A.E. of member's choice, book 6 hr. room
- VIP 2 - everything from VIP 1, 4 more sessions (8 total)
Permissioned user base for the web app
- Admin - make rooms, schedule workers, add merchandise, add events
- Audio Engineer (Employee) - see personal schedule, message clients
- Client - schedule session, buy merchandise/tickets/extra time, and fill out self-description
Other components of the website
- Merchandise sales
- Event sales (through Eventbrite)
- Food Menu
- Space Rental
- Hire Media Team
With the information gathered, I was able to create a sitemap that focused on a member booking system while highlighting all of Jaica's services. The main purpose of the site is the booking system, which has a direct tab on the navbar, as well as being internally linked to each audio engineer in the About Page.
Below are the thumbnail wireframes I made to start the process of creating the user interface.Other notable elements include the sectional layouts which will allow for modular development and reusable design elements. For example, the Hero Section can be used for any CTA with the addition of a Button Element.
These wireframes became the foundation for the subsequent mockup and prototype. I've outlined the requirements for each page below.
- Display CTA to membership
- Login for members
- Overview of Jaica Services
- Calendar picker
- Pick an Audio Engineer
- Time scheduler
- Communication portal
- Sales for:
- Detailed Jaica Services
- Staff Listing
- Pictures of Lounge
- Food Menu
- Book Lounge
The User Interface
From Wireframe to Prototype
Analyzing the Old UI
To fully encompass the brand and not confuse the +300 regular members of Jaica, I examined the old layout. This came from a Wordpress site that was abandoned by a previous developer, before I took the project.
- Major Elements I noticedBrand Color: #940101
- Heavy Use of BG ImagesRedundant CTAs
- Unclear NavBar Options
- Fonts didn't fit brand well
Created with Figma
After the wireframes were double checked for usability, I began mixing in the brand. As a former chef, I knew how swiftly incorporating batters has the power to change the overall baking consistency. I used this principle to rapidly iterate upon designs using Figma.
- Final Mockups
By studying the old design and keeping the best parts, I created a set of mockups that the client easily approved. While I mostly stayed true to the wireframes, I broke the 'logo on top left' rule for a more practical header. I wanted to make sure that it would be easy to reach Jaica Creative, so I placed an eye-catching Contact Header before the NavBar. Unlike previous iterative work, I only revealed one design for approval, as I had a pretty clear understanding of what Jaica wanted.
Now that the Figma mockups were complete, I had to create a working prototype for handoff to a backend developer. I chose GatsbyJS as my front-end framework due to my comfortability with the tool from personal projects and the near-ubiquitous compatibility of ReactJS.
Below a working prototype can be explored. The experience is fully responsive, targeting mobile and desktop users, as well as being compatible with tablets. The next steps for this design are to add a backend, such as AirTable, to track the bookings and purchases. Since the front-end is built with HTML forms, it is universally compatible with any REST API. The complete site is slated to go live in early 2022.
Due to a restriction in the client's budget, the project has been placed on-hold temporarily. This has taught me to consider novel approaches to client billing, as well as how to navigate uncomfortable situations. To archive the current work, I placed the site in a private GitHub repository, where I can easily retrieve it to finish the booking system.