Design System Management Portal
An upgrade of usability and documentation.
Overview and Goals
The primary goal of i2c’s DSM redesign was to update documentation and enhance usability, addressing the growing number of workforce, many of whom are fresh graduates.
Additionally, we aimed to design a new Marketing Design System alongside the existing Product Design System. So, we aimed to use this product as the testing ground.
Summer 2024 - 3 Months
Role
Our team comprised of 11 members. Myself, Lead, Motion Designer,
6 Developers & 2 Managers.
I was responsible for documenting and designing experience for inner pages, responsives, designed illustrations and worked alongside developers for support & quality assurance.
Challenges
The previous design presented several challenges:
Target Audience Misalignment
While the previous design served all employees, its primary and the only users were frontend developers. So the focus had to be shifted.
Outdated Information
The existing portal contained outdated information that no longer reflected current best practices for design system.
Brand Evolution
i2c's branding had evolved significantly since the last iteration of the portal, necessitating a visual and functional update.
Closely collaborated with users (developers) to update the documentation & experience.
There were average 2-3 meetings each day to make decisions and mold the design accordingly. These activities opened a whole new perspective for me on how corporates write code, how design system is maintained on dev side and how to tackle design restrictions.
Approach
We designed the structure and behaviour using atomic design approach.
The purpose of using this approach was to design the experience and drive marketing design system from product design system and test it.
Product
Design System
Marketing
Design System
Atoms
We replaced the greys with shades of blue to align more closely with i2c's branding, giving the product a more vibrant and dynamic feel. Adjustments to typography, including line heights and spacing, created a compact look consistent with our brand guidelines.
Molecules
We deliberated on how extensively to use blues and decided on subtle accents, such as borders and strokes, after testing several design examples.
Organisms
Since molecules gave us direction on the UI. Now our focus shifted on Information layout and UX. Emphasis was placed on ensuring that these organisms balanced functionality with aesthetics, enhancing usability across all touchpoints.
Templates
Templates established the structure and layout for design and development. These templeates were designed with flexibility in mind, enabling them to adapt to diverse use cases while maintaining consistency.
Pages
Have a look at some of the screens
1920, 1366, 1024, 768, 375
Final Thoughts & Reflections
Project Impact
The i2c DSM redesign was a significant step forward in enhancing the user experience for internal teams. By modernizing the interface, improving documentation, and aligning with the evolving brand, we were able to create a more efficient, cohesive, and user-friendly system.
As someone who works on both web and mobile, the enhanced DSM has made a massive difference. The consistency across platforms and the logical component structure save time and reduce errors. Plus, the developer-focused documentation is a nice touch, showing a real understanding of our needs.
Muzaffar Iqbal
Pr. Frontend Developer
The new i2c DSM is a huge improvement over the previous version! The componentized structure and updated documentation make it so much easier to implement designs accurately. I can finally focus on coding rather than guessing design details. It’s clear and efficient—a real game changer.
Waleed Baig
Pr. Frontend Developer
I love the attention to detail in the revamped DSM. Every component is now intuitive and feels cohesive, which saves a lot of time. The updated guidelines have been especially helpful for responsive design, making my work smoother across devices. It feels built for developers, which I appreciate.
Maaz Haris
Sr. Frontend Developer
Key Learnings
This project provided me with invaluable insights into the design process at scale. Leading the design efforts for a system used by both developers and designers allowed me to deepen my understanding of cross-functional collaboration and sharpened my ability to think both visually and systematically. I learned how to manage dev and design cost and adopt to evolving business needs.