Automated Booking to Bridge Audio Engineers and Musicians

JAICA CREATIVE - CASE STUDY

Jaica Mockup

Jaica Creative

Web Redesign
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.
My Contributions
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
Client Management
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
  1. What services should the Jaica App/Website provide?
  2. What are the services that a 'room' can provide?
  3. What info do Audio Engineers want from an artist before a session starts?
  4. How do A.E. feel about online booking?
  5. What do A.E. need for a song mix/master?
  6. Demographics of members & # of members/month
  7. Favorite organizational apps? (For Owner)
  8. How is merchandise currently made/shipped?
A part of the Jaica client presentation
Part of The Pitch We came up with to aquire the client, made with prezi
The Booking System
Data-Driven Design
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.
Member Types

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)
User Types

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
Extra Requirements

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.
Sitemap for the Jaica site
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.
Wireframes for Jaica Creative
These wireframes became the foundation for the subsequent mockup and prototype. I've outlined the requirements for each page below.
Home
  • Display CTA to membership
  • Login for members
  • Overview of Jaica Services
Booking
  • Calendar picker
  • Pick an Audio Engineer
  • Time scheduler
  • Communication portal
Products
  • Sales for:
  • Merchandise
  • Events
  • Food
About
  • Detailed Jaica Services
  • Staff Listing
Lounge
  • 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 noticed
    Brand Color: #940101
  • Heavy Use of BG Images
    Redundant CTAs
  • Unclear NavBar Options
  • Fonts didn't fit brand well
Jaica's Old Design, made in Wordpress
Mockups
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
Final mockups for the Jaica site
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.
Phone and Desktop Mockups of the final website
Conclusion
Design Hand-Off
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.
Reflection
Final Thoughts
After working with the development team, they came up with an API system which required a few edits to the final site. This project was one of the most complex, yet invigorating designs I've ever been tasked with, mostly due to budgetary delays. Below is a link to the final site, which currently supports the +300 member community.

Do you have a project in mind?