Marathon App

Design sarees, your way.

Design sarees, your way.

Design sarees, your way.

Design sarees, your way.

Design sarees, your way.

Project Type

Digital Product Design

Role

Project Planning
App Redesign
Design System

Team

Anagh Sharma
Divya Verma

Aug, 2024

PROBLEMS

PROBLEMS

<

<

<

<

Marathon Application was on an annual record rectified and redesigned 14 times in a row. The whole exercise was a time consummate and also led to many unnecessary iterations some of them even went off record. The existing iteration had lack of consistency and was also the file size exceeded the frame size three times which was a complete misfit on Ul guidelines.

Problems Faced

In Existing App

<

<

<

Usability

Scalability

Core Components

Functionality

Accessibility

Implementation

Thinking

inside the box

<

<

<

<

<

<

<

<

<

<

<

ANALYSE

A

After successful completion of the research phase the next step was to start working on the design system. Below is the process which we followed to build the design system.


Creating atom of every individual element for example Typography, Colours, Icons,

logos, Images, text fields etc.


In the following stage we created molecules within interfaces. For example, a form label,

search input, and button can join to create a search form molecule.


Then the latter stage we closed it by creating Organisms. Accessibility test was conducted for visually disabled. Visual disabilities range from slight vision loss to total blindness. They also include color blindness, heightened sensitivity to bright colors, and other variations in color and brightness perception, independently. To resolve the same, we considered Accessibility and WCAG Test for

color blind people.

Research Outcomes

Here, we have summarized the key insights gathered from our research. This step would help us narrow down to the most crucial findings and pain point.

300 Pages

15+ Features

160+ Fonts

80+ Colors

5+ Shapes

<

<

<

<

BUILD

D

Adobe showcased it as a leading example of innovative design. It was celebrated as a huge win, earning recognition for transforming a chaotic 300+ screen app into a streamlined, visually stunning, and user-friendly experience.

Screens

Atoms

Molecules

Organisms

Templates

OLLATE

C

Measure the business impact of investing in your design system.

Start by aligning on the goals for your design system: Like getting products to market faster or increasing designer happiness.

Identify the metrics: Such as, design time spent per feature or design employee engagement scores that gauge whether you've achieved those goals.



Collect baseline data: On those metrics and create a dashboard to regularly report on the status of your design system efforts.

WCAG

<

<

Web Content Accessibility Guidelines (WCAG) explains about how to make web content more accessible to people with disabilities.

Web Content Accessibility Guidelines

Accessibility Test

PROTANOPIA

TRITANOPIA

DEUTERANOPIA

200+ SCREENS

<

<

<

<

<

<

<

<

<

<

<

<

COMPONENTS

Experiment: Measuring Efficiency Gains

Experiment: Measuring Efficiency Gains

Experiment: Measuring Efficiency Gains

Experiment:
Measuring Efficiency Gains

Experiment: Measuring Efficiency Gains

We assembled two teams and assigned them the same task:

1. Update the app's look and feel.
2. Change the visual language across all components.
3. Redefine the complete style guide
4. Deliver the final, production- ready design.
We assembled two teams and assigned them the same task:

1. Update the app's look and feel.
2. Change the visual language across all components.
3. Redefine the complete style guide
4. Deliver the final, production- ready design.
We assembled two teams and assigned them the same task:

1. Update the app's look and feel.
2. Change the visual language across all components.
3. Redefine the complete style guide
4. Deliver the final, production- ready design.
We assembled two teams and assigned them the same task:

1. Update the app's look and feel.
2. Change the visual language across all components.
3. Redefine the complete style guide
4. Deliver the final, production- ready design.

Results

Results

Marathon App Design System resulted in more than 80% efficiency.

Marathon App Design System resulted in more than 80% efficiency.

The Bigger Picture

The Bigger Picture

The Bigger Picture

The Bigger Picture

The Bigger Picture

The Bigger Picture

Implementing the Design System just won't save time. It can transform the way teams work.

Implementing the Design System just won't save time. It can transform the way teams work.

Faster Decision Making

Faster Decision Making

Faster Decision Making

Faster Decision Making

Faster Decision Making

Faster Decision Making

Faster Decision Making

Text

Standardized components a design debt, eliminating guesswork and enabling rapid iteration.

Standardized components a design debt, eliminating guesswork and enabling rapid iteration.

Standardized components a design debt, eliminating guesswork and enabling rapid iteration.

