Overview

Impact

Problem

Tasks

Timeline

Methodology

Research

Techninique

Final Deliverables

Takeaways

ODIN Design System

Design System that empowers teams to focus on people not pixels.

Design System | UX Designer | Product Designer

ODIN Design System

Design System that empowers teams to focus on people not pixels.

Design System | UX Designer | Product Designer

ODIN Design System

Design System that empowers teams to focus on people not pixels.

Design System | UX Designer | Product Designer

MY ROLE

UX Designer- UX Research, Visual Design, User Journeys, User Flows, Prototyping

UX Designer- UX Research, Visual Design, User Journeys, User Flows, Prototyping

TEAM

Nayna Yadav- Design Lead

Nayna Yadav- Design Lead

Pranoy Dutta- 3D artist & Photographer

Pranoy Dutta- 3D artist & Photographer

TIMELINE

4 Months

4 Months

PLATFORMS

Fimga

Fimga

Miro

Miro

Jira- Atlassian

Jira- Atlassian

OVERVIEW

As an organization grows and expands its product or service offerings, it can become increasingly difficult to maintain consistency and manage design assets. We wanted to encourage collaboration between designers, developers, and other stakeholders. By providing a shared language and set of tools, a design system can help facilitate communication and ensure that everyone is working towards the same goals.

As an organization grows and expands its product or service offerings, it can become increasingly difficult to maintain consistency and manage design assets. We wanted to encourage collaboration between designers, developers, and other stakeholders. By providing a shared language and set of tools, a design system can help facilitate communication and ensure that everyone is working towards the same goals.

Website: https://www.odinapp.co/

Key Performance Indicator

Key Performance Indicator

25%

Decrease in the MVP building time.

30%

Save in design & development costs

47%

Increase in tasks for design creativity

An opportunity to go out with a bang.

Potential aspects considered

We propose building a design system that will help the organization scale its design assets and maintain consistency across all of its products and services. The design system will provide a shared language, guidelines, and standards for visual and interaction design, ensuring that every part of a product or service is consistent with the organization's brand.

Defined the product requirements, setting priorities, and ensuring that the design system meets the business objectives.

Worked on conducting user research, usability testing, & other user-centred design activities to meets the needs of the organization's users.

Worked on creating the visual and interaction design elements that made up the design system. Also worked on defining the design language, creating style guides and design patterns, and testing and validating.

My contribution in for here

  • Conducted Secondary Research

  • Created A strong base for foundation elements

  • Developed the Visual Design

  • Performed Usability Tests and Iterations

  • Collaborated with Dev team

  • Pitched concept to further startups

  • Conducted Secondary Research

  • Created A strong base for foundation elements

  • Developed the Visual Design

  • Performed Usability Tests and Iterations

  • Collaborated with Dev team

  • Pitched concept to further startups

The Atomic

Methodology

Tokens

Atoms

Molecules

Organisms

Template

Pages

Finding structure amidst the chaos.

Our ideaology

The design system we created has been a resounding success, delivering measurable results for our organization. By establishing a consistent visual language and shared set of design principles, we were able to streamline the design process and create a more cohesive user experience across all of our products.


By building a design system, the organization can improve the user experience, enhance its brand and reputation, and achieve its goals for growth and expansion.

The design system we created has been a resounding success, delivering measurable results for our organization. By establishing a consistent visual language and shared set of design principles, we were able to streamline the design process and create a more cohesive user experience across all of our products.


By building a design system, the organization can improve the user experience, enhance its brand and reputation, and achieve its goals for growth and expansion.

Token based Design System

Design tokens are all the values needed to construct and maintain a design system — spacing, colour, typography, object styles, animation, etc. — represented as data. These can represent anything defined by design: a colour as a RGB value, an opacity as a number, an animation ease as Bezier coordinates.

Design tokens are all the values needed to construct and maintain a design system — spacing, colour, typography, object styles, animation, etc. — represented as data. These can represent anything defined by design: a colour as a RGB value, an opacity as a number, an animation ease as Bezier coordinates.

#496FF8

$colour.primary.1

$color.background.brand

$button.primary.background.default

Button

Straight to the point & consistent

Concept

Components

An effortless experience

Components— versatile and responsive.

This endeavour got its start due to a need. We tested several UI kits for Figma but discovered they lacked in size, flexibility, or quality — frequently all three — and we had to recreate all the low-quality parts.

This endeavour got its start due to a need. We tested several UI kits for Figma but discovered they lacked in size, flexibility, or quality — frequently all three — and we had to recreate all the low-quality parts.

Documentation

In the rare instance that something goes wrong, it was of utmost priority to communicate it clearly and suggest direct solutions.

Center-aligned iconography and headings were used in tandem with subtle motion design to be more interruptive and draw greater attention

In the rare instance that something goes wrong, it was of utmost priority to communicate it clearly and suggest direct solutions.

Center-aligned iconography and headings were used in tandem with subtle motion design to be more interruptive and draw greater attention

The Challenge

I always aim to continue to evolve and refine the created design system to ensure that we continue to meet the needs of our customers and stay ahead of the competition.

I always aim to continue to evolve and refine the created design system to ensure that we continue to meet the needs of our customers and stay ahead of the competition.

I always aim to continue to evolve and refine the created design system to ensure that we continue to meet the needs of our customers and stay ahead of the competition.

Project Takeaways:

Thinking and designing with a systems mindset is a great way to achieve flexibility.

All we really did was turn a grid layout into grouped rows, but by utilizing systems thinking on each level (groups, headers, menus), we created a solution that enabled our product management team to broadly test large-scale hypotheses, while saving our engineering and design teams time. 

There is always value in listening to user feedback.

Even if you already know a problem exists, user feedback can help you narrow in on the nuances and can be used to help get the rest of your organization on board. 

Identifying and pursuing low-hanging fruit can be very… fruitful.

Early in the discovery phase, I thought the problem was too obvious for no one to have tried to solve it yet, but I continued forward and learned that, in fact, it was a big problem and a massive opportunity.

Previous project

Previous project

Next project

Next project

https://aanchalkalra.co/

https://aanchalkalra.co/

https://aanchalkalra.co/