Sharezy
Mobile App
UX // UI design case study
Project Overview
Sharezys is a music-sharing app that enables users to connect digitally and in person through the power of music. Sharezys includes features such as listening to and sharing your favourite music and events, co-collaborating playlists, and booking tickets to live music gigs in your local area. Sharezy allows users from all backgrounds to have access to a user-friendly platform that will empower them to enjoy music with anyone, near or far.
Purpose
This case study was part of the Google UX Specialisation offered by Coursera. I used this as an opportunity to gain experience designing for mobile devices and apply UX theory to a practical project. The App was built from starting base, so is currently an MVP.
​
Skills
Wireframing
Prototyping
User Research
UX Design
Prototyping
Visual Design
Usability Testing
Tools
Figma
Miro
G Sutie
Adobe Suite
Role
UX Designer/Researcher
​
Problem Statement
Sharezy users need a way to share songs and live music events through the app because they would like to share musical experiences with those close to them in a meaningful and efficient way.
​
The Goal
Sharezy wants to allow users from all backgrounds to have access to a user-friendly platform that will empower them to connect through the power of music with anyone, near or far.
​
Business Need
Sharezy needs to provide users with an effective user-friendly way of sharing music within the application, in order to keep up with their competitors. They also need to include a way to generate more revenue, as the app subscription fee is small. They hope to achieve this by promoting ticket sales for live concerts within the app, Sharezy will generate profit by receiving a proportion of ticket sales that are sold via the Sharezy app.
Double Diamond Design Approach
The design framework that was chosen for this case study was the Double Diamond. What makes the Double Diamond approach the perfect framework for understanding customers, is it's emphasis on divergent and convergent thinking.
​
-
Divergent thinking -- Think broadly, with an open mind, and consider anything
​
-
Convergent thinking -- Think narrowly, bring back focus, and identify one or two key problems and solutions
To allow innovative problem-solving, ideas, and solutions are created and refined twice in this model. At the beginning to confirm the problem definition, and then a second time to create the solution.
Discovery Phase
In order to better understand the user and create insight into the problems, I conducted a variety of exercises as part of the discovery phase of the Double Diamond approach.
​
Discover
User research
Competitive Audits
Define
Personas
User Journey Maps
Problem Statements
Personas
By summarising the common goals, behaviors, motivations, and frustrations observed from my research, I created two primary user personas with different requirements, from completely different backgrounds.
Competitive Audit
A Competitive Audit was conducted with other similar offerings in the market. This helped me learn more about the competition, and understand their product offering in more detail. This also helped me identify potential opportunities
where Sharezy could outperform them.
​
Some of the critical observations and takeaways from the Competitive Audit:
​
-
Competitors are offering a competitive price for subscription
-
Competitors all offer a unique value proposition in addition to music sharing
-
Competitors have easy access to all items via a clear menu bar
-
Competitors offer a user-friendly search function (time-saving)
-
Call to action is easy to locate and high contrast colours for visibility
-
Competitor apps and websites are easy to navigate
-
Some competitors are advertising events/live music
User Journey Map
I mapped out what I imagined Lisa's journey would look like when trying to share music with her dance studio staff.
​
This gave me some real insight into what pain points could appear for this persona in particular. This also gave me an understanding of what features could be key for a positive user journey to ensure all users are considered.
Develop & Design Phase
Using brainstorming and sketching techniques, I generated ideas to solve clearly defined design problems.
Ideate
Sketches
User flows
Low-fidelity Prototypes
Sketching Initial ideas...
Keeping in mind the opportunity uncovered in the competitive analysis, I leveraged the Crazy 8's method to quickly come up with potential design ideas.​ Sketching is a quick and efficient way to brainstorm layout ideas​
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.
For the home screen, I prioritised a tile screen to help users save time by navigating where they want to go from the home page.
​
​
Story Board Sketching
I created storyboards that visually predict and explore a user's experience with the application. This activity helped me understand the flow of the user's interaction with the product over time, giving a clear sense of what's really important for users.
The Story drawn out in these sketches depicts Lisa's journey using the Sharezy app.
​​
Leveraging User Flows
I created a user flow to have an idea of how customers would use the app which provided an overview of how things would connect as an end-to-end solution. Although there are multiple user flows, this flow map represents the user journey of finding a song the user would like to share with a specific contact.
-
The customer journey begins with searching the Sharzey app
-
The user interface is clean and clear, not intimidating or overwhelming
-
The customer is able to understand where to create a playlist as the
the CTA button is clearly displayed -
The customer is able to search songs and add them to the list using the search function that is located at the top of the screen
-
The customer is able to easily share the playlist using access to her contacts
-
The customer understands she has successfully sent the playlist as the app displays clear prompts to inform the customer
Wireframing for Quick Iteration
Following the sketches I created on paper, digital wireframes were made in Figma. Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected, was selecting a song and sharing it with a contact.
It was easier to make changes following my first round of user feedback in a usability study.
​
Key Pain Points Identified
​
-
It was observed that most participants did not feel as though they had the option to review their song choice and message before sending.
-
It was observed that most participants did not intuitively select the envelope share icon as a prompt to share.
-
It was observed that some participants were not as familiar with the instruction to share via ‘iMessage’
Refine the Design
Taking into consideration lessons learned from the research, design iterations, and insights from my usability studies, I was able to land on a final design that was feasible and met user needs.
Prototype
Mockups
High-Fidelity Prototypes
Test
Usability Testing
High-Fidelity Prototype
The final high-fidelity prototype presents a clear user flow for sharing music. It also met user needs for sharing local gigs and events as more customisation.
Final Design
Usability Testing
After creating UI components, I conducted usability tests and compiled a few key points for improvement on the visual design. I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
​
“The bottom Nav was unnecessary and makes the app feel ‘old and clunky."
“Some apps use a specific profile section some apps have a hamburger menu to select your profile from. It should be the same across all apps, it’s confusing when you have to learn how a new app works!"
“Too many screens with personalise and review your message”
“I think I would prefer to see three dots to suggest 'see more' as opposed to a plus sign, plus sign suggests you are adding something”