FTI Design System Documentation
In this project, I collaborated with my team at FTI to create design documentation for our design system, Sunscreen, using Zeroheight, which greatly improved team collaboration and consistency.
Design Goals
Usability
Create and maintain guidelines, and reusable components, to maintain a cohesive and unified user experience.
Scalability
Create documentation that can evolve with the design system, seamlessly accommodating new components and updates.
Efficiency
Streamline the documentation process to save time and resources.
Accessiblity & Adoption
Provide clear, detailed guidelines to facilitate adoption, communication, and accessibility for designs.
Design System Naming Process
We needed a catchy, simple name for our design system that reflected our brand’s travel theme and was easy to pronounce. Inspired by a travel essential—Sunscreen—our system aims to offer similar security and flexibility digitally.
After brainstorming with design, development, marketing, and product management teams using mind mapping and free association, we shortlisted names and presented them to senior leadership and product teams for feedback.
After brainstorming with design, development, marketing, and product management teams using mind mapping and free association, we shortlisted names and presented them to senior leadership and product teams for feedback.
Planning and Setup
When starting, we planned which software to use and how the team would implement it. We evaluated Supernova and Zeroheight, ultimately choosing Zeroheight for its ease of use. We then scheduled follow-up meetings to determine the best way forward.
Kickoff Meetings
Our initial meetings laid the project foundation, bringing together designers, developers, and brand design to align on goals, define the scope, and establish a shared vision for the design system. We gathered insights through stakeholder interviews to understand their needs and expectations. Clear goals were set, including improving design consistency, enhancing team collaboration, and creating a scalable documentation system.
Page Structure Standardization
To start creating documentation for our design system on Zeroheight, we began by exploring various ways to structure the documentation, page by page. We considered how to template pages for components, foundations, and other essential elements. Additionally, we identified any necessary pages and potential pages that could be added after the initial launch.
Template Structuring
Setting up the Zeroheight design system documentation for FTI Group required planning for clarity, usability, and accessibility. We defined sections for Foundations, Components, Patterns, and Guidelines, and established user roles and permissions. Zeroheight was configured with workspace setup, team member invitations, and tool integrations. Standard templates ensured consistent documentation.
Foundational Documentation
For the sidebar structure, we grouped elements like Colors, Typography, and Layout under Foundation. Breaking down information into subcategories like Overview, Guidelines, and specific components made documentation easier to understand and navigate.
Within the Foundation section, we documented color palettes, usage examples, and accessibility considerations. We also covered approved font families, sizes, weights, and styles with examples and a typographic scale. Our grid system guidelines included column layouts, gutters, margins, and spacing rules. Additionally, we documented the icon library with usage guidelines, examples, and border radius, and elevations.
Within the Foundation section, we documented color palettes, usage examples, and accessibility considerations. We also covered approved font families, sizes, weights, and styles with examples and a typographic scale. Our grid system guidelines included column layouts, gutters, margins, and spacing rules. Additionally, we documented the icon library with usage guidelines, examples, and border radius, and elevations.
Component Documentation
We created comprehensive documentation of our UI components, including buttons, inputs, modals, and navigation elements. Each component entry featured a brief overview, usage instructions, best practices, and common pitfalls. High-fidelity mockups and real-world examples illustrated proper usage.
We provided HTML, CSS, and JavaScript snippets to help developers implement the components accurately. We also created a component status page showing a roadmap of what components were available in Figma, code, and documentation, as well as which were in progress or to-do.
We provided HTML, CSS, and JavaScript snippets to help developers implement the components accurately. We also created a component status page showing a roadmap of what components were available in Figma, code, and documentation, as well as which were in progress or to-do.
Onboarding Documentation
We created onboarding documentation that was initially available in Confluence and transferred it to ZeroHeight. We expanded the 'Product Designer' onboarding to include tutorials for Figma variables, slots, and recommended plugins to help designers quickly get up to speed with the system. I collaborated with developers to ensure their onboarding section met their needs and would be useful for new joiners in the future.
Design Development
Brainstorming sessions in Figma generated various logo concepts, exploring styles, symbols, and typography. Initial sketches and rough drafts led to refined thumbnails and heroes through multiple reviews and iterations. We then finalized the best sketches in Figma, experimenting with colors, fonts, and layouts.
After presenting the logo to stakeholders and refining the designs, we finalized a logo that encapsulated the design system's name, Sunscreen.
After presenting the logo to stakeholders and refining the designs, we finalized a logo that encapsulated the design system's name, Sunscreen.
Logo Exploration
Logo Final
Thumbnails and Hero Exploration
Thumbnails and Hero Final
Creating a Custom ChatGPT
I created a custom ChatGPT model to reduce the time needed to create and update documentation. It ensured documentation had a consistent voice and style across the design system.
I developed specific prompts for each component and foundational element to generate descriptions, usage guidelines, visual examples, and code snippets as templates for documentation. This automation ensured consistent documentation and enabled rapid scaling as new components and elements were developed.
I developed specific prompts for each component and foundational element to generate descriptions, usage guidelines, visual examples, and code snippets as templates for documentation. This automation ensured consistent documentation and enabled rapid scaling as new components and elements were developed.
Collaboration and Workflow
Design and Development Syncs
Weekly review meetings provided feedback and ensured synchronization between designers and developers. Jira tracked tasks, managed sprints, and maintained the project backlog with clear task definitions and deadlines.
Daily stand-ups addressed progress, blockers, and daily goals, keeping everyone aligned. We worked closely with the development team on Storybook changes to upload updates to Zeroheight, ensuring seamless collaboration through effective communication and integrated tools.
Daily stand-ups addressed progress, blockers, and daily goals, keeping everyone aligned. We worked closely with the development team on Storybook changes to upload updates to Zeroheight, ensuring seamless collaboration through effective communication and integrated tools.
%20-%20Light.png)
Outcome
- Created a single source of truth for design system documentation, addressing usability, scalability, efficiency, and accessibility goals.
- Improved collaboration and alignment among team members through cohesive components, clear guidelines, and proper usage instructions.
- Ensured scalability with evolving documentation, streamlined processes, and onboarding guides for new members.
- Centralized in Zeroheight, enhancing efficiency, reducing redundancy, and fostering adoption across the team.
Post-Project Steps
We started design office hours to help onboard designers on how to correctly use the design system and to address any questions that came up about the system or projects. We began monitoring the usage of the design documentation based on feedback and also developed strategies to promote the adoption and usage of the design system within the organization. We also identified areas for future enhancements and expansions of both the documentation and the design system.
