💼 Role(s): UI Designer 🛠️ Languages and Tools: Figma 🗓️ Timeline: September - December 2021 👥 Team: Ena Manjgo and Tara Rao-Pandit
The challenge Finding new music is a task with more resistance than necessary. Scrolling through music app recommendations only to try and “skip to the good part” is time-consuming and sometimes a little bit boring. Our team sought out to make music exploration fun and curated experience.
The idea Tunely is a mobile app that offers a fun, fast-paced, and social solution. Its main function, feeding the user music snippets that they can swipe right or left to save or discard respectively, takes all the work out of finding and sharing songs.
Defining the problem To better understand the problem space, we identified the pain points in browsing song recommendations:
Sharing music with friends is cross-platform (i.e. sending links)
Music app recommendation algorithms are typically inaccurate
Skipping to the most interesting part of the song is a long process of trial and error
Adding songs to playlists can be cumbersome
User personas Once we had a general idea of the direction we wanted to go in, in terms of problem definition and app functionality, we decided to develop user personas. This involved taking a deeper look into who our target audience was and what their key needs, wants and pain points were. This would later inform our design decisions.
Primary user
Secondary user
Setting requirements After understanding our user groups, we developed the following requirements for app features:
Seamless chat functionality to share songs with friends
A data-entry stage for accurate, algorithm-based recommendations
Algorithm-curated song snippets to show the user the most interesting part of the song
A card-swiping interface to speed up the browsing process
A trending tab to swipe through popular songs
Information architecture To get a clearer understanding of the user flow, we developed an information architecture diagram. This demonstrates how the user navigates information through our application.
Low-fidelity wireframes After understanding the information architecture, we developed low-fidelity wireframes to get a clear picture of the layout and organization of the app. This allowed us to ensure a seamless user experience from screen to screen, without worrying about visuals.
Iterating on the low fidelity wireframes Once complete, we noticed missing features of the current wireframe. These include:
A centralized settings tab
A sequence of onboarding frames to gather user information
Options to allow app access to contacts and configure notifications
