top of page
![](https://static.wixstatic.com/media/86f8a0_9981ad700d1e42e2a631ec9d0d08e128~mv2.jpg/v1/fill/w_288,h_203,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/86f8a0_9981ad700d1e42e2a631ec9d0d08e128~mv2.jpg)
AMUGO
A life-changing music streaming app
Duration
2 weeks
Team
Agatha Leung
Janice Lee
Terence Sin
Queenie Szeto
Role
UI/UX designer
Work
User research
Competitor research
Usability Testing
Wireframing
Prototyping
Overview
"Music brings people together." That's a saying that we hear all the time but how does it really connect people? In my very first UI/UX project, my teammates and I decided to build a music streaming app for young professionals, with the ideas of breaking boundaries and bringing music lovers together.
Introducing AMUGO
What exactly is AMUGO?
AMUGO is the perfect music streaming app for young professionals. It is a holistic app for them to enjoy music and at the same time meet new people. Music is good for one, but better if enjoyed with others.
Socialising with kindreds
One of our highlights would be the real-time friend list, allowing you to see the one listening to the same song as you do. With our AI matching system that analyzes your search history and music preference, you will be recommended with your "Best-match".
![amugo 1.png](https://static.wixstatic.com/media/86f8a0_fc51eb5126764975a852d2c0d8958f6f~mv2.png/v1/fill/w_151,h_303,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/amugo%201.png)
![amugo 2.png](https://static.wixstatic.com/media/86f8a0_93fd7e0cfc3e4283a06ac08eb61c7bd8~mv2.png/v1/fill/w_151,h_303,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/amugo%202.png)
![amugo 3.png](https://static.wixstatic.com/media/86f8a0_addfd35557274e9abc3ef19a363a0ba2~mv2.png/v1/fill/w_151,h_303,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/amugo%203.png)
![amugo .png](https://static.wixstatic.com/media/86f8a0_75a785b44c534594984a34633daaeea1~mv2.png/v1/fill/w_152,h_304,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/amugo%20.png)
Building your community
As you choose to connect with your "besties", you can create different events to strengthen your bond. You can have your own chatrooms, organise fans meeting, and other social events.
Customizing own interface
We allow customization of backgrounds and icons. Users can choose from our default backgrounds, or upload their own photos and use our editing tools to make minor alterations.
![amugo9.png](https://static.wixstatic.com/media/86f8a0_eb3f072ee504460fb08e15f2bb74b121~mv2.png/v1/fill/w_151,h_303,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/amugo9.png)
![amugo7.png](https://static.wixstatic.com/media/86f8a0_71373a7743294cb881b7a95f7168ea15~mv2.png/v1/fill/w_151,h_303,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/amugo7.png)
![amugo 6.png](https://static.wixstatic.com/media/86f8a0_dda9d73105314824bcbb454723f5f8d6~mv2.png/v1/fill/w_151,h_303,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/amugo%206.png)
![amugo5.png](https://static.wixstatic.com/media/86f8a0_f170dc267e324ed881bfb5116a566245~mv2.png/v1/fill/w_151,h_303,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/amugo5.png)
Showcasing talents
Upon the creation of their own interface design, users can upload it to our theme store for others to download. They can either share it for free or choose to make small profit out of it.
How do we get there?
Design Process
The design process of this project is based on the Double Diamond Model. The four key phases namely Discovery, Definition, Ideation, and Implementation are incorporated in designing the product. The tasks at each stage are shown below
![dd.png](https://static.wixstatic.com/media/86f8a0_47e6aaf6a3514ecb9cec154aab403f44~mv2.png/v1/fill/w_75,h_53,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/dd.png)
Target Audience and Hypothesis
![briefcase.png](https://static.wixstatic.com/media/86f8a0_084ae28e6f2d48be99cbc61e10a68521~mv2.png/v1/fill/w_78,h_78,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/briefcase.png)
Young Professionals
-
Not much leisure time
-
Occupied with work
![group.png](https://static.wixstatic.com/media/86f8a0_0402678d73eb46f2bd71434b6b11cbe1~mv2.png/v1/fill/w_78,h_78,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/group.png)
22 - 30 years old
-
Listen to music while commuting
-
Financially stable
Understand our users
In the Discovery phase, we would like to empathize with our target users, understand their needs and concerns, and thus find out their currents painpoints while using music streaming apps. After setting up some hypothesis about our potential users, we would like to verify them by conducting both quantitative and qualitative research, and at the same time to gain deeper understanding on what they really need.
Focus questions
-
What are our users' most ideal features?
-
What are their comments on the current music streaming apps?
-
What are the difficulties/challenges ever faced while using music streaming apps?
Define our problems
After collecting 28 responses from the online surveys and 7 recordings from users interviews, we move on to affinity mapping to analyse the data and thus define the pain points. We clustered information by topic and decided to tackle the problems that were faced by most.
![Screenshot 2021-02-25 at 11.26.21 AM.png](https://static.wixstatic.com/media/86f8a0_f7122e06f1e34ff7a6d62adc1359c3a3~mv2.png/v1/fill/w_111,h_84,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Screenshot%202021-02-25%20at%2011_26_21%20AM.png)
Painpoints
-
Lack of personalisation
-
Lack of socialisation
Problem statement
How might we connect people with music?
Personas
![amugo persona 2.png](https://static.wixstatic.com/media/86f8a0_a0b00e69169242f19946168f03065bde~mv2.png/v1/fill/w_80,h_47,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/amugo%20persona%202.png)
![amugo persona 1.png](https://static.wixstatic.com/media/86f8a0_bb223609489843e8bbf13878bf875f54~mv2.png/v1/fill/w_80,h_47,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/amugo%20persona%201.png)
Crazy 8
To come up with possible solutions that addresses users' concern over the lack in socialising and customising features, we performed the Crazy 8 for idea generation.
![Screenshot%202021-02-25%20at%2012.46_edi](https://static.wixstatic.com/media/86f8a0_e28189bef235427494619c70a18d7726~mv2.jpg/v1/fill/w_137,h_66,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/Screenshot%25202021-02-25%2520at%252012_46_edi.jpg)
Insights and solutions
People would like to have their unique app interface.
We would like to let them customize their own background and even icons so as to help them build a sense of belonging to the app
After entering the workforce, people do not have spare time to socialise and relax.
We would like to help users relax while listening to music and at the same time expanding social circle, meeting new friends
Get our ideas developed
User Journey map
1. Helps us understand the structure of the app
2. Thorough overview on how our users interact with the product as well as their emotional feedbacks over time.
![amugo User journey map.png](https://static.wixstatic.com/media/86f8a0_7352cc6ed1fd43268bc9f6c2b8538b5a~mv2.png/v1/crop/x_99,y_59,w_1049,h_727/fill/w_59,h_41,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/amugo%20User%20journey%20map.png)
Service Blueprint
![amugo service blueprint.jpg](https://static.wixstatic.com/media/86f8a0_416daad528954ee690326b9d90e1c139~mv2.jpg/v1/crop/x_63,y_0,w_2153,h_1412/fill/w_100,h_65,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/amugo%20service%20blueprint.jpg)
Visualisation of connections between different service components, that are linked with the touchpoints in the previous user journey map.
Sitemap
![Decision mapping.jpg](https://static.wixstatic.com/media/86f8a0_7f5c14cc426947c7a103ee330fbed0f6~mv2.jpg/v1/fill/w_147,h_62,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/Decision%20mapping.jpg)
Storyboard
![12格漫畫.png](https://static.wixstatic.com/media/86f8a0_af8ce9b964094cd7961b8c37d8d5b1dd~mv2.png/v1/fill/w_82,h_75,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/12%E6%A0%BC%E6%BC%AB%E7%95%AB.png)
Deliver our final product
High-fidelity Wireframing
![wireframe 1.png](https://static.wixstatic.com/media/86f8a0_2f667cd11d1544f08600f4bf725e85be~mv2.png/v1/fill/w_60,h_129,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/wireframe%201.png)
![wireframe2.png](https://static.wixstatic.com/media/86f8a0_9ac5c7f229014cdb9620e23aa9069236~mv2.png/v1/fill/w_60,h_129,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/wireframe2.png)
![wireframe3.png](https://static.wixstatic.com/media/86f8a0_dc10d952474b4378947e84963d05111c~mv2.png/v1/fill/w_60,h_129,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/wireframe3.png)
![wireframe4.jpg](https://static.wixstatic.com/media/86f8a0_dabaf8ff74c74104931ebcbc55d696bf~mv2.jpg/v1/fill/w_60,h_129,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/wireframe4.jpg)
![wireframe6.jpg](https://static.wixstatic.com/media/86f8a0_2a93c88f472042b6aa9234e7aaeff69a~mv2.jpg/v1/fill/w_60,h_129,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/wireframe6.jpg)
![wireframe5.jpg](https://static.wixstatic.com/media/86f8a0_346275fbc1e642c1bfdc7bf35ae43e44~mv2.jpg/v1/fill/w_60,h_129,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/wireframe5.jpg)
Major Takeaways
What have I learned?
My very first UI/UX project is to design this mobile app and this 10-days time is super fun. I have the chance to work from scratch, from ideation to final product delivery. This consolidate my skills as a all-rounded UX designer.
Set Research Questions
The nature of quantitative and qualitative research are very different and it takes more time than we thought to come up with the whole set of questions.
Paper prototyping
After generating the low-fidelity wireframes on paper, we did usability testings to first detect if our potential users had any problems with that. I find this super helpful as it acts as an early "intervention" and we can make alterations before moving on to prototyping with Figma.
Our Design
Design Process
Define Problems
Develop Ideas
Deliver Products
Major Takeaways
bottom of page