iD: Music Search Site
UX/UI Design, Responsive Website, Concept
Project Timeline
7 weeks (Aug 2022 – Sep 2022)
UX/UI Designer
UX Researcher
Branding/Creative
My Roles
OptimalWorkshop
Miro
Adobe Illustrator
Figma
Maze
Tools
iD is a music search website for users who want to find DJ sets’ tracklists in one spot. This website allows the users to get the tracklists, track information, and available streaming platforms of each track through YouTube and SoundCloud links. In addition, the users are able to check related DJ sets and tracks others based on search results and find the DJs’ other popular sets from the website.
Context
Users encounter finding specific track information or tracklists until other users leave track information on comments or artists upload it to media posts with live DJ sets (YouTube or SoundCloud). They experience unnecessary searching or waiting time in order to get the information they need.
Problem
- Make it easier for users to get tracklists or a specific track without waiting for other users’ comments from YouTube/SoundCloud or surfing on the internet
- Give users track information and which streaming platforms have the track
- Recommend DJ sets and tracks that are related to search result
- Users can share tracklists with others via others via link
- Users can find other DJs’ sets in popular order
Opportunities
Research
In the research phase, I conducted competitive research and user interviews. I expected to find which platforms are mainly used to search for tracks and tracklists, what users have experienced in searching, and how users think about existing music searching websites or apps.
Methodologies & Research Goals
- Find what music searching platforms users use mainly
- Find why users use the platforms
- Understand what users think about the existing music searching platforms
- Understand users’ tracks and tracklists searching experience
- Understand users’ needs and pain points of searching tracks and tracklists
Objectives
- People who listen to DJ sets and have experience with tracklists searching
- People who are in the music industry
Participants
I conducted user interviews with 4 participants who are general users and DJs, listen to DJ sets regularly and have experience in searching for tracklists. Interviews helped me recognize each participant’s pain points and goals of searching tracklists online. Findings from the user interviews led me to generalize a persona.
Competitive Analysis
Researching 3 different online music search services gave me each competitor’s strengths and weaknesses. Through this process, it helped me to understand what information is required on the service, how the competitors show users information and how they prioritize it. It gave me a better understanding of what iD website has and how the brand provides users its services in a clear way.
User Interviews
Interview Findings
Define
After collecting data and understanding multiple users’ needs and frustrations, I created user persona and empathy map. Through the user persona, I was able to understand what features and information I should add to the ID website to meet goals and also how I minimize pain points for users. The empathy map also helped me to see what ideal product would be and what I should focus on the website to build a usability product. These helped me finalize main features, goals for the website and build task flow and user flow.
User Persona & Empathy Map
I conducted closed card sorting that shows how 8 participants categorize 37 cards. Overall participants had similar sorting ideas such as “Event/specific DJ list page”, “Search”, “Recommended Musics”, and “User actions”. One of them showed me “Search and sort options” with some cards. It was easy to get to know how to build a sitemap based on the sorting results.
Card Sorting
I created a sitemap to present the overall structure of the ID website shows the order of navigation, its contents and features. I was able to see the website structure and imagine how it would look, this led me to create task flow and user flow to understand how specific flows work in the website.
Sitemap
Task flow is a method to understand and visualize the most necessary actions that would need to be performed by a user to search, get search results, check related contents, sharing, and add to my list. It gave me an idea of creating a user flow to provide a little bit more complex interactions which could be possible in using the website.
After the task flow, I created a user flow to show how a user acts at each decision point.I learned what I need to create to provide enough information to the user in order to make them understand ID’s services.
Task Flow & User Flow
Ideate
Sketches of a few design layouts of the website with required elements such as search, main navigation, icons, CTAs, and cards with images and texts. Through this process, I was able to predict which layout would work well for good usability, it led me to create low-fidelity wireframes in Figma.
Pen & Paper Wireframes
It is page layouts in greyscale that would be required for building high-fidelity wireframes. It helped me understand overall layouts of the ID’s responsive website before seeing the high-fidelity design and organized information hierarchy via visual.
Low-Fidelity Wireframes
For establishing iD’s brand identity, I gathered visual ideas and created a mood board. It was a good way to find how I want to show the brand identity and iD’s website, it gave me a defined idea of brand identity and UI kit. I wanted to put modern, energetic, young and minimal aesthetics, I used a sans serif font and black, neon, and white colors for targeting young generation. I took inspiration from minimal and modern design pieces.
Brand Identity & UI Kit
High-fidelity wireframes of iD’s responsive website with brand identity and color palette, images and copies. Creating a prototype based on the brand style made me feel what the actual prototype would look like. Also, I was able to understand if the sitemap and the mockups I created were coherent.
High-Fidelity Wireframes
Prototype
I created a prototype with the high-fidelity wireframes. It showed all the possibilities that a potential user can make.
High-Fidelity Prototype
Usability Testing
I conducted a usability test for iD’s responsive website via Maze to understand potential user’ performances when they proceed with 6 tasks. It gave me a chance to see what they thought of my output, how they complete the given tasks and why they incomplete the tasks. I was able to analyze what worked well and what needed to be improved. It also helped me to iterate the high-fidelity wireframes based on findings from the user testing.
User Testing via Maze
After the user testing, I created an affinity map based on the testing results and users’ comments. It showed me that which part of the first prototypes worked well and which part made that users got confused. It also gave me a direction to improve design for better usability.
Affinity Map
Iterate
Based on a few suggestions from the users, I edited desktop and mobile high-fidelity wireframes. I changed color of Share and Liked icons and moved them to content area below the header image of search results page since some users mentioned that the icons were less noticeable and the icons on mobile were too close to the top Liked icon on the navigation bar. Placing the icons to the content area made more sense to explain what the icons do in the page. Also, I noticed that the Liked icon was hard to tell “List”, I changed “My List” to “My favorite”.
Improvements
Reflection
From researching to creating the final mockups, I was able to learn what users need from the music search website and what they care about the most when they browse information. Also, the processes gave me how to build an intuitive, usable, and responsive product to meet both business’s and users’ goals.
What I learned…
Next Steps
- Add a toggle to site appearance change to give users a display option on desktop and mobile. (Dark mode to light mode, vice versa)
- Add a user comment (flag) feature on the search result page to verify correct track information.
- Further testing and iteration: I would like to experiment with how the display option and comment features can elevate users’ searching and browsing experiences.