Close

Young Platform
Design System

Scroll down and look
at the process 👇

Close

Young Platform
Design System

Scroll down and look
at the process 👇

Close

Young Platform
Design System

Scroll down and look
at the process 👇

(1)
Overview

Building products that people love is part of the good design foundations.
A good design system allow to create great experiences for our customer, everyone wants to build high-quality products, but to achieve all of this we need to have a strong foundations within the teams across the business, everything is a little piece to the puzzle.

From typography, layouts and grids, colours, icons, components to voice and tone, style-guide, documentation, a design system is bringing all of these together in a way that allows the entire team to learn, build, and grow. This is what I have tried to do since I joined Young Platform.

Category

Web3

Role

Product Designer & Lead

Focus

Systems, Components, Interface, Visual

Year

2022-2023

(1)
Overview

Building products that people love is part of the good design foundations.
A good design system allow to create great experiences for our customer, everyone wants to build high-quality products, but to achieve all of this we need to have a strong foundations within the teams across the business, everything is a little piece to the puzzle.

From typography, layouts and grids, colours, icons, components to voice and tone, style-guide, documentation, a design system is bringing all of these together in a way that allows the entire team to learn, build, and grow. This is what I have tried to do since I joined Young Platform.

Category

Web3

Role

Product Designer & Lead

Focus

Systems, Components, Interface, Visual

Year

2022-2023

(1)
Overview

Building products that people love is part of the good design foundations.
A good design system allow to create great experiences for our customer, everyone wants to build high-quality products, but to achieve all of this we need to have a strong foundations within the teams across the business, everything is a little piece to the puzzle.

From typography, layouts and grids, colours, icons, components to voice and tone, style-guide, documentation, a design system is bringing all of these together in a way that allows the entire team to learn, build, and grow. This is what I have tried to do since I joined Young Platform.

Category

Web3

Role

Product Designer & Lead

Focus

Systems, Components, Interface, Visual

Year

2022-2023

(2)
Problem

Young Platform is facing challenges in maintaining a consistent visual design trough the products. The absence of a unified design system is a significant obstacle to the scalability and operational efficiency.

(3)
Challenge

Develop and implement a comprehensive design system to standardize the design and development processes, ensuring consistency, efficiency, and scalability as Young Platform grows.


We had a goal:

  • Improve the First design system to create consistency.

  • Establish an effective design process to create and iterate Tokens, Components, and Patterns.

  • Work collaboratively with cross-functional teams to anticipate their needs and ensure effective design system adoption and usage.

Develop and implement a comprehensive design system to standardize the design and development processes, ensuring consistency, efficiency, and scalability as Young Platform grows.


We had a goal:

  • Improve the First design system to create consistency.

  • Establish an effective design process to create and iterate Tokens, Components, and Patterns.

  • Work collaboratively with cross-functional teams to anticipate their needs and ensure effective design system adoption and usage.

Develop and implement a comprehensive design system to standardize the design and development processes, ensuring consistency, efficiency, and scalability as Young Platform grows.


We had a goal:

  • Improve the First design system to create consistency.

  • Establish an effective design process to create and iterate Tokens, Components, and Patterns.

  • Work collaboratively with cross-functional teams to anticipate their needs and ensure effective design system adoption and usage.

(4)
Impact

This version completely changed the way interfaces are designed and implemented at Young Platform.


In a little over a year, we achieve the following:

+50

Ui components
across figma

Ui components
across figma

Ui components
across figma

+48%

Efficiency of designing with a Design System

Efficiency of designing with a Design System

Efficiency of designing with a Design System

+4

Products that are using
the current DS

Products that are using
the current DS

Products that are using
the current DS

(5)
Immersion

We began the project by conductive Jam-sections with part of the team on the project (PM, engineers, designers) to brainstorm ideas. We analysed the current feature on the product to define pain and gain points in order to identify opportunities of improvement.

By the end of the immersion phase, we had a clear understanding of the project's objectives and a well-defined roadmap for moving forward with the design process.

What I did:

  • Affinity mapping

  • Brainstorming

  • Product & Feature Audit

(6)
Research

During the research phase, we followed a user-centred design process to explore how to enhance Moneybox's mobile experience. Guided by several in-depth interviews with our customers, surveys and feedback from our channels Telegram and Discord with more then 6.000 members, we identified common pain points and addressed them through new visual and interaction design solutions.

What I did:

  • Surveys

  • Data gathering

  • User Feedback

  • Competitive analysis

During the research phase, we followed a user-centred design process to explore how to enhance Moneybox's mobile experience. Guided by several in-depth interviews with our customers, surveys and feedback from our channels Telegram and Discord with more then 12.500 members we identified common pain points and addressed them through new visual and interaction design solutions.

We got valuable insights related to:

Feature Goal: It seems like the feature advantages are not clear or not perceived.
Saving vs Earning: Users frequently have asked if the feature allowing them to earn interests.
How it works: It seems like the Savings UX missed a proper onboarding.

What I did:

  • Surveys

  • Data gathering

During the research phase, we followed a user-centred design process to explore how to enhance Moneybox's mobile experience. Guided by several in-depth interviews with our customers, surveys and feedback from our channels Telegram and Discord with more then 6.000 members, we identified common pain points and addressed them through new visual and interaction design solutions.

