80's music streaming platform

80's music streaming platform

80's music streaming platform

80's music streaming platform

80's music streaming platform

Tubulr

Iconography

Wireframing

User Flows

Moodboard

UI Design

ROLE

ROLE

ROLE

ROLE

ROLE

UX/UI Student

UX/UI Student

UX/UI Student

UX/UI Student

UX/UI Student

Stakeholder

Stakeholder

Stakeholder

Stakeholder

Stakeholder

CareerFoundry
Bootcamp

CareerFoundry
Bootcamp

CareerFoundry
Bootcamp

CareerFoundry
Bootcamp

CareerFoundry
Bootcamp

Period

Period

Period

Period

Period

May 2024

May 2024

May 2024

May 2024

May 2024

The Challange

The Challange

Modern interface with vintage feel

Modern interface with vintage feel

Modern interface with vintage feel

Modern interface with vintage feel

Modern interface with vintage feel

TUBULR seamlessly blends modern design principles of current music streaming apps with the aesthetic of the 80’s era.
Target audience: 35-55 year olds

TUBULR seamlessly blends modern design principles of current music streaming apps with the aesthetic of the 80’s era.
Target audience: 35-55 year olds

TUBULR seamlessly blends modern design principles of current music streaming apps with the aesthetic of the 80’s era.
Target audience: 35-55 year olds

TUBULR seamlessly blends modern design principles of current music streaming apps with the aesthetic of the 80’s era.
Target audience: 35-55 year olds

TUBULR seamlessly blends modern design principles of current music streaming apps with the aesthetic of the 80’s era.
Target audience: 35-55 year olds

3 key functionalities and define the app’s visual direction:

  • User Profiling

  • Discovery of music and artists

  • Playlist creation

3 key functionalities and define the app’s visual direction:

  • User Profiling

  • Discovery of music and artists

  • Playlist creation

3 key functionalities and define the app’s visual direction:

  • User Profiling

  • Discovery of music and artists

  • Playlist creation

3 key functionalities and define the app’s visual direction:

  • User Profiling

  • Discovery of music and artists

  • Playlist creation

3 key functionalities and define the app’s visual direction:

  • User Profiling

  • Discovery of music and artists

  • Playlist creation

Solutions

Solutions

  • Minimalistic yet Bold Design

  • Retro Iconography

  • Dark Mode Default

  • Cover Art/Content Dominance

  • Retro Fonts

  • Modern Readability

  • Minimalistic yet Bold Design

  • Retro Iconography

  • Dark Mode Default

  • Cover Art/Content Dominance

  • Retro Fonts

  • Modern Readability

  • Minimalistic yet Bold Design

  • Retro Iconography

  • Dark Mode Default

  • Cover Art/Content Dominance

  • Retro Fonts

  • Modern Readability

  • Minimalistic yet Bold Design

  • Retro Iconography

  • Dark Mode Default

  • Cover Art/Content Dominance

  • Retro Fonts

  • Modern Readability

  • Minimalistic yet Bold Design

  • Retro Iconography

  • Dark Mode Default

  • Cover Art/Content Dominance

  • Retro Fonts

  • Modern Readability

UX Basis

UX Basis

Groundwork

Groundwork

Groundwork

Groundwork

Groundwork

Proceeding the brief and demand, I created a mood-board and a flow chart from which I started to sketch.
All the processes that would dictate -in the scope of this project- all design decisions for this application.

I sought visual inspiration that represented what the 80’s sounded and felt like to live through while trying to maintain consistency and minimalism.

Proceeding the brief and demand, I created a mood-board and a flow chart from which I started to sketch.
All the processes that would dictate -in the scope of this project- all design decisions for this application.

I sought visual inspiration that represented what the 80’s sounded and felt like to live through while trying to maintain consistency and minimalism.

Proceeding the brief and demand, I created a mood-board and a flow chart from which I started to sketch.
All the processes that would dictate -in the scope of this project- all design decisions for this application.

I sought visual inspiration that represented what the 80’s sounded and felt like to live through while trying to maintain consistency and minimalism.

Proceeding the brief and demand, I created a mood-board and a flow chart from which I started to sketch.
All the processes that would dictate -in the scope of this project- all design decisions for this application.

I sought visual inspiration that represented what the 80’s sounded and felt like to live through while trying to maintain consistency and minimalism.

Proceeding the brief and demand, I created a mood-board and a flow chart from which I started to sketch.
All the processes that would dictate -in the scope of this project- all design decisions for this application.

I sought visual inspiration that represented what the 80’s sounded and felt like to live through while trying to maintain consistency and minimalism.

Wireframes

Wireframes

Sketching

Sketching

Sketching

Sketching

Sketching

With the insight from the brief and my user flows I sketched and planned the interactions accordingly.

With the insight from the brief and my user flows I sketched and planned the interactions accordingly.

With the insight from the brief and my user flows I sketched and planned the interactions accordingly.

With the insight from the brief and my user flows I sketched and planned the interactions accordingly.

With the insight from the brief and my user flows I sketched and planned the interactions accordingly.

I digitised them with an 8 column grid and used well established patterns and elements.

I digitised them with an 8 column grid and used well established patterns and elements.

I digitised them with an 8 column grid and used well established patterns and elements.

I digitised them with an 8 column grid and used well established patterns and elements.

I digitised them with an 8 column grid and used well established patterns and elements.

Wireframes

Wireframes

Hi-fi Screens

Hi-fi Screens

Hi-fi Screens

Hi-fi Screens

Hi-fi Screens

The interface itself is flashy yet minimal, providing an energetic experience when diving into nostalgia through clear and readable platform.

