Overview
Undertaking a learning initiative to develop a comprehensive, well-documented design system from scratch using Figma, aimed at revitalizing a 40-year-old Indian brand with low user engagement and online presence.
Objectives
Seeking to leverage my experience working with design systems for clients such as Citibank (using Sketch) and Albertsons (using Figma) to further develop my skills and understanding in building a design system from scratch, ultimately enhancing my proficiency in Design System Management.
Team
Senior Experience Designer, L2 (Mumbai) | Experience Designer, L2 (Gurugram)
Brand
Cosco
Project timeline
July 2023 - Dec 2023
Industry
Retail
Tools used
But, why help COSCO ?
Cosco's 40 yr journey
Relentless growth
Foundation stone was laid when it's founder came to India in search of a better life and ended up creating a brand that has more than four decades of stronghold presence in India.
Key findings
Geography
Cosco produces sports goods with FIFA and ITF approvals, possessing quality but limited market presence outside India (Delhi, Gurgaon, Mumbai, Jalandhar).
Gender and age distribution
Cosco aims for 18-34 age group, slightly favouring men, positioning itself as a brand attractive to both genders.
Device distribution
77.84%
Mobile users
22.16%
Desktop users
Marketing channels
Primary channels for the brand are organic search (unpaid), direct search (non-ad sources), and paid search (via third-party platforms).
Organic search terms and it's types
Branded search( search using keywords that contain your company's name) makes up 62% of website traffic.
Website visit duration
00:03:52
India
00:00:31
USA
00:01:34
Phillipines
Bounce rate
40.60%
India
29.55%
USA
50%
Phillipines
Target user's topic distribution and interest areas
Most users visit for shopping. Prominent tags on the website are highlighted as they are densely present on the website domain.
Some key highlights
COSCO, a four-decade-old Indian brand, is experiencing strong competition from both Indian and French brands, such as Decathlon, which was established in 2005.
Organic search terms and it's types
Branded search( search using keywords that contain your company's name) makes up 62% of website traffic.
Fundamental components analysis
Cosco was compared to leading sports brands using criteria such as archetype, colors, imagery, voice and tone, typography, icons, accessibility, and sustainability. This analysis aided in developing the fundamental components of the design system.
Brand archetype
Voice and tone
Colours
Imagery
Typography
Typography and colour exploration
For typography inspiration, we considered language support, font variety, legibility, responsive design, and accessibility. Color inspiration was drawn from diverse sports victories and iconic moments.
Fundamental components
Colours
Primary, secondary, tertiary, functional, and text colour palettes.
Responsive grids
Primary, secondary, tertiary, functional, and text colour palettes.
Icons
Thin line icon library by Linetemp.
Imagery
Exudes attributes such as dynamic, dominant, hero, courageous and strong.
Spacers
Helps maintain consistent spacing and layout across different elements, components and pages in an interface.
How to start ?
Comparing components
A comparison was made between Cosco and its competitors' websites, focusing on the visible variations of card components and exploring different kinds of cards.
Getting to work
Examining various component options to determine the most effective choice.
Our process
The goal was to develop a scalable design system using the fewest possible components.
What all did we cover ?
Structure
Explaining the individual compositions of the UI component in detail.
Spacing
Maintain spacing, padding & vertical height in multiples of 2, 4, 8 for grid alignment.
Component property
Each component possesses different properties like variant, instance swap, boolean & text.
Assessing component functionality
Component prototyping fosters efficient collaboration between designers and developers by offering a precise visual depiction of the anticipated component functionality and design.
Before vs After
Evaluating the website's appearance after implementing our solution compared to its current design.
