Overview:
The objective of this project was to create a mobile interface for a new music player. one suited for a 'light theme' design that will stand out from the competition. At the end of the design phase
Problem:
Create an interface that will stand out from the crowd. The music player market is fully saturated and this competitor needed to bring something different to the table.
Solution:
Picking a unique colour palette and designing the app based on a market leader allowed me to create 'the same but different.' The colour palette is what gives this design its character and would certainly make it stand out from the crowd.
Process:
My process entering this project was to keep things simple, whilst also having some fun.
My aim was to complete the following:
User Flow Diagram
Moodboard
User Persona
Sketching ideas
Wireframes
Style Guide
Design and Iterate
Sketch Ideas:
Sketching is a useful tool in design. I used it here to establish quick ideas on screen layouts. In this section I was not beholden to any one idea, allowing me to be free and loose with my style.
Lessons Learned:
This project taught me a more rounded idea of the UI design process, incorporating very basic UX elements. This allowed me to empathise with my target user on another level. In my opinion, this gave my design process a little more weight.
Style Guide:
In order to keep my visual language consistent, I designed a style guide that would act as a mini Design System. Giving me the elements and context for my design.
I focussed on colour, typography and icons.
Mood Board:
A visualisation tool to get me thinking about my design process and collate reference of UI that works (and doesn’t). This allowed my to free up my mind whilst having a goal in mind.
I aimed to gather as much reference as possible, especially for a 'light themed' music app. This process allowed me to discover trends and understand what traits the different designs shared.
User Flow Diagram:
Using an already established music streaming platform, I developed a user flow diagram that would help me map a typical user flow of the app.
Design & Iteration:
This stage was really for me to explore, I had a formula and template (wireframes) that would lead me down a path, but I also had ideas I wanted to try.
This is where I let the magic happen, ultimately not all of them worked, however it was fun and freeing to try an idea no matter how weird it would seem.
User Personas:
To help me understand who I was designing for, I created a typical user persona.
Wireframes:
A two step process utilising sketching and digital tools. The early sketches were idea creation allowing me to explore.
The digital wireframes were used to help me consider spacing, hierarchy and image placement. It also allowed me to maintain consistency throughout my design.
Final Designs:
Overview:
The objective of this project was to create a mobile interface for a new music player, one suited for a ‘light theme’ design that will stand out from the competition.
Overview:
The objective of this project was to create a mobile interface for a new music player, one suited for a ‘light theme’ design that will stand out from the competition.
Problem:
Create an interface that will stand out from the crowd. The music player market is fully saturated and this competitor needed to bring something different to the table.
Problem:
Create an interface that will stand out from the crowd. The music player market is fully saturated and this competitor needed to bring something different to the table.
Solution:
Picking a unique colour palette and designing the app based on a market leader allowed me to create ‘the same but different.’ The colour palette is what gives this design its character and would certainly make it stand out from the crowd.
Solution:
Picking a unique colour palette and designing the app based on a market leader allowed me to create ‘the same but different.’ The colour palette is what gives this design its character and would certainly make it stand out from the crowd.
Process:
My process entering this project was to keep things simple, whilst also having some fun.
My aim was to complete the following:
User Flow Diagram
Moodboard
User Persona
Sketching ideas
Wireframes
Style Guide
Design and Iterate
Process:
My process entering this project was to keep things simple, whilst also having some fun.
My aim was to complete the following:
User Flow Diagram
Moodboard
User Persona
Sketching ideas
Wireframes
Style Guide
Design and Iterate
User Flow Diagram:
Using an already established music streaming platform, I developed a user flow diagram that would help me map a typical user flow of the app.
User Flow Diagram:
Using an already established music streaming platform, I developed a user flow diagram that would help me map a typical user flow of the app.
Mood Board:
A visualisation tool to get me thinking about my design process and collate reference of UI that works (and doesn’t). This allowed my to free up my mind whilst having a goal in mind.
I aimed to gather as much reference as possible, especially for a ‘light themed’ music app. This process allowed me to discover trends and understand what traits the different designs shared.
Mood Board:
A visualisation tool to get me thinking about my design process and collate reference of UI that works (and doesn’t). This allowed my to free up my mind whilst having a goal in mind.
I aimed to gather as much reference as possible, especially for a ‘light themed’ music app. This process allowed me to discover trends and understand what traits the different designs shared.
User Persona:
To help me better understand who I was designing for, I created a typical user persona
User Persona:
To help me better understand who I was designing for, I created a typical user persona
Sketch Ideas:
Sketching is a useful tool in design. I used it here to establish quick ideas on screen layout. In this section I was not beholden to any one idea, allowing me to be free and loose with my style.
Sketch Ideas:
Sketching is a useful tool in design. I used it here to establish quick ideas on screen layout. In this section I was not beholden to any one idea, allowing me to be free and loose with my style.
Wireframes:
A two step process utilising sketching and digital tools. The early sketches were idea creation allowing me to explore.
The digital wireframes were used to help me consider spacing, hierarchy and image placement. It also allowed me to maintain consistency throughout my design.
Wireframes:
A two step process utilising sketching and digital tools. The early sketches were idea creation allowing me to explore.
The digital wireframes were used to help me consider spacing, hierarchy and image placement. It also allowed me to maintain consistency throughout my design.
Style Guide:
In order to keep my visual language consistent, I designed a style guide that would act as a mini Design System. Giving me the elements and context for my design.
I focussed on colour, typography and icons.
Style Guide:
In order to keep my visual language consistent, I designed a style guide that would act as a mini Design System. Giving me the elements and context for my design.
I focussed on colour, typography and icons.
Design & Iteration:
This stage was really for me to explore, I had a formula and template (wireframes) that would lead me down a path, but I also had ideas I wanted to try.
This is where I let the magic happen, ultimately, not all of them worked, however It was fun and freeing to try an idea no matter how weird it would seem.
Design & Iteration:
This stage was really for me to explore, I had a formula and template (wireframes) that would lead me down a path, but I also had ideas I wanted to try.
This is where I let the magic happen, ultimately, not all of them worked, however It was fun and freeing to try an idea no matter how weird it would seem.
Final Designs:
Lessons Learned:
This project taught me a more rounded idea of the UI design process, incorporating very basic UX elements. This allowed me to empathise with my target user on another level. In my opinion, this gave my design process a little more weight.
Lessons Learned:
This project taught me a more rounded idea of the UI design process, incorporating very basic UX elements. This allowed me to empathise with my target user on another level. In my opinion, this gave my design process a little more weight.
Back to UI/UX Design
All rights reserved. Designs by LBK Draws.