User Research

With the company being in their startup stage, I researched the physical music space, conducted interviews, and created empathy maps to accurately design for future users. In that process, a few pain points were highlighted.

Availability
‍Specific physical albums aren't always easy to find, either online or in stores.

Quality
‍Streaming services don't offer the same sound quality that physical records do.

Accessibility
‍Websites and apps can often be confusing for users to navigate.

Price
‍Physical edition albums can often be expensive, especially from auctions.

User Personas

Further in the process of conceptualizing and ideating the app, user personas were created to accurately design for their specific needs. These are the people I am designing for.

David Smith

"At the end of the day, I just want to sit down, put one of my childhood comfort records on, and unwind."

Age: 67 years old
Education: High School
Hometown: Chicago, IL
Family: Wife, Adult Children
Occupation: Business Owner, Cook

Having a physically demanding job, David has always listened to records to relax. He wants to find and own records from his childhood at an affordable price, though some can be pretty hard to find. Additionally, he struggles with navigating streaming apps due to his limited familiarity with mobile interfaces.

Tyler Robbins

"Streaming music is just not the same as listening to a record, and I'm really proud of my collection."

Age: 28 years old
Education: Some College
Hometown: Los Angeles, CA
Family: Lives Alone
Occupation: Musician, Salesperson

If Tyler could listen to music exclusively through records, they would. Being an avid collector, they know that the quality of streaming doesn't come close to the way physical albums sound. A lot of artists also rely exclusively on streaming, which means finding some records is nearly impossible.

Designing Wireframes

Getting some ideas on paper is always best before getting it on the screen — if something doesn't work, don't worry about making changes to the component, a good eraser or trash bin will do the trick. After a few iterations of sketching, these were the ideas that stuck.

By sketching out the wireframes beforehand, I was able to think out some solutions for both personas and therefore design for all potential users, keeping accessibility front and center. The objective of the app became making it function like a shopping website, keeping familiarity and simplifying the navigation.

Low-Fidelity Wireframe

This flow explores a typical user's process in searching, finding, and ordering a specific record, from opening the app to completing the order.

Home page with slider banner, product displays, and search functions.

User taps on search bar in order to search for an album, with search suggestions and listening function appearing.

Search results appear. User has the option of adding items to the cart, or clicking an album for details.

Product details page, allowing user to preview songs in the album.

Shopping cart page, showing user's order and shipping information.

Order confirmation window appears to allow the user to make one final order check.

User is taken back to the home page, with banner appearing that the order is complete and how to check the order status.

Usability Studies

After the first usability study, I had aimed to design for convenience, accessibility, and simplicity. It became very clear by the second study that simplicity can at times make things unclear, so tipping the scales to allow for more conveyance of information was the second order of business.

Round 1 Findings

Users want a convenient place to order physical records.

Users want affordable options

Users want accessibility for people who don't regularly use technology

Round 2 Findings

Users found numbered shopping cart items a confusion function

Buttons are way too small

Order confirmation feels unclear

Refining the Design

Changes were made after the usability studies while the high-fidelity prototype was being built. This made sure that we could account for user needs while being efficient in working with the project.

Continuing through the process, it was found that even though it might be easier to add items in bulk to the cart with the number system, a large button would be  simpler and straightforward, allowing users a larger area to tap on to add an item to the cart.

In order to give the user complete once information about their order it was concluded, an entire new screen was built with the relevant information and next steps, as well as some new artist and album suggestions.

High-Fidelity Wireframe

The final high-fidelity prototype refines the user experience in a simple, straightforward, and accessible way.

Home page with slider banner, product displays, and search functions.

User taps on search bar in order to search for an album, with trending or "for you" search suggestions and listening function appearing.

Search results appear. User has the option of adding items to the cart, clicking an album for details, or looking at relevant artists.

Product details page, allowing user to preview album artwork and songs in the album.

Shopping cart page, showing user's order and saved information such as payment and shipping information.

Order confirmation window appears to allow the user to make one final check on all the information.

User arrives at confirmation page, with options to either go back to the home page or keep browsing suggested albums.

Accessibility Considerations

The listening feature considers the user either having a vocal impairment, either being non-speaking themselves or being in an environment that doesn’t allow for speech, to simply not knowing what song is playing by allowing the user to either say the artist, album, or song name, or listening to the song currently being played and searching it on the app.

Buttons and colors are made clear with contrasting colors and font treatments to make it easy for the user to know where to tap to proceed with the process, as well as knowing what an item costs, the title of the album, and where to preview the songs, to name a few examples.

By giving users search suggestions, as well as allowing the flow of the app to be as simple as an online store can be, it allows users to be able to have a customized experience with suggestions based on the current music they listen to, as well as past purchases to refine those new artists and album suggestions.

Key Takeaways and Next Steps

The app made users feel like searching and ordering an album is simple and straightforward, accomplishing one of the app’s main goals. While designing the app, it significantly reinforced the fact that user feedback is an essential part of the experience design process. Each iteration changed with feedback in mind, and made me consider completely new perspectives and think about the complete experience in a new light.

Do another round of user testing to make sure that the process is smooth and clear for people of all technological literacies. The process should be universally as accessible as possible, so this would be an important next step.

Add account customization options, with features typical to shopping websites such as a profile and payment options, but also genre suggestions and favorite artists for the app to suggest to the user.

Conduct more market research on album and music websites to introduce more familiarity into the process of shopping and explore more gaps in the market that Groovr could fill.