Creating a medium for music lovers to share and discover the music they love.
UX / UI Design
Role
Project Lead
Tools
Figma, Miro, Adobe illustrator
Overview
Replay is a social mobile application designed for the purpose of sharing, rating, and discovering new music to listen to. It is a space for music lovers to share and openly discuss their favourite music or what they have recently been listening to.
Within the app users can create posts where they 1.) choose a song, 2.) give it a rating, 3.) add their thoughts (optional), and post it to the app. User can add friends and browse through posts.
The Problem
Do you ever find yourself bored of your current playlists? Can't seem to find any new music that interests you? I've encountered this problem many times with no apparent solution out there to help solve this. I'd often find myself listening to the same artists/playlists for weeks, eventually getting bored and not wanting to listen to anything. As a music lover, I want to find a solution to this.
Market Analysis
People aged 18-29 who listen to music everyday
listen every day: 51%
People aged 18-29 who use social media everyday
Use every day: 84%
User Investigation & Analysis
Now that I had my target market identified, I began my investigation. This consisted of 1:1 interviews with potential users within my target age bracket (18-29). In total I interviewed 4 people. Each interview followed a the same script which allowed me to stay on track during each interview. Additionally, each interview was recorded with the participants consent so I could play back each interview and capture all relevant insights.
After gathering and comparing my insights I created an affinity diagram to compile and analyse my data. Using sticky notes I arranged and grouped data based on similarities to discover insights from my users.
Key User Insights
1
Sociability
All participants expressed how they are interested in what their friend's and family's listening habits are.
Lack of Process
None of the participants had a clear process in relation to solving the problem.
3
Music Streaming
All participants used mobile streaming services as their primary way of listening to music.
Low-Fidelty Wireframes
1st Design
1st Design Flaws
Using the data recorded from my market and user research, and using my wireframes as a guide, I created a high fidelity prototype using Figma. I tested this prototype on three users through the use of usability testing. Through heuristic evaluation and the insights gathered from my usability testing I discovered the following issues with my first design:
Design Improvements
1
Logo
I changed my logo to have a cleaner and more modern look, that more closely reflects the products identity.
Impact: The logo presents a better brand identity for my product.
2
Wider UI
I made my UI bigger, stretching the image and content and removing the un-used space to fill the viewport.
Impact: Content is larger and easier to find and interact with. UI flows more fluidly
3
Interaction Buttons
I re-positioned my interaction buttons to below the post image instead of on top of the image.
Impact: The buttons are much easier to find and follows the users mental model of where they expect these buttons to be.
4
Navigation Bar
I removed the "Add a post" button from the top of the screen and included a navigation bar.
Impact: Allows user to flow and navigate through the apps features more efficiently.
5
Caption Button
I made the caption button bigger and allowed more space for the users to type.
Impact: Users can identify button quicker and larger text inputs are visible.
6
Rating Button
I added an input text field to the button that allows user to type their rating.
Impact: Users can identify button easier and allows for more specific input.
7
Share Button
By applying Fitt's Law I enlarged the share button to take up a wider space on the viewport.
Impact: Users can identify and select the share button with greater efficiency.
Final Design
How Does it Work?
Conclusion
What went well?
Acknowledgment of earlier mistakes resulted in a superior final design.
Product offers the user a medium to explore, discuss, and share their music taste, offering a new way to enjoy their hobby.
A strong logo and name were developed, establishing a solid brand identity for this product.
What could be improved?
My first prototype had significant issues. The user flow lacked deatail and the interface aesthetically un-appealing. This resulted in development of a second high fidelity prototype which delayed the project.
Lesson: Solidify design choices in future before progressing onto a high fidelity prototype.
Insufficient usability testing was carried out before development of solution. This resulted in poor design decisions, not backed by research
Lesson: Ensure a substantial level of user research is conducted before developing the final prototype.