top of page

Trove

Designing a simple vinyl collection app and design system

Overview

Trove is a fictional vinyl record collector app. It lets users manage their collections and wishlists, using the Discogs API and database, but strives for more simplicity in the user interface and interactions.

They needed an MVP app, branding, and a starting design system that could scale.

Timeline

4 weeks

Role

UX/UI Design,Design System, Branding

Trove_Google Pixel 3_Album Info.png
Trove_Google Pixel 3.png
Discover

Discover

Researching the problem space and finding user needs

Research Goals

Research dictated the exact direction and scope of the design. I focused on types of record collectors and their motivations and preferences, seeking to answer these questions:

  • Do people prefer vinyl over other formats?

  • What motivates people to collect vinyl?

  • What obstacles make this more difficult?

  • How would people want to use this app?

  • How are competitors solving this problem?

Methods

  • Secondary research

  • Competitor analysis

  • User interviews

Secondary Research

To better understand collectors, I looked at some vinyl enthusiast websites. I focused on why people like vinyl, and how they organize their physical collections. I also learned about crate digging, which is when collectors look through bins or crates in-person to hidden gems. This was the inspiration for the name Trove, a collection of valuable gems and treasure.

Competitor Analysis

To see what solutions already exist and look at interaction patterns, I compared a few apps. Discogs started it all and is the “godfather” of album data. VinylWall and Disco FM were listed in an article along with Discogs for best apps for vinyl collectors.


Discogs unsurprisingly has the most dense and granular data, but it also makes it busy on screen and can be overwhelming. Vinyl Wall is less detailed with a lightweight but sometimes confusing interface, with its ambiguous icons. Disco FM had the most clean and modern UI, but had the least detailed data.  It focused on searching and “saved releases”, the function of which wasn't clear.

discogs logo.png
vinyl-wall-app-logo.png
disco-fm-app-logo.png

User Interviews

With the desk research and competitor analysis as context, I moved on to interviews, the most important part of the research. It’s one thing to read about something online, and another to hear it from a person. It’s also far more interesting and insightful.


I really focused on active listening and letting participants talk as much as they wanted and make it feel more like a conversation than an “interview”. This is a niche hobby and people are eager to talk about it.


I used Descript to transcribe the audio from the meetings, adjusting as needed and highlighting main points. This process saved me an incredible amount of time versus doing it manually.

Participants

  • Record collectors

  • All male

  • 5 people

  • 3 experienced

Interviews

  • All remote via Zoom

  • Recorded for analysis and notes

For me it is finding a rare item that, you know, is just lost out there in the woods and I'm finding it.

It's cool to have physical music. It's like having an art piece, you know?

I love Spotify, but I love, like, owning the albums.

Affinity Diagram

With the meeting notes highlighted inside of Descript, I simply went through the notes and summarized them on a sticky note inside of Figma, grouping common themes as I went.

Trove_Affinity Map__.5x.png

Research Insights

Based on secondary research, interviews, and the affinity diagram, these were the main user insights.

Gains

  • There is a tactile experience with the physical product

  • It’s nice to own the music in the physical format

  • There is a thrill in discovering something new

  • Buying in-person is a memorable experience

  • Participants keep what they listen to and enjoy

Pains

  • Money is the biggest obstacle, due to rise in popularity

  • Participants use Discogs but it can be difficult on mobile

Define

Define

Setting our goals and priorities to solve the problem

Persona

With the key user traits and habits found in research, I created the persona. It was pretty easy to create the backstory since my participants told their stories in detail. All of my participants were in some kind of creative field, which I found fitting and interesting as well. The archetype and type of profession was clear. Not a whole lot was said about apps and user interfaces in the interviews, but a frequent comment was how Discogs left some things to be desired with usability and overall experience.

Trove_Persona_Brian Smith.png

Point of View & How Might We?

With the persona as reference, I wrote out user stories of potential use cases. These guided the problem statements and begin the process of brainstorming for solutions.

User Stories

As a collector, I want to:

  • Check if I own a record to avoid duplicates and save money

  • See the going price of a record to see if it's a good deal

  • Have a quick way to add albums to my collection and save time

Trove_POV & HMW.png
Design

Design

Ideation and design of structure, user flows, wireframes, and UI elements

Sitemap

