May 2019 Design Sprint — Independent

Header.png

This is a self-initiated design sprint created to better familiarize myself with UX tools and further exercise my learning muscles. This project involves app analyses, user flow, low-fi wireframes, visual mockups, and a prototype executed in 1.5 weeks.

Background

Sounds of New York is a web application created by Breather, a company that allows people to rent out workspaces by the hour, day, or month. There, users are able to listen to New York neighborhoods’ unique ambient noises to help increase their focus and productivity. I decided to work on this project because, as a true user myself, I found myself having a tough time concentrating at a local café. As a solution to drown out distracting nearby conversations, I looked for a Sounds of New York mobile application to no avail. This is when I realized I could put my UX learning into action.

The Solution

Create an easy-to-use Sounds of New York mobile application that blends seamlessly with Breather’s existing web application visually and experientially.

The Opportunity

Sounds of New York doesn’t have an accessible and responsive mobile website to promote brand awareness amongst existing and potential customers.


The Process

Research and Low-Fidelity Wireframes

I wanted to focus on three user cases during this project: onboarding, the listening experience, and discovery functionality. I believe that these three aspects deliver the basis of creating a great app—welcoming, personalization, a great experience of what a user came for, and retention.

On the left, you’ll see my research amongst four mobile apps and their features + my first wireframes and how they’ve evolved over time into what they are today.

Low and High-fidelity Screen Mockups

User Case #1: Onboarding Sound Selection Process

Goal: To create a easy-flowing experience that lets users create their account and personalize their feed.

A) The first high-fidelity screen showcases the Sounds of New York landing page, which highlights two calls to action: Sign up and Log in. Unlike my first iteration, I chose to make the CTA buttons larger so that existing users won’t have to find and click small text to log into their account again.

B) Someone who has clicked “Sign up free” and who has already logged their account information will then be prompted with an alert. This alert will ask a user whether or not the Sounds of New York app will be able to use their location to better influence their noise feed.

C) Once location preferences have been made, a new user will be prompted to choose 3 or more locations off of the neighborhood choices shown. In this example, Chelsea has been chosen and has turned a darker color than what was previous shown in the second screen. A search bar at the top can also be used to search boroughs, neighborhoods, and zip codes.

D) Users will be able to click a “done” button to indicate completion of their sound selections. Then, their home screen will feature their sound choices as well as recommendations based on their onboarding process.

User Case #2: Listening Experience

Goal: To develop a listening experience that can be accessed from multiple pages throughout the app + provide additional location and sound information.

E) Once a user clicks on their choice of sound, a player bar will appear on top of the primary bottom navigation. This player bar showcases the title of the selected neighborhood and will start playing immediately.

F) This bar can also be expanded using the arrow button on the left-hand side. This expansion shows details about the neighborhood and a custom illustration to fit.

G) Screen G is to showcase the mentioned unique illustrations. The navigation on these pages have also changed to overlays and include a timer to track productivity. Also, a down arrow (top left) will be able to minimize the player into a secondary bar as shown on Screen F and an expanding menu (top right) can be used to share the sound on social websites.

User Case #3: Search and Discovery

Goal: To design search and home pages that help keep listeners on the platform by letting them find what they’re looking for and recommending sounds based on their previous activity.

H) The search screen allows listeners to discover new sounds based on borough, neighborhood, or zip code. They are also able to scroll and found sounds manually.

I) The home screen that they will be able to access via bottom navigation features curated sounds based on what users have been listening to and their location.


Prototype

 
 

What’s Next?

Given that this was an independent exercise, the designs and proposals I made can only capture one facet of the entire ecosystem of its user experience. If I were a full time team member at Breather, I would have many more resources (as well as constraints) from research, marketing, and product that I'd need to consider to fully realize this app. Also, I only performed a competitive analysis for this project, but given more time, I would conduct more research and perform a couple rounds of usability testing.