




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




