Gigwax is an online marketplace where DJs and Hosts can connect for entertainment services. Think Airbnb for DJs - Hosts get the DJ. DJs get the gig.
Amaury (CEO) and I connected on AngelList and immediately had synergies about DJs and Music Technology which led to a conversation about working together on iterations of the platform. After meeting Adam (CTO), it was clear that they had ambitious goals.
Amaury was looking to expand their MVP product with new features that would create a seamless checkout and confirmation process for new DJs and Hosts. His high-level goal was to gain trust with new users and increase engagement.
As we continued to discuss the platform, Amaury and Adam narrowed their focus to a few key features:
1. Facebook Login
With an existing OAuth2 login flow using SoundCloud, user adoption was limited, excluding hosts who may not have SoundCloud accounts or old-school DJs who aren't that savvy with online platforms. Considering Facebook's large ecosystem of users, we set up an additional authentication flow that would allow users to log in with Facebook. This increased sign ups by enabling new users to easily create new accounts from Facebook with a single sign in button.
2. DJ Reviews
Understanding who you’re hiring for when hosting an occasion where music is involved and will mostly be the center of attention is crucial to planning a successful event. Amaury had the idea of implementing a review system on the DJ profile, where other users could leave ratings and feedback related to their event. These reviews increased engagement on the profiles and strengthened trust with hosts who were looking for a high quality DJ.
3. Booking & Payment Confirmation Flow
A core feature of Gigwax is the booking flow. This is a unique opportunity to speed up the way Hosts find entertainment services and improve how DJs get paid. We set up a booking modal, similar to Airbnb, that allows hosts to easily select dates for their event and checkout through a secure invoicing experience. Also, without the official contract prepared through Gigwax, DJs would need to collect their fees through cash, making it harder to secure payment from unreliable hosts. With Gigwax bookings, DJs and Hosts can work together safely under a secure contract and transaction.
As we started to explore the features in depth, I began to draft a few sketches:
The login modal had two call-to-actions to login with SoundCloud or Facebook. We decided a modal would be best for clarity and extendability.
Considering the existing profile page already showcased a lot of valuable information about the DJ, such as their bio, mixes, and past gigs, I suggested improving the layout with a cleaner UI. Instead of the single page, we implemented tabs to toggle between different sections, including the host reviews. Within each review a user could read the comments and see star ratings for music and performance.
For the payment flow, we looked at the experiences from both parties (DJ and Host) to determine how they would utilize messaging and a confirmation page to finalize their booking. It started to become clear that the messaging would be an initial point of conversation, and would lead to a booking offer from the Host. Once a DJ accepted, they both needed a way to finalize the offer through a contract confirmation page. This led us to looking at a multi-functional confirmation page, that would update in real-time depending on the status of the booking.
When I initially met with Adam (CTO) to discuss the current state of the platform, I was somewhat shocked to hear that these young music-loving technologists were using PHP versus a modern language like go or Node.js. Nevertheless, I knew we could improve the user experience in some way. I introduced them to Angular and recommended that they move to a more de-coupled, single-page application. (Client and API)
My initial consideration was how we would port existing PHP templates to Angular templates, which would allow us to extend the new features in a more elegant manner. We began to discuss a migration phase for the project where we would strictly focus on implementing an Angular scaffold.
Considering the routing was being handled server-side with PHP templates, we decided to inline the controllers in various parts of the PHP. This allowed us to bootstrap Angular in certain parts of the app. Although we needed to use a spinner to buffer a short delay when loading the Angular app, it worked out okay.
Reviews, Star Ratings, and React
For the reviews section we decided to keep things simple and go with Bootstrap’s tab panels. It was important for us to separate different sections of the DJ’s profile and create clarity around specific aspects of their profile. This allowed Hosts to quickly find important information.
Although we were using Angular, the star rating seemed to be a perfect component for React. I did some searching and found David Chang’s ngReact which allowed us to embed a React component into an Angular directive. Following good software abstraction, I decided to build the component separately as a node module and hence it became react-star-rating. I simply dropped it into an Angular directive and it worked perfectly!
We finalized the reviews section with a validated comments form. It allowed users to quickly auto-select a previous event from a dropdown menu by navigating to a specific url with an action and event_id as query params.
Confirmation and Checkout via Stripe
With the existing messaging flow, DJs and Hosts could have a conversation about booking a gig together, but there was a missing piece. Expanding on the confirmation wireframes, I got into Sketch and mocked up a confirmation page that would allow for a multi-functional user experience for DJs and Hosts.
We needed to separate the actions between the DJ and Host so I created a specific service which would handle Host payments via Stripe.
As we looked into payment options, we found that Stripe had the best documentation, support, and feature set. Adam and I worked closely on implementing the Client and API actions to step users through the payment flow. We decided to use the Stripe modal considering it’s minimal setup time:
With the app set up finished, we implemented the Facebook Login modal.
We spent some time toward the end of project testing and fixing bugs. Over the course of a month, we were able to pull in these features and finalize everything for a launch date very close to our original deadline. We had our PRs merged into a development branch and prepared the branch for a merge to master.
Throughout the weeks after, we all continued to see new DJs signing up and Amaury was able to get the one of the first DJs paid. The team also demoed the new features at a well known music tech meetup in Brooklyn shortly thereafter.
In the end, the Gigwax team was able to 10x their revenue and the project was a total success. We tested it ourselves with a Gigwax party at Zazou in the East Village where we celebrated the launch!
Interested in learning how to create and scale innovative products?
Sign up to get my latest insights, tips & tricks on product, marketing, tech, startups and more...