CMS Design System .
CMS Design System
.
CMS Design System
.
CMS Design System
.
e sf
Overview
Achieving consistency and efficiency with a design system
To meet the growing demand for new functionalities, a user-centered and visually refreshed mobile app was urgently needed for Officetrax, a Computerized Maintenance Management System.
As the principal designer, I implemented a design system comprising a style guide, pattern library, and component library for the mobile interface.
The design system aimed to achieve high consistency in design, code, and brand, enhance team communication, and streamline the implementation process. Its impact was significant, aligning the team, fostering consistency, and saving valuable time.
Role: UX UI Designer
Tools: Figjam, Teams, Figma, Adobe Suites
Time frame: 2022 June - 2023 April
Company: Officetarx
Problems statement
Addressing 4 main design issues
-
Lack of Design Consistency: The current design lacked consistency, resulting in an inconsistent user experience across different screens and interactions.
- Lack of a Source of Truth: There was no centralized source of truth for the QA team and development team, leading to inconsistencies and communication gaps during implementation.
- Accessibility Issues: The existing design patterns had accessibility issues and were not optimized for mobile devices, impacting the user experience.
- Limited Responsive Design: The design was not responsive and did not adequately support two screen sizes - mobile and iPad.
“ Working alongside them has been an absolute pleasure, and their outstanding skills and dedication have left an indelible mark on our projects.
...Yang's creation of a comprehensive design system for the project played a crucial role in aligning the team, fostering consistency, and streamlining the design process, resulting in increased productivity and a cohesive user experience across all aspects of the mobile application. ”
Approaches
Evolving with agility & embracing change in design
To address the challenges and obstacles, the following approaches were taken:
- Establishing Visual and Functional Elements: A StyleScape was created to establish the visual direction and advocate for the best design practices within the company. Both visual and functional elements were considered to ensure a cohesive and user-centered design.
- Asynchronous Communication: To make the design system accessible to a range of internal users, efforts were made to provide sufficient context through the rationale behind design decisions, showcasing principals, interactions, states, and detailed specifications. Research sources and alternative considerations were also documented for future designers and the wider product team.
- Collaboration and Alignment: Notes and different design stage iterations were put in place to align expectations with the leadership and development teams. Regular daily stand-up meetings were conducted for design implementation reviews, allowing for feedback, iteration, and prioritization within the limited time and resources available.
- Design Audit and Color Accessibility: A design audit was performed to identify existing design inconsistencies, while particular attention was given to color accessibility to ensure inclusivity and address any potential issues.
