TuneUp Music App
TuneUp Music App
TuneUp Music App
Overview
What is TuneUp?
TuneUp is a digital online community app designed to enable users to connect with each other based on shared music interests.
The Problem?
Currently, the most popular music streaming apps don't have as high an emphasis on community features, this is where TuneUp comes in as an alternative music platform. It still has all the great features of music streaming apps such as offline downloads and smart playlists but also has community-driven elements too such as groups and scrobbling.
My contribution
Product strategy
Brand design
Product design
The team
x1 Product designer
Year
2021
Overview
What is TuneUp?
TuneUp is a digital online community app designed to enable users to connect with each other based on shared music interests.
The Problem?
Currently, the most popular music streaming apps don't have as high an emphasis on community features, this is where TuneUp comes in as an alternative music platform. It still has all the great features of music streaming apps such as offline downloads and smart playlists but also has community-driven elements too such as groups and scrobbling.
My contribution
Product strategy
Brand design
Product design
The team
x1 Product designer
Year
2021
Overview
What is TuneUp?
TuneUp is a digital online community app designed to enable users to connect with each other based on shared music interests.
The Problem?
Currently, the most popular music streaming apps don't have as high an emphasis on community features, this is where TuneUp comes in as an alternative music platform. It still has all the great features of music streaming apps such as offline downloads and smart playlists but also has community-driven elements too such as groups and scrobbling.
My contribution
Product strategy
Brand design
Product design
The team
x1 Product designer
Year
2021
Process
1. Design System
The first step of the project was to come up with a design system of how the base design of the app UI will look visually. Below you can see the selected fonts, font styles, brand colours and brand logo.
2. Wireframing
Once the features and design system were finalised, next step was to start wireframing out how the screen designs would look, behave and flow together.
At the beginning of my design process, I created wireframes for testing purposes.
Doing wireframes first allowed me to experiment with a variety of ideas on how each screen could be laid out and was very helpful to get a good idea of the user flow and journey.
These wireframes were done in a low fidelity format but shared common UI elements that could then be restyled for the final versions once signed off.
These wireframes were designed and prototyped using Adobe XD.
Below you will see all the final iterations of the wireframe designs for the main screens.
3. High Fidelity Mockups
Once the wireframes were finalised, the next step was to create the high fidelity versions of the wireframes, using the previously created design system.
UI Design
Once I tested out all usability mistakes, I started designing the final screens in Adobe XD.
As I had done the base wireframe layouts already in Adobe XD it was just a case of styling the layouts to match the design system.
Getting to see the design come to life at this point was particularly exciting!
Below you can see all the final styled versions of the high fidelity mockups.
Process
1. Design System
The first step of the project was to come up with a design system of how the base design of the app UI will look visually. Below you can see the selected fonts, font styles, brand colours and brand logo.
2. Wireframing
Once the features and design system were finalised, next step was to start wireframing out how the screen designs would look, behave and flow together.
At the beginning of my design process, I created wireframes for testing purposes.
Doing wireframes first allowed me to experiment with a variety of ideas on how each screen could be laid out and was very helpful to get a good idea of the user flow and journey.
These wireframes were done in a low fidelity format but shared common UI elements that could then be restyled for the final versions once signed off.
These wireframes were designed and prototyped using Adobe XD.
Below you will see all the final iterations of the wireframe designs for the main screens.
3. High Fidelity Mockups
Once the wireframes were finalised, the next step was to create the high fidelity versions of the wireframes, using the previously created design system.
UI Design
Once I tested out all usability mistakes, I started designing the final screens in Adobe XD.
As I had done the base wireframe layouts already in Adobe XD it was just a case of styling the layouts to match the design system.
Getting to see the design come to life at this point was particularly exciting!
Below you can see all the final styled versions of the high fidelity mockups.
Process
1. Design System
The first step of the project was to come up with a design system of how the base design of the app UI will look visually. Below you can see the selected fonts, font styles, brand colours and brand logo.
2. Wireframing
Once the features and design system were finalised, next step was to start wireframing out how the screen designs would look, behave and flow together.
At the beginning of my design process, I created wireframes for testing purposes.
Doing wireframes first allowed me to experiment with a variety of ideas on how each screen could be laid out and was very helpful to get a good idea of the user flow and journey.
These wireframes were done in a low fidelity format but shared common UI elements that could then be restyled for the final versions once signed off.
These wireframes were designed and prototyped using Adobe XD.
Below you will see all the final iterations of the wireframe designs for the main screens.
3. High Fidelity Mockups
Once the wireframes were finalised, the next step was to create the high fidelity versions of the wireframes, using the previously created design system.
UI Design
Once I tested out all usability mistakes, I started designing the final screens in Adobe XD.
As I had done the base wireframe layouts already in Adobe XD it was just a case of styling the layouts to match the design system.
Getting to see the design come to life at this point was particularly exciting!
Below you can see all the final styled versions of the high fidelity mockups.
Outcome
Conclusion
In conclusion, this was a very fun UI project to explore! It was great being able to experiment with various ideas for screen designs and I really hope an app like this can be created or to have features like this included in popular music apps today.
Outcome
Conclusion
In conclusion, this was a very fun UI project to explore! It was great being able to experiment with various ideas for screen designs and I really hope an app like this can be created or to have features like this included in popular music apps today.
Outcome
Conclusion
In conclusion, this was a very fun UI project to explore! It was great being able to experiment with various ideas for screen designs and I really hope an app like this can be created or to have features like this included in popular music apps today.