TEAM
• Jorge Riera • Zander Whitehurst
TEAM
• Jorge Riera • Zander Whitehurst
How I Sharpened my
UI skills and mastered Figma in 12 weeks
How I Sharpened my
UI skills and mastered Figma in 12 weeks
UI Designer
2022 - 2023
I had the absolute pleasure to collaborate
and design with top designers around the world while perfecting my existing Figma knowledge to create a new music app
concept for Mahogany.
In this period of time I learnt not only how
to design with best UI principles in mind
but also how to effectively feedback,
optimise workflows and be more intentful with how I design and communicate my decisions to others.
I had the absolute pleasure to collaborate
and design with top designers around the world while perfecting my existing Figma knowledge to create a new music app
concept for Mahogany.
In this period of time I learnt not only how
to design with best UI principles in mind
but also how to effectively feedback,
optimise workflows and be more intentful with how I design and communicate my decisions to others.
Mahogany App Design
The course was divided into 12 different parts, where we would learn different modules week by week as outlined below. One day was dedicated to theory and exercises, while the second day focused on practical application and feedback. During this time, we showcased our outcomes based on what we had learned.
The brief was to design a new music app for Mahogany, incorporating everything we had learned throughout the course.
Mahogany App Design
The course was divided into 12 different parts, where we would learn different modules week by week as outlined below. One day was dedicated to theory and exercises, while the second day focused on practical application and feedback. During this time, we showcased our outcomes based on what we had learned.
The brief was to design a new music app for Mahogany, incorporating everything we had learned throughout the course.
This portfolio is under NDA for several projects,
I appreciate your discretion in viewing it.
This Website was designed in Figma and built in Framer. Icon attributed to Phosphor Library.
Designed by rzrgraphics ltd 2024
How I Sharpened my UI skills and mastered Figma in 12 weeks
I had the absolute pleasure to collaborate and design with top designers around the world while perfecting my existing Figma knowledge to create a new music app concept for Mahogany.
In this period of time I learnt not only how to design with best UI principles in mind but also how to effectively feedback, optimise workflows and be more intentful with how I design and communicate my decisions to others.
UI Designer
2022 - 2023
TEAM
• Jorge Riera • Zander Whitehurst
UI Designer
2022 - 2023
How I Sharpened my UI skills
and mastered Figma in 12 weeks
How I Sharpened my UI skills
and mastered Figma in 12 weeks
I had the absolute pleasure to collaborate and design with top designers around the world while perfecting my existing Figma knowledge to create a new music app concept for Mahogany.
In this period of time I learnt not only how to design with best UI principles in mind but also how to effectively feedback, optimise workflows and be more intentful with how I design and communicate my decisions to others.
I had the absolute pleasure to collaborate and design with top designers around the world while perfecting my existing Figma knowledge to create a new music app concept for Mahogany.
In this period of time I learnt not only how to design with best UI principles in mind but also how to effectively feedback, optimise workflows and be more intentful with how I design and communicate my decisions to others.
TEAM
• Jorge Riera • Zander Whitehurst
TEAM
• Jorge Riera • Zander Whitehurst
Mahogany App Design
The course was divided into 12 different parts, where we would learn different modules week by week as outlined below. One day was dedicated to theory and exercises, while the second day focused on practical application and feedback. During this time, we showcased our outcomes based on what we had learned.
The brief was to design a new music app for Mahogany, incorporating everything we had learned throughout the course.
Mahogany App Design
The course was divided into 12 different parts, where we would learn different modules week by week as outlined below. One day was dedicated to theory and exercises, while the second day focused on practical application and feedback. During this time, we showcased our outcomes based on what we had learned.
The brief was to design a new music app for Mahogany, incorporating everything we had learned throughout the course.
Mahogany App Design
The course was divided into 12 different parts, where we would learn different modules week by week as outlined below. One day was dedicated to theory and exercises, while the second day focused on practical application and feedback. During this time, we showcased our outcomes based on what we had learned.
The brief was to design a new music app for Mahogany, incorporating everything we had learned throughout the course.
Benchmarking
Benchmarking
I carried out competitor benchmarking on a direct and indirect
competitors while also mapping the IA of the product
I carried out competitor benchmarking on
a direct and indirect competitors while also mapping the IA of the product
Creating user flows
Creating user flows
mapping out the user flow for a new user signing up,
browsing, and playing a song in Mahogany
Mapping out the user flow for a new user signing up, browsing, and playing a song in the Mahogany app
Mapping out the user flow for a new user signing up, browsing, and playing a song
in Mahogany app
Wireframing
Designed not to break,
Light and dark mode ready
Wireframing our the sign up, browsing, and playing experience with Mahogany
Wireframing our the sign up, browsing, and playing experience
with Mahogany app
Email design is hard to control when it goes dark mode, I perfected methods to display colours and make sure that no visual element is lost while perfectly blending in with it's light/dark environments through the use of opacity in colour and pngs
Colour library
Colour library
I created a fresh new colour palette table and run contrast checks on each color to make sure they’re accessible. While also considering how it would be affected by dark mode.
I created a fresh new colour palette table and run contrast checks on each color to make sure they’re accessible. While also considering how it would be affected by dark mode.
Typography system
Typography system
As part of this exersise I defined the range of heading, body, and button type styles that i'd be using withing the app.
As part of this exersise I defined the range of heading, body, and button type styles that i'd be using withing the app.
Creating components and Variants
Creating components
and Variants
I created components for buttons, checkboxes, radio buttons and CTAs
I created components for buttons, checkboxes, radio buttons and CTAs
Prototyping components in Figma
Prototyping components
in Figma
Using advanced components to create interactions for a fixed play bar prototype
Using advanced components to create interactions for a fixed play bar prototype
Liked songs
217 songs
Soulful Blend
635 songs
Top 100
Best on the UK Charts
Ovy On The Drums
Jump back in.
Trending
Precious Pepala - My Eyes Only | Maho...
RIOPY - New World (Solo Piano) | Mah...
Talos - Farewell / Kamikaze | Mahogany
Em Beihold - Numb Little Bug (The Caf...
Freddie Long [LIVE] Artic Monkeys Cover
Coming together for the first time recreating absolute classics with a new spin don’t miss this live session
Hozier
My Eyes Only
#mahoganysessions
Alice Phoebe Lou
Ocean Drive
#mahoganysessions
Ásgeir
Dreaming
#mahoganysessions
Covers on your favourites
Red Hot C..
Drake
Harry Styles
Fleetwood...
Pixies
Stormzy
Guns N’ R...
Burna Boy
Daft Punk
Billie Eilish
Happier Than Ever
#mahoganysessions
Nice for what
Drake
03:30
Charly Black
Post Malone
RAYE
Drake
The Weeknd
Paramore
Liked songs
217 songs
Soulful Blend
635 songs
Top 100
Best on the UK Charts
Ovy On The Drums
Jump back in.
Trending
Precious Pepala - My Eyes Only | Maho...
RIOPY - New World (Solo Piano) | Mah...
Talos - Farewell / Kamikaze | Mahogany
Em Beihold - Numb Little Bug (The Caf...
Freddie Long [LIVE] Artic Monkeys Cover
Coming together for the first time recreating absolute classics with a new spin don’t miss this live session
Hozier
My Eyes Only
#mahoganysessions
Alice Phoebe Lou
Ocean Drive
#mahoganysessions
Ásgeir
Dreaming
#mahoganysessions
Covers on your favourites
Red Hot C..
Drake
Harry Styles
Fleetwood...
Pixies
Stormzy
Guns N’ R...
Burna Boy
Daft Punk
Billie Eilish
Happier Than Ever
#mahoganysessions
Nice for what
Drake
03:30
Charly Black
Post Malone
RAYE
Drake
The Weeknd
Paramore
Liked songs
217 songs
Soulful Blend
635 songs
Top 100
Best on the UK Charts
Ovy On The Drums
Jump back in.
Trending
Precious Pepala - My Eyes Only | Maho...
RIOPY - New World (Solo Piano) | Mah...
Talos - Farewell / Kamikaze | Mahogany
Em Beihold - Numb Little Bug (The Caf...
Freddie Long [LIVE] Artic Monkeys Cover
Coming together for the first time recreating absolute classics with a new spin don’t miss this live session
Hozier
My Eyes Only
#mahoganysessions
Alice Phoebe Lou
Ocean Drive
#mahoganysessions
Ásgeir
Dreaming
#mahoganysessions
Covers on your favourites
Red Hot C..
Drake
Harry Styles
Fleetwood...
Pixies
Stormzy
Guns N’ R...
Burna Boy
Daft Punk
Billie Eilish
Happier Than Ever
#mahoganysessions
Nice for what
Drake
03:30
Charly Black
Post Malone
RAYE
Drake
The Weeknd
Paramore
Designing the app modules
Designing the app modules
Designing and prototyping a series of app modules that would bring my wireframes to a high fidelity prototype concept.
Designing and prototyping a series of app modules that would bring my wireframes to a high fidelity prototype concept.
Prototyping app screens
Prototyping app screens
As part of the design stage i began prototyping the app screens linking interactions together and creating animated transitions between each step.
As part of the design stage i began prototyping the app screens linking interactions together and creating a
animated transitions between each step.
Final Screens
Final Screens
The designs I meticulously crafted showcased the UI knowledge I acquired during a 12-week period of intensive learning. The Memorisely bootcamp provided one of the best learning experiences, instilling in me a newfound confidence in Figma and best practices. Under the guidance of industry expert Zander Whitehurst, I learned how to work end-to-end, from research and defining the brief to execution, prototyping, and handover to development. Additionally, I honed my skills in creating robust design systems and libraries, optimizing my efficiency in a SUPA-FAST manner!
The designs I meticulously crafted showcased the UI knowledge I acquired during a 12-week period of intensive learning.
The Memorisely bootcamp provided one of the best learning experiences, instilling in me a newfound confidence in Figma and best practices. Under the guidance of industry expert Zander Whitehurst, I learned how to work end-to-end, from research and defining the brief to execution, prototyping, and handover to development. Additionally,
I honed my skills in creating robust design systems and libraries, optimizing my efficiency in a SUPA-FAST manner!
This portfolio is under NDA for several projects I'd appreciate your discretion in viewing it.
This Website was designed in Figma and built in Framer. Icon attributed to Phosphor Library.
Designed by rzrgraphics ltd 2024
This portfolio is under NDA for several projects I'd appreciate your discretion in viewing it. This Website was designed in Figma and built in Framer. Icon attributed to Phosphor Library.
Designed by rzrgraphics ltd 2024