Wavelength
Drumming up hype through social-media-worthy design.
Overview
WAVELENGTH is a dating app startup that was part of UC Davis’s PLASMA 2024 cohort, a 12-week startup accelerator program run through the Student Startup Center, for which we ended up winning the $5,000 Mentor Award. I am a cofounder and the sole designer, and have done work with my cofounder (CEO and front end developer) for everything including customer development, business strategy, marketing, graphic design, developing a pitch and accompaniment video, and designing the app and a separate marketing website. For the purposes of this case study, I will be focusing on the marketing website.
DURATION
12 weeks
ROLE
Cofounder, UX/UI Designer, User Researcher
TEAM
1 cofounder/developer, 2 lead developers
Discovering Our Audience
In validating the app idea, my cofounder and I conducted fifteen customer development interviews, in which we asked people about their experiences with dating apps or how music has shaped their relationships and identity.
Our primary findings were:
Music forms an integral part of college student’s personal identity and social relationships
Current dating apps are not meeting the needs of our target audience, particularly in helping them develop connections in-person
These interviews, as well as secondary research, provided valuable insight into the app concept:
Using music to jumpstart authentic, in-person connections
While we brainstormed the main features of the app, I was tasked with designing a website that would pique the interest of music-loving college students and spread via social media channels and word-of-mouth.
Setting the Bassline
As this project utilizes the Spotify API, we had several constraints to work around, as listed in their legal documents, such as no incorporation of AI. I also had to create something that could be hosted at a very low price point, which would have ruled out AI anyways. These constraints would force us to get creative with our approach to creating the website.
For the concept itself, I looked at existing websites for inspiration: Receiptify, a music visualization website which is often shared across social media stories, Snapchat’s horoscope feature, and Spotify Wrapped. The first and third websites are notorious for their virality, and both involve personalized music data, while I wanted to borrow from the connective powers of Snapchat horoscopes. Drawing from these sources, I sketched out several ideas for music data visualization websites, and even explored one in mockups:
However, none of these ideas felt fully satisfying—either they were too complex technically, didn’t appeal to a male audience, or weren’t conceptually linked to Wavelength as a company. So, the entire team jumped into a brainstorming session, and by building off each other’s recommendations and ideas, we settled on an idea that fulfilled all our requirements: a website that lets you compare your music taste with your friends, to determine whether you are on the same “Wavelength.”
This concept was both thematically appropriate and broadly appealing, and had the added benefit of being inherently social, which meant it could spread faster among friends. With this idea in mind, I set to work with creating prototypes.
Building the Melody
First, I laid out the information architecture of the site. For time and technical reasons, we needed something that would only be a few pages, so I created a simple loop for the website. After running the prototype of the website, we’d also add a simple loading screen for the time that the data analysis would take.
After getting approval on this, I set to work with low-fidelity wireframes for the site, proposing a few different options for the initial sign in page, so that the developers could adjust depending on the sharing implementation. I used a mobile-first approach, as the website would primarily be for sharing on social media. For this same reason, we also needed most of the main information to be displayable on a single page.
I then explored the visual identity, grabbing inspiration from data visualizations and Wavelength’s core color palette: neon on dark, for that cool “dark mode” look. These would help shape the user interface of the website.
Putting all this together, I developed a high-fidelity prototype, which the development team used as a reference.
Key Change
However, just as these were being developed, we decided to reprioritize our main PLASMA deliverables, wanting to host a live event that we planned to use as a proof-of-concept. The reasons for this included:
Gathering data about music as a connective force
Connecting with our beachhead market
Testing a few features of the app, including “Date Mode,” in which we provide personalized prompts and questions to get the conversation flowing
Gaining more momentum to show to investors before the pitch competition
With this new direction in mind, we made the decision to pivot the website from being focused on social media marketing to being a tool used before and during the event. While we still maintained our concept of “comparing wavelengths,” the context would now be as an in-person conversation starter. With this in mind, we made a few changes:
Added prompts to spark conversations with a stranger
Added fun, four-letter word codes to be shared in person
Added a screen to input basic info, such as name, age, and hometown, to create a basic profile
Due to no longer needing to be summarized in a screenshot, we were no longer confined to one phone screen to display data
I continued to refine the prototypes as development simultaneously took place.
Testing the Crowd
As development was occurring, we tested our designs with 10 users in our target demographic. This provided more feedback to refine our designs:
Users sometimes found themselves confused by what each page meant, so we added small descriptive text to each section.
Users were unsure how to return to their dashboard, so a link was added to the top of the page
From the developmental side, we also needed to prioritize loading times, so we replaced the Wavelength previews with more basic profile info.
Soon, the website that had once been only Figma prototypes was now a fully-interactive, shareable website.
The final live website
The Final Performance
As the main event approached, we secured a venue, funding, and amped up marketing efforts, managing to collect 64 signups! Alongside my UX/UI work, I also made a promotional poster and “business cards” to be handed out at the event:
This would be the time to put our final website to the test. As people arrived, we gave them their login information, and everyone began their search to find someone on their wavelength.
Facing the Judges
After the event, we sent out a survey to the attendees to collect feedback. This came back overwhelmingly positive, with 60% of respondents saying they enjoyed using the website as a conversation starter, over 80% who reported that they enjoyed using the website as a way to learn about themselves and others, and over 90% reporting that they met someone new. We also had several free response questions, with answers that included:
“It was fun to connect with people that I had no idea listened to the same music. It’s a very fun conversation starter!”
“We all were able to bond over the similarities in our music taste and talk about it even after the event was over.”
“It was nice, I usually never talk about my music taste so it was a good way to open up about that.”
This gave us the insight we needed to continue: music could be the connective tissue that college students are looking for, and in-person interaction is a wise investment.
This website proved to be a pivotal element in our final pitch at PLASMA Demo Day, and our efforts earned our team the $5,000 Mentor Award.
The Encore
With the success of the website, we are now continuing to develop it into the broader marketing concept we originally had, while also conducting further user research and brainstorming efforts for the app itself.
This project proved to be an intense yet exhilarating project, and my efforts here and in the PLASMA program generally have allowed me to further develop my business sense, as well as collaborative skills when working with non-designers. I can’t wait to see where the project takes us next.