Project: During my tenure with Deloitte Digital, I played a pivotal role in the creation of an avant-garde marketing tool. This project involved leveraging evidence-based user research and working closely with stakeholders, product managers, designers, and developers to conceive impactful solutions. To uphold the confidentiality agreement I have signed, I am unable to disclose the specific product name or showcase any visual representations. Nevertheless, I am more than capable of discussing the valuable insights and knowledge gained from this project.
While actively contributing to the development of this marketing tool, I engaged in a wide range of activities, such as creating user flows and implementing new features. However, for this particular case study, I want to highlight the valuable experience I gained while spearheading the creation of a comprehensive design system from scratch.
Role: UI/UX Designer
Deliverables: creating a custom design system in Figma and reviewing the implementation in Storybook
Platform : web
"A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels." - NN/g Norman Nielsen group
Work
Designing a cohesive and scalable design system proved to be a transformative undertaking, where I meticulously crafted a library of reusable components, established robust guidelines, and ensured visual consistency across the product. This endeavor required close collaboration with cross-functional teams, including designers, developers, and product managers, to align our vision and deliver an exceptional user experience. It is worth noting that the project was undertaken for a large-scale corporation, which added an additional layer of complexity to the development process.
Challenge
During the initial release of the project, the lack of a design system or component library posed significant challenges for our team. We were compelled to add components to the design on an ad-hoc basis, resulting in a voluminous and cluttered collection of components that was cumbersome to navigate. Furthermore, the design was marred by inconsistencies and deviations that required extensive clean-up efforts in subsequent stages of the project. In addition, developers faced difficulties in deciphering the intricate rules of spacing and font usage, further exacerbating the challenges faced by the team. Despite these obstacles, we were determined to overcome these hurdles and devise a more structured and organized approach to the design process.
Design system?
After the initial release, my priority was to create a design system that could streamline the design process and improve its efficiency. To achieve this, I started by gaining a thorough understanding of the design requirements, and carefully identified the essential components that were required to establish a standardized and cohesive system. I analyzed the existing designs with meticulous attention to detail and identified common patterns and components that could be reused across different projects. The objective was to create a versatile and adaptable design system that could cater to the diverse needs of the project while adhering to the brand's established design language.
Additionally, I developed a comprehensive style guide that outlines the guidelines and rules of the design system. The style guide encompasses key elements such as typography, color usage, spacing, interactions, and other essential design principles. By adhering to the guidelines set out in the style guide, it helps ensure that all designs created using the design system remain consistent and align with the established brand guidelines.
Moreover, I conducted comprehensive A/B and usability tests, working closely with other designers and stakeholders to gather feedback and improve the design system over time. To ensure the design system remained current and relevant, I regularly updated and added new components, reflecting changes or updates in brand or design requirements.
Following the creation of the design system in Figma, I worked in close collaboration with developers to integrate the design assets into Storybook, a front-end workshop that facilitates the building of UI components and operates seamlessly alongside developer programs.
Result
The implementation of the design system has been a significant success, as it has resolved the discrepancies in the spacing, color usage, and button states. The adoption of the design system has streamlined the workflow of both the design and development teams, resulting in enhanced efficiency and productivity. The consistency in the design and development process has ensured a uniform appearance and has significantly minimized the time and resources spent on addressing the inconsistencies. The outcome of the adoption of the design system has not only resulted in a consistent look but also facilitated faster development and delivery, which has created a more satisfied and content workforce.
Conclusion
A design system serves as a critical foundation for defining the rules and guidelines that govern the user experience and production. It ensures consistency in design and development, streamlines workflows, and optimizes team collaboration. In light of the success realized with the design system for this project, I intend to advocate for earlier integration of the system in future development cycles, recognizing its essentiality as a best practice in optimizing user experience design.
There are also some potential drawbacks to consider when creating a design system. One potential downside is that it can be time-consuming to create and maintain the system, especially if there are changes to the design or brand guidelines. Another potential challenge is getting consensus from all team members and stakeholders, as they may have different opinions or priorities when it comes to design and development. Despite these challenges, the benefits of a design system outweigh the potential drawbacks, and it remains an essential best practice for optimizing user experience design.