Vibrophile

Web Designer

View Project Website

I was hired by Bioharmonic Technologies to craft a landing page for Vibrophile, a vibrational immersive music platform.

Overview

Responsibilities

Web Design

Client

Bioharmonic Technologies

Objectives

1) Share Vibrophile's story in a clear and exciting way.
2) Allow customers to purchase a subscription outside of the app.

Style Tile

I started the design process by building a style tile that included fonts, colors, and imagery to get aligned with the client on the thoughts and feelings he wanted to evoke.

Fonts & Colors

I chose a squared-off techy font for the header (Baj Jamjuree) to evoke a futuristic feeling, which I contrasted with a clean and humanistic Source Sans Pro for the body text.

Wireframes

I built low-fidelity wireframes in parallel with the style tile. Starting from the top of the page, I paired a big hero shot of the app in action with a clear call to action button. Under the fold, I illustrated three key value propositions, followed by social proof validating the client, and a breakdown of the differences between each subscription tier.

Final Design

I designed the final mockups in Figma and implemented a responsive website in Webflow. The project's biggest challenge was supporting paid subscriptions because the app builder we used (Good Barber) did not offer in-app purchases. I solved this problem by creating a custom payments solution with Stripe Checkout.

Results

69k App Page Views

11k App Sessions

Insights

1. Keep it simple

Reducing the amount of information to what is absolutely essential enhances the user experience.

2. Clear language always wins

Writing even more approachable language is one area the website has some room for improvement.

3. Stripe works well for app subscriptions

Stripe Checkout was an effective workaround for not being able to use in-app purchases.