Standardized components a design debt, eliminating guesswork and enabling rapid iteration.

Standardized components a design debt, eliminating guesswork and enabling rapid iteration.

Standardized components a design debt, eliminating guesswork and enabling rapid iteration.

Standardized components a design debt, eliminating guesswork and enabling rapid iteration.

Consistent UX/ UI

Consistent UX/ UI

Consistent UX/ UI

Consistent UX/ UI

Consistent UX/ UI

Consistent UX/ UI

Consistent UX/ UI

Text

A unified design language ensured a seamless user experience across all screens and interactions.

A unified design language ensured a seamless user experience across all screens and interactions.

A unified design language ensured a seamless user experience across all screens and interactions.

A unified design language ensured a seamless user experience across all screens and interactions.

A unified design language ensured a seamless user experience across all screens and interactions.

A unified design language ensured a seamless user experience across all screens and interactions.

A unified design language ensured a seamless user experience across all screens and interactions.

Better Collaboration

Better Collaboration

Better Collaboration

Better Collaboration

Better Collaboration

Better Collaboration

Better Collaboration

Text

Designers, developers, and product teams work more efficiently with a shared source of truth.

Designers, developers, and product teams work more efficiently with a shared source of truth.

Designers, developers, and product teams work more efficiently with a shared source of truth.

Designers, developers, and product teams work more efficiently with a shared source of truth.

Designers, developers, and product teams work more efficiently with a shared source of truth.

Designers, developers, and product teams work more efficiently with a shared source of truth.

Designers, developers, and product teams work more efficiently with a shared source of truth.

Reduced Cognitive Load

Reduced Cognitive Load

Reduced Cognitive Load

Reduced Cognitive Load

Reduced Cognitive Load

Reduced Cognitive Load

Reduced Cognitive Load

Text

Teams focused on creativity and problem-solving instead of repetitive styling and component creation.

Teams focused on creativity and problem-solving instead of repetitive styling and component creation.

Teams focused on creativity and problem-solving instead of repetitive styling and component creation.

Teams focused on creativity and problem-solving instead of repetitive styling and component creation.

Teams focused on creativity and problem-solving instead of repetitive styling and component creation.

Teams focused on creativity and problem-solving instead of repetitive styling and component creation.

Teams focused on creativity and problem-solving instead of repetitive styling and component creation.

Scalability & Future-Proofing

Scalability & Future-Proofing

Scalability & Future-Proofing

Scalability & Future-Proofing

Scalability & Future-Proofing

Scalability & Future-Proofing

Scalability & Future-Proofing

Text

New features and updates became significantly easier to implement with a structured, reusable system.

New features and updates became significantly easier to implement with a structured, reusable system.

New features and updates became significantly easier to implement with a structured, reusable system.

New features and updates became significantly easier to implement with a structured, reusable system.

New features and updates became significantly easier to implement with a structured, reusable system.

New features and updates became significantly easier to implement with a structured, reusable system.

New features and updates became significantly easier to implement with a structured, reusable system.

Long-Term Cost Savings

Long-Term Cost Savings

Long-Term Cost Savings

Long-Term Cost Savings

Long-Term Cost Savings

Long-Term Cost Savings

Long-Term Cost Savings

Text

By cutting down on redundant work, the design system saved not only time but also operational costs across multiple teams.

By cutting down on redundant work, the design system saved not only time but also operational costs across multiple teams.

By cutting down on redundant work, the design system saved not only time but also operational costs across multiple teams.

By cutting down on redundant work, the design system saved not only time but also operational costs across multiple teams.

By cutting down on redundant work, the design system saved not only time but also operational costs across multiple teams.

By cutting down on redundant work, the design system saved not only time but also operational costs across multiple teams.

By cutting down on redundant work, the design system saved not only time but also operational costs across multiple teams.

Achievement

Achievement

Achievement

Achievement

Achievement

Achievement

Achievement

TCS and Adobe collaborated to develop a bespoke design system service at TCS, enhancing enterprise design efficiency. View Here

TCS and Adobe collaborated to develop a bespoke design system service at TCS, enhancing enterprise design efficiency. View Here

TCS and Adobe collaborated to develop a bespoke design system service at TCS, enhancing enterprise design efficiency. View Here

TCS and Adobe collaborated to develop a bespoke design system service at TCS, enhancing enterprise design efficiency. View Here

TCS and Adobe collaborated to develop a bespoke design system service at TCS, enhancing enterprise design efficiency. View Here