The interface itself is flashy yet minimal, providing an energetic experience when diving into nostalgia through clear and readable platform.

The interface itself is flashy yet minimal, providing an energetic experience when diving into nostalgia through clear and readable platform.

The interface itself is flashy yet minimal, providing an energetic experience when diving into nostalgia through clear and readable platform.

The interface itself is flashy yet minimal, providing an energetic experience when diving into nostalgia through clear and readable platform.

Making great use of the monochromatic palette maintaning focus on the content and only bringing attention to what is essential.

Making great use of the monochromatic palette maintaning focus on the content and only bringing attention to what is essential.

Making great use of the monochromatic palette maintaning focus on the content and only bringing attention to what is essential.

Making great use of the monochromatic palette maintaning focus on the content and only bringing attention to what is essential.

Making great use of the monochromatic palette maintaning focus on the content and only bringing attention to what is essential.

Branding

Branding

Iconography

Iconography

Iconography

Iconography

Iconography

Inspired by great Iconographer Susan Kare - I have sought the vintage appeal and create an icon family that resonates with decades past and nostalgia. ie. tapes, vinyls and paper planes.

Inspired by great Iconographer Susan Kare - I have sought the vintage appeal and create an icon family that resonates with decades past and nostalgia. ie. tapes, vinyls and paper planes.

Inspired by great Iconographer Susan Kare - I have sought the vintage appeal and create an icon family that resonates with decades past and nostalgia. ie. tapes, vinyls and paper planes.

Inspired by great Iconographer Susan Kare - I have sought the vintage appeal and create an icon family that resonates with decades past and nostalgia. ie. tapes, vinyls and paper planes.

Inspired by great Iconographer Susan Kare - I have sought the vintage appeal and create an icon family that resonates with decades past and nostalgia. ie. tapes, vinyls and paper planes.

At the time of creating these, I chose to take an artistic approach and drive home the aesthetic direction, which would take the user on a tad-longer learning curve, admittedly.

At the time of creating these, I chose to take an artistic approach and drive home the aesthetic direction, which would take the user on a tad-longer learning curve, admittedly.

At the time of creating these, I chose to take an artistic approach and drive home the aesthetic direction, which would take the user on a tad-longer learning curve, admittedly.

At the time of creating these, I chose to take an artistic approach and drive home the aesthetic direction, which would take the user on a tad-longer learning curve, admittedly.

At the time of creating these, I chose to take an artistic approach and drive home the aesthetic direction, which would take the user on a tad-longer learning curve, admittedly.

Branding

Branding

Colours

Colours

Colours

Colours

Colours

The Colours are chosen to evoke the energetic and dynamic nature of the music scene during this time, highlighting the experimental vibes that defined the era.

The Colours are chosen to evoke the energetic and dynamic nature of the music scene during this time, highlighting the experimental vibes that defined the era.

The Colours are chosen to evoke the energetic and dynamic nature of the music scene during this time, highlighting the experimental vibes that defined the era.

The Colours are chosen to evoke the energetic and dynamic nature of the music scene during this time, highlighting the experimental vibes that defined the era.

The Colours are chosen to evoke the energetic and dynamic nature of the music scene during this time, highlighting the experimental vibes that defined the era.

The palette has been calibrated to maintain contrast and usability while ensuring the atmosphere creating a ‘retro-resonance’ which is aesthetically nostalgic and pleasing to the eyes.

The palette has been calibrated to maintain contrast and usability while ensuring the atmosphere creating a ‘retro-resonance’ which is aesthetically nostalgic and pleasing to the eyes.

The palette has been calibrated to maintain contrast and usability while ensuring the atmosphere creating a ‘retro-resonance’ which is aesthetically nostalgic and pleasing to the eyes.

The palette has been calibrated to maintain contrast and usability while ensuring the atmosphere creating a ‘retro-resonance’ which is aesthetically nostalgic and pleasing to the eyes.

The palette has been calibrated to maintain contrast and usability while ensuring the atmosphere creating a ‘retro-resonance’ which is aesthetically nostalgic and pleasing to the eyes.

Branding

Branding

Typography

Typography

Typography

Typography

Typography

Takeaways

Takeaways

This project was designed with a clear and simple brief in mind and for mobile medium only.
Given the circumstances and scope of the work I would have followed on to conduct research and consecutive processes, such as:

This project was designed with a clear and simple brief in mind and for mobile medium only.
Given the circumstances and scope of the work I would have followed on to conduct research and consecutive processes, such as:

This project was designed with a clear and simple brief in mind and for mobile medium only.
Given the circumstances and scope of the work I would have followed on to conduct research and consecutive processes, such as:

This project was designed with a clear and simple brief in mind and for mobile medium only.
Given the circumstances and scope of the work I would have followed on to conduct research and consecutive processes, such as:

This project was designed with a clear and simple brief in mind and for mobile medium only.
Given the circumstances and scope of the work I would have followed on to conduct research and consecutive processes, such as:

  • Competitive Analysis

  • User Interviews

  • User Testing

  • Reiterate Designs upon feedback

  • Prototype

  • Competitive Analysis

  • User Interviews

  • User Testing

  • Reiterate Designs upon feedback

  • Prototype

  • Competitive Analysis

  • User Interviews

  • User Testing

  • Reiterate Designs upon feedback

  • Prototype

  • Competitive Analysis

  • User Interviews

  • User Testing

  • Reiterate Designs upon feedback

  • Prototype

  • Competitive Analysis

  • User Interviews

  • User Testing

  • Reiterate Designs upon feedback

  • Prototype