01

Process

Falcon Design System

Designing a finanical news app

Building a design system for CRMAs our company grew, the demand for multiple internal tools and platforms escalated rapidly. We found ourselves designing custom interfaces for various platforms, including web chats, WhatsApp integrations, and advisor portals. With the expansion of products and features, maintaining consistency across these platforms became increasingly challenging, leading to a sprawling and unmanageable user interface (UI) landscape.


To address this issue, we recognized the urgent need for a unified design language that could bring cohesion and manageability to our UI sprawl. However, implementing an official design system felt like a daunting task, as we grappled with the challenge of achieving consistency across platforms while still meeting specialized UI/UX requirements.

Figma link

Figma link

Role

Product Designer

Duration

4 months

Tools

Figma

Protopie

Deliverables

Deliverables

component library

Documentation

02

Overview

Problem

How might we establish a cohesive and consistent user experience across all our platforms and products while accommodating specialized UI/UX needs, improving development efficiency, and reinforcing our brand identity?

Outcome

Developed a comprehensive design system that establishes a unified design language, reusable UI components, and consistent user experience across all platforms while improving development efficiency and reinforcing brand identity.

Goals

Setting goals was important as it helped the team focus their efforts. Clear goals provided direction, allowing the team to prioritize tasks and work towards specific objectives. This ensured they stayed on track and maintained a common purpose.

Goals

Setting goals was important as it helped the team focus their efforts. Clear goals provided direction, allowing the team to prioritize tasks and work towards specific objectives. This ensured they stayed on track and maintained a common purpose.

1

Establish Design Language Consistency

Build a unified design language and system to pull together their growing UI sprawl across multiple platforms and products.

1

Establish Design Language Consistency

Build a unified design language and system to pull together their growing UI sprawl across multiple platforms and products.

2

Leverage Existing Frameworks to Accelerate Development

Leverage existing proven frameworks like Google Material and Tailwind CSS to more easily create reusable React web components for their custom design system.

2

Leverage Existing Frameworks to Accelerate Development

Leverage existing proven frameworks like Google Material and Tailwind CSS to more easily create reusable React web components for their custom design system.

3

Enable Pattern Reuse Through Component Library

Enabling pattern reuse through a component library ensures UI consistency, development efficiency, and scalability by providing a centralized collection of reusable UI components and patterns.

3

Enable Pattern Reuse Through Component Library

Enabling pattern reuse through a component library ensures UI consistency, development efficiency, and scalability by providing a centralized collection of reusable UI components and patterns.

Branding

When designing the ditto logo, I wanted to create something simple yet interesting that centered around creative typography. I opted to use the golden ratio to guide the logo's proportions and spacing for maximum aesthetic harmony.

Cerapro became the font of choice for its clean yet distinctive letterforms. Arranging and adjusting the letters to intersect along the golden ratio lines, I formed an abstract monogram that subtly spells out "ditto". The graphics are understated, allowing the typography itself to shine as the logo's main design feature.

Branding

When designing the ditto logo, I wanted to create something simple yet interesting that centered around creative typography. I opted to use the golden ratio to guide the logo's proportions and spacing for maximum aesthetic harmony.

Cerapro became the font of choice for its clean yet distinctive letterforms. Arranging and adjusting the letters to intersect along the golden ratio lines, I formed an abstract monogram that subtly spells out "ditto". The graphics are understated, allowing the typography itself to shine as the logo's main design feature.

3D icons

3D icons

Developing 3D icons was one of the innovative things we have done. We followed the guidelines from the Google Material Design, and I created these icons in Blender and rendered them using the Cycles rendering engine.

Tools used

Tools used

Figma

React

Blender

Tailwind CSS

What was the result?

The design system increased productivity among the engineering and design teams. It helped the teams ship the product in a very efficient and rapid manner.

What was the result?

The design system increased productivity among the engineering and design teams. It helped the teams ship the product in a very efficient and rapid manner.

More projects

Pigbud

Case study • Product • mobile

Onboarding Portal

Presentation • Web • DItto

Made by devadhathan © Copyright 2024. All Rights Reserved.

Made by devadhathan © Copyright 2024. All Rights Reserved.

Back

Back