Chargezone
Internship @ Tequity
My Role
design intern, working with a senior uX designer
Deliverables
Design system guidelines, UI components, Creatives, High-fidelity Screens
Team
Senior UX Designer
UX Design Intern (Me)
Timeline
5 months (November 2024- March 2025)
// About the company
Chargezone is a leading provider of fast-charging infrastructure for electric vehicles, dedicated to accelerating EV adoption across India. As the company expanded, its digital products needed to evolve to support a growing user base, improve the charging experience, and integrate new features efficiently.
To achieve this, we rebuilt the app from the ground up, focusing on enhancing usability, providing better overall user-experience and ensuring a cohesive experience across platform.
// Process followed
// My responsibilities and context
During my internship at Tequity, a product consultancy working with Chargezone, I was brought in, to structure and scale their design system.
At the time, the product was growing rapidly, and while some components had already been designed, there were no clear guidelines on how to use them efficiently. Developers and designers often had to make decisions on the fly, leading to inconsistencies and inefficiencies.
This was the first time I was tasked with building such a comprehensive design system for such a fast growing brand, it was one of the most valuable experiences. I learnt patience and got to deep dive into the details of building a product, from fixing components pixel-by-pixel to questioning the need of each.
// Studying design systems
By analyzing and adapting principles from globally recognized systems like Uber’s Base, Shopify’s Polaris, and Google’s Material Design, we were able to create a robust, and scalable design system tailored specifically for the needs of ChargeZone’s diverse user base.
Uber
Base Design system
Uber’s use of grid systems and white space inspired how we handled visual groupings, ensuring a structured layout across booking flows, maps, and charging session interfaces.
shopify
Polaris Design system
Polaris emphasizes naming patterns and component documentation that are highly readable, reusable, and developer-friendly — a practice we adopted to maintain consistency across our system library.
Material 3 Design
Material Design’s detailed specifications for states, animations, and responsiveness offered a valuable reference, especially for components like buttons, date pickers, progress spinners, and snackbars.
This multi-source study enabled us to maintain a high level of accessibility, and visual integrity across platforms, while tailoring it to the unique use cases of EV users navigating real-world charging needs.
// Building foundations
The design foundations were already established, so I focused on documenting clear, detailed guidelines on how to effectively apply them. I outlined specific do’s and don’ts to ensure consistent implementation, making it especially valuable for newer designers to quickly understand the system and start building on it with confidence.
// building a few components
Designing a few components myself helped me understand the importance of consistency in creating a clear and unified visual experience. Keeping elements like spacing, text styles, and behavior aligned made the interface feel more polished and reliable, which is key for both user experience and brand recognition.
// key learnings from creating components
I learned that higher variation in text styles can lead to visual clutter and increased cognitive load—especially in components like cards, which are meant to be easily skimmable.
I also gained a deeper understanding of tappable areas and interactive zones—ensuring that touch targets met minimum size requirements for mobile devices helped make the app more user-friendly, especially for on-the-go EV users.
I also learned to assess the appropriate context for each component, distinguishing between low- and high-priority tasks. This understanding helped ensure that components were used purposefully, ultimately improving clarity.
// renaming components
Improving clarity by segregating function
One of the key ways I improved clarity in the ChargeZone design system was by carefully segregating components based on their function, especially when multiple elements shared similar visual traits but served very different purposes. A great example of this was the use of what were initially all referred to as “tags.” On closer inspection, I realized that although they looked somewhat alike, they performed entirely different roles.
I defined three distinct elements:
Lozenges for indicating status through color (non-interactive),
Tags for labeling and categorizing information (non-interactive),
Chips for interactive filtering and selection tasks.
While these terms are often used interchangeably in design, I standardized them based on function rather than appearance. This clear segregation reduced ambiguity and helped to implement components more purposefully across the app.
Context-specific usage
>Chips
By defining chip behavior based on context, users can quickly grasp whether they can choose one option, multiple options, or none at all, improving decision-making and efficiency in navigation. This structured approach prevents accidental selections or misinterpretations, thereby enhancing usability.
// Structuring web layout
Each foundational element and component in the Watt Design System was structured into three clear sections: Overview, Details, and Guidelines—making the system easy to understand, adopt, and scale across teams. We chose a dark mode-first approach to reflect the bold, futuristic aesthetic of the ChargeZone brand, aligning with the energy-tech space we operate in.
The name “Watt Design System” itself evokes power, clarity, and forward-thinking design—qualities that are reinforced through the system’s visual and structural choices.
The details section includes all the various components related details such as anatomy, states, types, hierarchy, specs, placement, etc. All components do have the same details , eg. states are shown for button but not for bottom sheets are different states don’t exist for bottom sheet component.
// Defining components
Right from the anatomy to its do’s and dont’s, I detailed out every possible aspect for each component to build clarity. Here are a few examples for the same:
Examples of Tags
>Overview Section
Tags are small, non-interactive components that help identify, group, or filter information across digital interfaces. They improve content discoverability and enable users to understand information concisely.
Examples of Modal
>Overview Section
Modals are often used for login screens, confirmation dialogs, and alerts, ensuring users complete essential actions without distraction.
Anatomy of an Accordion
>Details Section
An accordion consists of a container that holds multiple sections. Each section has a header, which serves as the interactive element, and a content area that expands or collapses when triggered. A chevron icon or similar indicator provides a visual cue about the section’s state (expanded or collapsed).
Specs of a button
>Details Section
Standard button dimensions ensure usability and consistency. Buttons typically have a minimum height of 44 px for touch targets, with padding that adapts to the label length, maintaining a balanced and accessible design.
Placement of a Filter Chip
>Details Section
Chips are generally stacked in rows. In filtering systems, they appear to be dynamic and change size depending upon interactions. Chips should be spaced at least 4-8px apart to ensure tappable areas do not overlap.
Placement of a Card
>Details Section
Cards are commonly used in grids or lists and positioned in sections that require content grouping, such as dashboards/catalog pages.
Types of Loaders
>Details Section
The progress loader is an essential UI component that provides users with feedback on ongoing processes such as loading, file uploads, or system operations
Determinate Loader
Shows progress percentage, used when the system can estimate time (e.g., file uploads).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
%
Indeterminate Loader
Shows continuous motion without specific progress information (e.g., system boot-up).
Loading comments...
Skeleton Loader
Temporarily fills UI elements before actual content loads (e.g., image placeholders).
Hierarchy of a Button
>Details Section
Buttons utilize color and contrast to establish three levels of emphasis and hierarchy. Primary buttons draw the most attention, followed by secondary buttons, with tertiary buttons having the least visual prominence.
States of a Filter Chip
>Details Section
Chips transition between enabled, selected, and disabled states, with some including icons to signify actions like closing or adding new elements.
Default
Chip is visible but inactive.
Filter chips
Selected (multiple filters)
Highlights the chip to indicate an active state when multiple select option is available.
Filter chips
Selected (single filter)
Highlights the chip to indicate an active state when single select option is available.
Filter chips
Disabled
Grayed out and non-interactive.
Filter chips
With Action
A chip that includes a close or remove button.
Filter chips
Best Practices for Search Bar
>Guidelines Section
The search bar should display real-time suggestions based on the user's input, such as relevant keywords, or popular searches. It should also highlight potential matches in the search results and allow users to easily select an option.
Clear Placeholder
A clear placeholder helps users understand what they can search for, setting the right expectations before they even start typing. Without proper guidance, users may hesitate or input vague queries, leading to irrelevant results.
Do
Use descriptive placeholder text like "Search by models" to help users understand what they can search for.
Don’t
Use generic text like "Type here," which doesn’t provide meaningful guidance.
Typo Tolerance
Users often misspell words or make small typing errors, especially on mobile devices. Typo tolerance ensures that the search function still delivers relevant results, improving accuracy. Without it, users may see "No results found" for simple mistakes, leading to frustration and abandonment. Implementing fuzzy search techniques helps match queries even when there are minor errors, ensuring a smoother search experience.
Do
Implement fuzzy search or typo tolerance to accommodate minor spelling errors.
Don’t
Force users to enter the exact query, leading to unnecessary "No results found" errors.
Smart Search Results
Results should be ranked based on relevance, showing the most likely matches at the top.
Auto-Clear Function
Allow users to clear their search query easily with a clear button or auto-clear functionality after a search is submitted.
// final outcome
25+ components and 6 foundation elements detailed out.
// Key learnings
Atomic Design
Started thinking about UI in smaller, reusable parts rather than standalone screens.
First-principles thinking
Rather than relying on generic UI patterns, I asked, "What does the user truly need at this moment of interacting with this component?"
Context Comes First
Rather than force-fitting existing design system structures, I built components around Chargezone’s specific user workflows.
Design Debt
Design Debt
Made me realize the importance of proactive planning and solid foundations in the early stages of a project.
fin.
Next project