I stopped to think about the pages that I would need to solve the user needs. Since I was designing for a persona who was mostly concerned with music they would listen to, and prefers to shop in person, I chose to put minimal pages and information in front of them. This would help reduce cognitive load and improve efficiency, which was an expressed pain point with Discogs during user research. I also knew there were some ancillary details like price, pressing, color, condition, and so on, which I needed to map out for the product for future features and scaling.

Trove_Sitemap_V1.png

Golden Path

After ideation with the POV/HMW exercise, I decided on the critical path for the app MVP, while also noting potential side-paths. Searching for an album and previewing a track aligned with user motivations and the in-person use case for quick reference to a record before purchasing.

Figma Feature_Golden Path.png

Sketches

With a defined problem, path, and persona as reference, I began ideation of the layouts and interactions, as well as determining necessary screens to design. For me, sketching is a nice and quick way to ideate since it can be rough and exploratory.

Wireframes

I looked at the sketches and chose designs to proceed with. Initially, I only designed the base screens, but added in an onboarding section based on mentor feedback. This helped users to see how the new app differs from other products. I mostly had to decide on spacing, hierarchy, overall layout, and interactions.

Branding

I started with the color palette first, since it feeds into everything else. I took inspiration from 60s and 70s vintage palettes, and jewel tones, which thankfully overlapped pretty nicely. It also gave a vintage -meets-treasure feeling, and aligns well with the brand name.


I made the logo based on what a handwritten label might look like in a record store. The typography header font was selected for legibility. With that header font, I went with one of the recommended pairings on Google Fonts. Type scale was guided by a mix of Material guidelines and type-scale.com.

Wordmark.png
Trove_Color.png
Trove_Typography.png

Design System

After branding and styles were set, I started making the design system, broken down into pages for the different sections of the brand and UI screens. I read articles and watched some videos for inspiration. I made the components following atomic design principles, and utilized Figma’s variants system where applicable.

UI Designs

While placing components into the screens and choosing where the color palette would be applied, I had to do some back and forth between the final UI screens and the design system. Some shades just didn’t work, or failed contrast checks, so I made adjustments to the color palette values. I even swapped the main brand color with the accent, due to challenges with orange as the primary.

Test

Test

Building a prototype, usability testing, and revisions

Prototype (V1)

The prototype followed the Golden Path and added an onboarding flow. While following atomic design principles, I made components of entire screen layouts. I tried using instances on the prototype, but had complications with fixed scrolls and layer orders, so I ended up breaking instances often to make it work.

Usability Tests

The goal of the usability tests was to see if the onboarding made sense and the overall interaction was intuitive and simple. I also had some follow-up questions for additional feedback on issues I may have missed or never considered.

Participants

  • 5 tests

  • Record collectors

Methodology

  • Remote on Useberry

  • Unmoderated and recorded

Key Takeaways

Below are the main observations and feedback from the usability tests.

Pains

  • Onboarding was a bit long and some users wanted to skip it

  • People wanted to search with the tab bar

  • Users tried previewing other tracks

  • Task 3 was not working properly with seeing completion

Gains

  • Navigation is intuitive and works

  • Simpler alternative to Discogs

  • Overall easy to use and could be a viable app

  • High scores on branding and UI feedback

I found the tutorial a little long. Some things I find are fairly standard and don't necessarily need to be pointed out.

Navigates intuitively and does the job.

The problem it may solve is the speed and accessibility of my collection vs wishlist information.

Priority Revisions

After determining key findings from the test results, these are the items I needed to iterate on first.

  • Shorten and combine tutorial screens

  • Allow the tutorials to be skipped

  • Make tab bar search functional

  • Make search entry only possible with the keyboard

  • Specify in the instructions to preview the first track.

  • Fix technical issues with final task of adding to collection

Final Prototype

This is the final result after iterating on the priority issues.

Reflection

Reflection

Thinking back on lessons learned and future plans

What I Learned

The main focus of this project was the design system, and I learned that there are many different approaches to this, for each team or organization. But I did gain some inspiration on how to approach this process.

​

Regarding the rest of the process, I mostly came away with a better understanding of how lean to be with research on a fast project like this, especially for an MVP. Knowing how deep to go can be challenging.

​

I also learned the importance of concise UX writing, especially with the  onboarding tooltips. They can be an annoying thing for users, and I didn’t want to add to that.

Next Steps

Later on, I plan to flesh out the design system, and add more interaction to the prototype to allow users to freely explore the app.

Other projects

bottom of page