top of page
Mahagony
digital music player
Overview
This project consisted of two product designers. Together we worked on creating a music streaming platform.
The goal was to create a digital music library, with the ability to search for and play tracks from the Mahagany Sessions.
Our targeted audience was designed for young adults who are interested in searching new artists, creating playlists, and learning about recommended artists.
ROLE:
• Product Designer
• UI Designer
• Interaction designer
TOOLS:
• Figma
• Slacks
• Notion
• Adobe Photoshop
• Mobbin
• Unsplash
• Content Reel
TIMELINE:
4 weeks
Process
INSPIRATION:
• Discovering Inspo
• Competitor Analysis
• Benchmarking
• Mood Board
• Open Discussion
• Brainstorming
• Voting
STYLES:
• Colour and contrast
• Typefaces
• Grid system
• Icon library
COMPONENTS:
• Checkboxes
• Buttons
• Navigation bar
• Cards
• Media player
DESIGN:
• Sign up
• Navigation bar
• Dashboard
• Browse/Search music
• Play music
PROTOTYPE:
• Lo-fi
• Mid-fi
• Build High-fi
• Prototype
responsive design
Mood board
Collectively we created a cohesive mood board with similarities of neon/vibrant colours, movement, and trending designs.
.png)
Color Palette
A vibrant green was chosen as the primary colour, and a vibrant purple as our secondary. These colours symbolize creativity, power and luxury. The colours chosen follow WCAG guidelines, clearing AA for both normal and large text.
Typography
Two contemporary typefaces were paired to match the visual identity and compliments the vibrant green and purple of the interface: Lora and Kanit (google font)
Grids
A responsive 12 column grid system, has been chosen to adapt to various screen sizes and rations. Paired along with it, a 8 pt system provides flexible and consistent yet distinct system.
Each grid is 63px wide, along with a gutter of 32px and margins of 33px on both edges.
Design System:
Once I have my grid system, text and color styles, the next step is to add them to the design library/system.
My Interaction Design:
Final Prototype
After several iterations and minor updates, my partner and I have finally arrived at the high fidelity wireframes.
5 screens were created as well as component sets, focusing on the flows: Sign Up, Home Screen, Searching Music and Playing Music.
As our main focus was creating a light mode, I have created a dark mode version as well.
bottom of page