Wearhaus

 

Wearhaus is a music hardware startup based in Berkeley, CA. I was brought on as the sole designer to work on their app where I worked with the our two developers to create the app from end to end. The app is a companion to the Wearhaus Arc, the company's wireless headphone that allows you to sync up and listen to the same songs. The app allows you to broadcast your music and create stations for other users to find and join and collaborate on what songs to listen to next. The company wanted to expand the app to do more than just aid in the hardware. As the sole designer of the startup, I also contributed to various other designs such as packaging and display design for the hardware.

credits

UX Research, Prototyping, Design - Nickki Nguyen
Marketing - Dana Krangel
Development - Ken Laugiuco, Steven Hewitt
Packaging - Nickki Nguyen, Gracel Catacutan

Year - 2016

 
 
8d555642885977.57db159357efc.png
 
 

Mobile App

The mobile app provides users with the ability to change light ring colors, start a station, join a nearby station, and push firmware updates to their headphones. I went straight into hi-fidelity designs to push to our two developers to release the app as soon as possible since the headphones were already being sold. 
 

process

As with many startups, designing the app was a quick and scrappy process:

  1. Establish a visual brand for the mobile app

    1. The mobile app did not utilize the existing brand for the headphones. I connected with the marketing team to gather brand guidelines existing on our packaging and website and incorporated those elements into the app.

  2. Improve interface design of existing screens

    1. The developers worked out a functional app, but it was only the bare bones. Instead of scrapping the whole thing, I redesigned screen-by-screen to roll out the improvements incrementally.

  3. Work out user flow and interaction

    1. Inevitably, I ran into holes in the experience and flow. When that happened, I sat with the developers to work out what needed to be changed, improved upon and quickly iterated.

  4. Push to dev

    1. Instead of designing the entire product before pushing it out, I worked with dev and the rest of the team congruently throughout the process. As soon as a change was approved, it was implemented. This allowed for rapid iteration and rapid prototyping.

  5. User testing

    1. I brought up several friends to come into the office and test out the app, giving them tasks to complete and taking note of what functions were unclear. If I had to explain what a button was used for, I was designing it wrong.

  6. Iterate, Iterate, Iterate

    1. For the rest of my time at Wearhaus, as soon as we encountered a problem on the dev side, I would change it on my side. This back-and-forth process continued for the whole time I was there, and even after we pushed out the app.

 

login screen

We went through several login screen iterations with different considerations. Should we prioritize login or sign up? Can both use the same form field? Should the login screen be separated? We looked at login screen patterns such as Instagram and others on pttrns.com to inform this decision. We ultimately went with the last screen, to simplify the page and make each action item clear. 

 
 
loginvariations.jpg
 
 

home screen

We went through several iterations for the home screen as well, forcing us to pair down the dashboard into three key functions: join nearest station, broadcast, and light settings. Browsing stations was eliminated since the headphones could only pair with one other headphone.

 
 
homescreen_variations.jpg
 
 

light settings

A key selling point for our headphones are its customizable lights. With the app, you can get more options as to how to display your lights. Activate a tricolor instead of just one? We have pre-selected presets for that, or customize your own. Match your color to your album art. Pulse to the music. The biggest improvement was moving the "Off" button to the main screen of the light settings. It used to be tucked away but according to user feedback, people needed a quick and easy way to turn off their lights when they wanted to be more inconspicuous.

 
 
lightsettings.jpg
 
 

ios version

I started designing in android and decided to change the menu for the iOS version. I moved the side pull out menu to a stationary footer menu. Some features had to be moved, such as the settings button, to keep the bottom menu at the maximum of 5 items. 

 
 
iosandroid.jpg

Android pull-out menu vs. iOS bottom menu

 
 

headphone states

It was important that users knew which state their headphones were in so that they knew what their next actions would be. "Solo" listening, "Broadcasting" and "Synced. " We wanted the headphone icon to change according to the state of the headphones. 

 
 
headphonestates.jpg
 
 

onboarding

A constant problem we came across was informing the user when they've created a station versus when they've joined a station, especially since the stations look the same from both sides. We solved this problem by including introductory popups when a user first joins or creates a station.

 
 
popups.jpg
 
 

Music Player Companion App

For two months, I have been working on a companion piece to the Wearhaus app, in which users can broadcast playlists from other music services all in one app at one premium price.

Survey & Analysis

I created a survey on SurveyMonkey in which we were able to gather a sample of 200 people to answer questions about what people look for in a music app to better understand our target audience, the willingness to pay a premium price and what features we needed to prioritize. 

Most people use Spotify as the #1 streaming service, but usually in conjunction with another music service.

44% percent of the users use Spotify premium, then no premium service at all at 35%, then Apple music at 17%. More people pay for premium services than not at all.

74% of premium users would be willing to pay $15 for all music services.

According to demographics, our target audience is male, 18-25 and employed.

 
 
 

hi-fidelity mockups

Broadcaster's View: Selecting a playlist from Spotify or Soundcloud to create a station with those songs.

 
 
 
 

Listener's View: Listeners can join in on a station and from there, can suggest songs from any music service to be added to the queue. 

 
 
 
 

Keynote presentation

Check out the video below for a more in-depth explanation:

 
 
 

Illustrations and Icon Design

 
download.png
 
 

Packaging and Display Design

Packages connect to form a whole to show the audio synchronization between two Wearhaus headphones.