United Nations Development Program
Design System Enhancement
A design system streamlines design management by reducing redundancy and ensuring visual consistency across platforms. For UNDP, it means establishing a cohesive digital identity. My role involved refining and expanding the system to enhance usability and alignment with user needs, strengthening UNDP's digital presence.
Team: Digital Communication Studio
Duration: Feb 2021 - Feb 2024
Role: UX | UI
UX/UI Methodologies & Techniques:
Specific component UX research
UI design
QA of implementation
UNDP’s Design System
UI Inventory
UX Audit
Software
Collaborated with UNDP's lead designer to ensure a cohesive design system, working closely with developers to transform designs into reusable products. Utilized Figma as the primary design tool and Drupal open-source content management system. Played a primary role as a UX/UI designer in this process.
The Challenge
As each new project or phase commenced, the recurring cycle of reinventing components and adjusting styles for functionality impeded our efficiency. This repetitive process compelled us to continually recreate old components and compile use cases. Recognizing the necessity for a unified approach, UNDP established a design system. This design system proved crucial given the extensive demand for a consistent look and feel across UNDP's 170 websites worldwide. By implementing this design system, we aimed to streamline maintenance efforts and provide clear guidelines for offices globally.
My role involved maintaining and enhancing this design system alongside the lead designer, ensuring its efficacy across UNDP's diverse initiatives spanning sustainable development, democratic governance, peacebuilding, and climate resilience.
The Benefits
The UNDP design system provides a single source for viewing components, patterns, and styles.
New changes for projects can be efficiently redesigned and managed at scale through the design system.
Design resources can dedicate less time to tweaking visual appearance, allowing a focus on complex problem-solving.
Quick replication of designs is enabled by utilizing pre-made components and elements.
The system reduces the need to reinvent the wheel, ensuring consistency and eliminating inconsistencies.
Wasted design or development time due to miscommunications is minimized.
Great common guidelines for all 170+ world wide sites
The Approach
We started with creating a style guide for the system. Luckily for us this one had already been done. All we needed to do was implement any new changes or elements to the system and link the existing style guide.
In-page annotations for component documentation
Branding details including color schemes, typography (for both web and mobile), and logo guidelines
Spacing guidelines
Layout grids
Icon pack instructions
Guidelines for border radius
These style guides are integrated into the component library to offer relevant guidance within context. The entire team collaborated to compile a list of components commonly used across projects and any new components required in the future. Developing this library required considerable time and resources.
The Contribution
Design Tokens
We initiated the implementation process of design tokens, laying the groundwork for their integration within the UNDP design system. This endeavor involved careful planning and coordination to ensure seamless adoption and alignment with existing design practices. Our efforts mark a significant step towards enhancing design consistency and efficiency across UNDP's digital initiatives.
Design system tokens are standardized design elements that encapsulate visual properties such as color, typography, spacing, and other styling attributes, ensuring consistency and efficiency in design implementation across various platforms and projects.
Documentation
We utilized an open-source platform to document all components, ensuring accessibility to all sites across UNDP's 170 countries. This centralized approach made it easy for each site to access comprehensive information about the components, including clear explanations, picture examples, and guidelines for usage, accompanied by HTML, CSS, and script code snippets for seamless integration.
Project Summary
This project entailed a comprehensive overhaul of the UNDP job and career webpage to align with the organization's updated design system, emphasizing improved user experience and interface elements. Tasks encompassed refining navigation, typography, imagery selection, and job posting layout, while ensuring responsiveness across devices.
The outcome is a visually appealing and cohesive webpage that offers an intuitive and engaging experience for job seekers, in line with UNDP's branding and commitment to usability and accessibility. Throughout this project, I led the design efforts, focusing extensively on coherence and user experience enhancements to transform the UI to meet the standards of the UNDP design system.
