The RGM platform is an enterprise platform that streamlines and automates revenue growth management processes for Colgate-Palmolive products offering features to maximize overall revenue. In this project, my key contribution involved designing 7 essential components for the system: Filters, Inputs, Dropdowns, Stepper, Modals, Radio Buttons, and Buttons with an emphasis on brand coherence, scalability, and accessibility.
Design System
Interaction Design
Accessbility Checks
June' 23 - November' 23
5 UX Designers,
1 QA Designer,
3 Developers
1. Expedite time to market
2. Increase UX consistency
3. Reduce costs
1. Designers
2. Developers
1. Workflow efficiency
2. Improved collaboration
3. Quality assurance
4. Adaptability to change
1. Adoption rate
2. Library usage (Figma)
3. Avg. task completion rate
The RGM design system is focused on 4 principles: Consistency, Efficiency, Scalability and Accessibility
1. At least 25% reduction in design iteration time, significantly enhancing overall project efficiency and turnaround
2. Created 7 design system components and documentation driving consistency and efficiency
When we need a UI element that our design system doesn't have, the first step is to check if we can reuse an existing component, especially with the tight schedule for RGM platform development. If we can't, then we decide to add a new component.
A key step is understanding how other companies in similar space have tackled these needs or goals. It gives us a clear view of various solutions and their use cases, including edge cases, and helps us evaluate scalability options. For instance, to efficiently gather data from a range of similar options, we delved into utilizing filters:
1. Horizontal Filters
Positioned above the content, they span horizontally, providing a broad overview of filtering options.
Level of context: 🟡 Hybrid (can affect the whole page, or can affect one section at a time)
Scalability: 🟡 Medium
Visibility: 🟢 High
2. Vertical Filters
Situated beside the content, these filters offer a detailed, sidebar-like selection method.
Level of context: 🔴 Low (Global: affects the whole page)
Scalability: 🟢 High
Visibility: 🔴 Low
3. Inline FiltersIntegrated within the content itself, they allow for contextual and immediate filtering of information.
Level of context: 🟢 High (contextualized at the component-level)
Scalability: 🔴 Low
Visibility: 🟢 High
Reference
Going ahead with the example of filters, we then identified the total number of filters present in the older version of RGM and categorized them. Along with filters, we also identified 2 other options: sorting and group by.
Total Filters: 19; Global Horizontal Filters: 6; Vertical Filters: 13.
Major changes:
Converted designs into components
Updated spacing to adhere to 8-pt grid system
Resolved consistency difference in single-select and multi-select
Considered edge-cases and drafted documentation and guidelines
After creating the filter components, feedback from designers and developers led to a valuable insight: the importance of atomic design in our system. This concept, introduced by Brad Frost, emphasizes building complex components from simpler ones for ease of scalability and management. I realized my components lacked this scalability and flexibility, making updates more time-consuming, effectively doubling the workload.
Reflecting on the project, the continuous collaboration with developers was a key learning experience. Their input was crucial in highlighting our time constraints and technical boundaries. This teamwork resulted in a strategic pivot in our approach. It meant rethinking our original designs at times, such as opting to delay the implementation of accordions for vertical filters and instead utilizing our current dropdowns. This decision not only made our development more efficient but also demonstrated our ability to adapt and maintain practicality in our design strategy.
I created 5 more component sets, ensuring the atomic structure: Tooltips, Modals, Radio-button, Stepper, and Button. Find below some examples:
After finalizing the design, we document all edge cases and specifications, and then pass it on for quality assurance. Following the resolution of any QA issues, the design is then ready to be handed over for development.
The internship helped me grow as a designer & as a professional with some mistakes, learnings & reflections.
1. Atomic DesignInitially, in crafting design components, I didn't employ an atomic design approach, resulting in numerous variants for a single component. Shifting to atomic design later reduced these variants by a substantial 60%.