What I did:

  • Surveys

  • Data gathering

  • User Feedback

  • Competitive analysis

Competitive analysis

Competitive analysis involves assessment of the strengths and weaknesses of current and potential competitors.

We conducted thorough benchmarking research on 8 mobile apps of which 3 of them proved to be very strong on this feature: Bitpanda, Crypto.com and Revolut. This included testing and analyzing the UX of competing applications and reviewing user feedback to better understand customer preferences.

During the research phase, we followed a user-centred design process to explore how to enhance Moneybox's mobile experience. Guided by several in-depth interviews with our customers, surveys and feedback from our channels Telegram and Discord with more then 12.500 members we identified common pain points and addressed them through new visual and interaction design solutions.

We got valuable insights related to:

Feature Goal: It seems like the feature advantages are not clear or not perceived.
Saving vs Earning: Users frequently have asked if the feature allowing them to earn interests.
How it works: It seems like the Savings UX missed a proper onboarding.

What I did:

  • Surveys

  • Data gathering

Competitive analysis involves assessment of the strengths and weaknesses of current and potential competitors.

We conducted thorough benchmarking research on 8 mobile apps of which 3 of them proved to be very strong on this feature: Bitpanda, Crypto.com and Revolut. This included testing and analyzing the UX of competing applications and reviewing user feedback to better understand customer preferences.

(7)
User Experience

Once we agreed with the research phase, we confidently moved forward with the high level view of the feature. This thorough process ensured that we covered all corner cases to create an intuitive and efficient user experience.

With this information, we were able to organize the data and make informed decisions about the design of the new feature.

We then presented multiple design directions to the team and worked collaboratively to evaluate and refine the best path forward.


What I did:

  • Information Architecture

  • User Flows

  • Wireframing

Once we agreed with the research phase, we confidently moved forward with the high level view of the feature. This thorough process ensured that we covered all corner cases to create an intuitive and efficient user experience.

With this information, we were able to organize the data and make informed decisions about the design of the new feature.

We then presented multiple design directions to the team and worked collaboratively to evaluate and refine the best path forward.


What I did:

  • Information Architecture

  • User Flows

  • Wireframing

Once we agreed with the research phase, we confidently moved forward with the high level view of the feature. This thorough process ensured that we covered all corner cases to create an intuitive and efficient user experience.

With this information, we were able to organize the data and make informed decisions about the design of the new feature.

We then presented multiple design directions to the team and worked collaboratively to evaluate and refine the best path forward.


What I did:

  • Information Architecture

  • User Flows

  • Wireframing

(8)
Visual Design

Once we laid the foundations of our architecture, we started iterating on different design solutions and styles. For the visual language, I relied on tailor-made components and a systematic approach to accelerate iterations and take care of consistency across every screen.

The result was a sleek and modern interface that aligned with Young Platform's brand personality and communicated simplicity and trustworthiness.

After several iterations, I developed a functional prototype for each proposal for user testing.

What I did:

  • Vision Boards

  • UI Design

  • Prototyping

Once we laid the foundations of our architecture, we started iterating on different design solutions and styles. For the visual language, I relied on tailor-made components and a systematic approach to accelerate iterations and take care of consistency across every screen.

The result was a sleek and modern interface that aligned with Young Platform's brand personality and communicated simplicity and trustworthiness.

After several iterations, I developed a functional prototype for each proposal for user testing.

What I did:

  • Vision Boards

  • UI Design

  • Prototyping

Once we laid the foundations of our architecture, we started iterating on different design solutions and styles. For the visual language, I relied on tailor-made components and a systematic approach to accelerate iterations and take care of consistency across every screen.

The result was a sleek and modern interface that aligned with Young Platform's brand personality and communicated simplicity and trustworthiness.

After several iterations, I developed a functional prototype for each proposal for user testing.

What I did:

  • Vision Boards

  • UI Design

  • Prototyping

Feature introduction

The Moneybox now has a proper space to live on, a whole section in navigation bar. We divided the moneybox creation in 3 different ways: The Curated Bundle, The Bespoke Bundle and The Single Coin Moneybox with a single coin.

Promotion

By tapping a promo banner in the app or entering the page for the first time opens a tutorial like stories to guide the user through the first activation. This approach helped users navigate through the feature, set up their Moneybox, and use the feature effectively.

Package creation

Activating the Moneybox involves setting up a dedicated space within the app where users can allocate and manage funds on single, custom and bundles of cryptos. Here the creation of a package where the user has to choose their favourite package and then follow the flow

Custom creation

We listened the riquest of the users, 25% of whom suggested improving with customization options for moneyboxes.

We defined a way to manage a moneybox by choosing your favourites crypto.

Monitoring

After the creation of a moneybox the user can track their investments through the main page divided by type and by clicking on one of them can enter to see an overview with performance, earnings, buttons to add or close the Moneybox, chart distribution and recurrring purchase button.

In

Ln

Db

Let's talk

If you want to chat about a project —
please send me an email and I’ll get back shortly.
federicogallo.design@gmail.com

Back to all works

Back to all works

All rights reserved

©2024

©2024