Vinylist
iOS Mobile App
Project Background
A theoretical iOS app that helps users catalog records by scanning album barcodes, covers, and inner labels with a camera feature, or enter information manually.

The main purpose of this app is to assist casual to serious collectors maintain, organize, and keep track of their collections.
Spoiler Alert
Starting from scratch, I created an iOS app in a full design process (including branding), that ended with two rounds of user testing of high-fi prototypes.
‍‍
I concluded that Vinylist successfully fulfilled user needs based on task completion rates and timing, paired with users' understanding of app features, functions, and icons.
‍
The lessons I learned were: test your wireframes before spending hours on UI; and don't dismiss the value of user testing for icons.
Memory Fail
"Do I already have this?"
During a cleaning of my bookshelves, I found four copies of Neuromancer by William Gibson. I enjoy collecting books with cool edition covers like Dune or Lord of the Rings, but four of the same edition? Really?

Plus, I found two LPs of Combat Rock...each time I bought a duplicate copy of anything, I (obviously) didn’t remember that I already had one.

This is especially relatable for people who need to manage several - up to hundreds or thousands - of record albums, and here is where Vinylist comes in.
Vinylist's Objectives
Competitors & User Research
Two Competitors
Since I couldn’t be the only person to come up with an app that makes things easier, I chose two popular cataloging apps to study: CLZ Music and Discogs.
  • Common pain point is lack of manual entry
  • Both apps use a barcode scanner
  • Potential issues include unreliable database and ease of adding albums
Talking to Record Collectors
I wanted to invite people to share their experiences, so I sent out a survey, and conducted remote interviews with people who collect vinyls.
  • Every person struggled to remember the albums in their collection, or the ones they wanted to buy
  • A common workaround was keeping a list on their phone or simply internalizing things; but those were often faulty
Mapping Feelings & Thoughts
To start getting an overview of user needs, I gathered survey and interview respondents' comments into a map. This acted as an organizational tool, where I could glance over it and find patterns in users' pain points and goals.
Meet Alessandra
From what I learned of patterns in participants' common needs and pain points, I condensed my earlier findings into a persona who reflects target users.
Mapping Product Features
After referencing the persona and empathy map, I was able to narrow things down into categorizing the most important, core features that the app should address.
View Features Roadmap
Content, Assemble
The App Map
At this stage, I had a list of features I wanted on the app and knew what people like Alessandra needed.

This led to forming the app content: what are the most important screen names? What kind of information will Alessandra need to see: the screens, elements, and information? 
Full-Size App Map
Sketching Possibilities
Sketching helped me brainstorm how categories in the site map will be shown on screens, and think of potential issues and compromises.
Full-Size Sketches
Flows & Wireframes
Alessandra's Interactions
Drawing from the sketches, I created two flows for Alessandra moving through the app's core features and tasks, so I know which screens and content will go where, and if I needed to modify certain parts.
Full-Size User Flows
Content Tetris: Wireframing
Things were coming along nicely! Starting with onboarding, I made a set of wireframes that took into account the site hierarchy, order of information, and what Alessandra will see as she's performing tasks, including states of change.

As in Tetris, the process was like finding several ways to structure and fit elements, and using what I learned earlier to determine what is best for the users.
Full-Size Wireframes
All Together Now
Introducing Vinylist: The UI
Using the hi-fi wireframes and style tile for reference, I applied visual elements to the screens I constructed earlier, creating a flow modeled after Alessandra's interaction.
Full-Size UI Layouts
Testing Vinylist
Interactive Prototype #1
The next step was a round of usability testing. The UI might look cool (I hope), but if people can't understand the functions...
Tasks
View Prototype 1
Round 1 Test Results: Errors Abound
In the test aftermath, these were the four major issues I identified:
1. Add/Remove Albums
  • "I don’t understand why I have to click to remove it, maybe automatically move from my Wish List to my Collection.”
  • “I feel like you should be able to add the album in one click, as opposed to removing it from the Wish List first.”
  • “I expected it to be like a toggle, to switch over to my Collection…I’m used to apps that automatically changes things.”
2. Search & Barcode Icon
  • “The barcode in the search bar made me think it was a graphic, and didn’t function as anything. I would have clicked the barcode if it wasn’t in the search bar.”
  • "I was looking for a scanner option in the main menu."
3. Icon Meanings
  • “It took me a second to realize that this [vinyl icon] was to add it to the collection.”
  • "I’m not sure that I would remember that this button is for adding to my collection.”
4. Unnecessary Locator
  • “If I’m just scanning something I already have, I don’t see why the record store locator would also be on this page.”
Addressing Issues
Revisions
Based on user feedback from round one testing, I made a few revisions:
Prototype Version 2
So with the revisions in place, I set up one more mobile prototype:
Final Prototype
Round 2 Testing
To test whether the revisions addressed the issues, I did another round of testing with a new prototype, with different participants.

In addition to the tasks I detailed in the Round 1 Test, I made sure to ask this time around how they interpreted the icons.
‍
The results? Every participant was able to complete the tasks with little to no issues, including figuring out the icons' meaning.
Wrapping Up
Post-Revisions UI Kit
Once I felt confident that the revision and prototypes were working smoothly, I created a UI Kit with the revised elements, including interactive and different focus states for the app's design system.
View Even Larger UI Kit
Lessons Learned
Looking Forward
The work done in the project set the core foundation for Vinylist, but in the real world, it would have a lot more work, features-wise and technical feasibility.

Areas to explore would be  keeping users motivated to consistently use the app, personalization and customization, social interactions, and a buying or selling platform.
Lessons & Conclusion
Don't underestimate the value of planning, even if it takes time! I spent days just for planning, and was worried that I was losing progress, but am glad I took the time to write down goals, methods, potential issues, and other details that made the process go much more smoothly.

I realized that what I should have done was test sketches and rough wireframes (no matter how ugly or uneven all my lines and boxes were), before spending so much time on making hi-fi wireframes and UI mockups, which could have saved time and grief for the test participants.

I had overlooked testing icons, which serve an important role in communicating meanings and actions. This mistake contributed to a pattern in misunderstanding functionality and meaning.
‍
Gaining experience in brainstorming, planning, and designing an application from start to finish was a challenge, but also opened the door for future challenges that I look forward to.
< Portal 2: UX EvaluationColumbus House Rabbit Society >