SAP Design System Migration
SAP designers don't have a unified and organized resource to correctly use design components.
I migrated the existing 10-component design system to a centralized and wiki-style system hosted on SAP's internal Confluence network. I re-organized the information architecture, content, and resources in the new design system to promote usability and scalability.
After publishing the Design System in 2018, grew the design system by 10x (from 10 to nearly 100 UI components).
• Conducted comprehensive audit of Google Material Design System for inspiration
• Developed new information architecture for Design System components to promote organization and scalability
• Designed individual component page format to address key design and development needs
• Using Sketch, built system components and design guideline components
• Hosted brainstorm and review sessions with designers to review requirements and progress
• UX Designers
• Visual Designers
• UX Researchers
Existing Design System
The existing Design System is a fragmented collection of Sketch Files (design assets) and PowerPoint Files (usage guidelines), stored locally on individual designer's computers.
A lot of extra time is spent ensuring that components are sourced correctly, up-to-date, and used correctly.
The Macro – Design System Platform & IA
Platform Needs and Principles
The platform needs to be centrally located and accessible to all team members at all times.
The platform needs to be able to be updated, and those updates need to be immediately reflected for all team members.
The platform needs to have clear links that point to assets and resources for designers and developers.
The platform needs to have clear and written usage guidelines to make sure components are used consistently.
The platform needs to be able to be scaled as design components grow in number, usage, and complexity.
Design System Information Architecture
I migrated the Design System to SAP's internal Confluence resource. This allowed me to create a system and page architecture that was well-organized, centrally located, and very scalable for future design needs.
The Micro – Individual UI Component Pages
Every Component Page Includes...
• Component overview
• Related components
• Supported platforms
• Version history
Designer & Developer Links
• Links to specifications and assets for designers and developers
• Screenshot(s) with annotations and labels about each component
• Ways that each component are used
• Do's and don'ts for each component
• Examples and types of information, patterns, and sub-components that can be used inside of the component
Behavior & Interaction
• Expected behavior from user input
• GIFs and guidance for interactions
Responsiveness & Adaptiveness
• Breakpoints and content/behavior differences for mobile, tablet, and desktop devices
• Detailed information on padding, margins, layouts, typography, colors, etc.
• Running list of frequent or important reminders that designers and developers need to consider when using the component
Example Component Pages