SAP Design System Migration
User Interface Designer – SAP – June to December 2017
PROBLEM

SAP designers don't have a unified and organized resource to correctly use design components.



SOLUTION

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.



OUTCOME

After publishing the Design System in 2018, grew the design system by 10x (from 10 to nearly 100 UI components).
My Role
• 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
Collaborators
• UX Designers
• Visual Designers
• UX Researchers
• Engineers

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

1. Accessible
The platform needs to be centrally located and accessible to all team members at all times.

2. Updated
The platform needs to be able to be updated, and those updates need to be immediately reflected for all team members.

3. Pointers
The platform needs to have clear links that point to assets and resources for designers and developers.

4. Guidelines
The platform needs to have clear and written usage guidelines to make sure components are used consistently.

5. Scalable
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...
Basic Information
• Component overview
• Related components
• Supported platforms
• Version history

Designer & Developer Links
• Links to specifications and assets for designers and developers

Anatomy
• Screenshot(s) with annotations and labels about each component

Usage
• Ways that each component are used
• Do's and don'ts for each component

Content
• 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

Visual Specifications
• Detailed information on padding, margins, layouts, typography, colors, etc.

Checklist
• Running list of frequent or important reminders that designers and developers need to consider when using the component

Example Component Pages