The single source of truth of SAP design system Fiori.
SAP Design System Website
Overview
Designers and developers using SAP design system "Fiori" are having a hard time aligning on the same resource because of an infinite amount of them are all different.
I redesigned Fiori website to be the single source of truth for both designers and developers to easily consume Fiori.
Role & Duration
Product Designer
UX Strategy, Project Management,
User Research, Workshop Moderation,
Concepting, Interaction & Visual Design, Testing
Team of 3 designers, PM, 4 developers
Oct 2018 - Now
Finding the right resource is like looking for a needle in a haystack.
SAP overwhelms developers and designers with a considerable amount of resource websites. This causes further problems such as developers and designers use different versions of the design system.
13
Design Websites
9
Development Documentations
Current resources for design guidelines, development documentation, and etc.
Business Goal
Create an open source mechanism to allow for contribution from the bigger community.
The Problem
Challenges
1. Getting everyone onboard
A new Design System website is not a one-man project and if we want to succeed we need everyone on board: executives, documentation creators, branding, design and development team, and etc.
2. Standardizing and simplifying Fiori guidelines
How might we create one website that accommodates most important documentation and resources for designers and developers to easily consume.
Qualitative Research & Personas
After 1-1 interviews and group sessions with about 50 designers and developers with diverse backgrounds to understand their workflows and pain points, it has become more evident that both designers and developers are looking for a one-stop shop for design guidelines and development documentation.
Newbies
Designers
Developers
Experts
Insights
With the understanding of the major pain points and needs, as well as the business goal, I categorized our insights into 3 categories:
2 Versions of New Information Architecture
Information Architecture
To house all design guidelines and development documentation, we had multiple attempts to create an effective information architecture, and eventually we narrowed them down to 2 versions.
After a series of card sorting exercise, 1-1 interviews, and a tree-test with more than 70 developers and designers, version 1 was proved (avg success rate 85%) to be efficient for users to find the information they need.
Design Guidelines
1. Ideate on sections and features in the guidelines
We did a comparative analysis to understand how other major design systems make their documentation easy to consume. Then we brainstormed on must-have sections in our guidelines and some nice features to make them more consumable and understandable.
Early Ideation of Each Section
2. Combine sections and test templates with real guideline content
With identified sections, we needed to create a complete template that is sufficient to house all kinds of content such as images, gifs, videos, and code snippets. Instead of using the typical "Lorem Ipsum" placeholder texts, we iterated our designs using the existing real guideline content.
Sample: Design Iterations For Guidelines
3. Results: Guidelines That Corporate Both Design & Development
Easy Navigation
A Playground to Easily Try Out & Copy Code or Get the Sketch File
Brief Description of Usage with Supporting Imageries
Comprehensive Information Within Reach When It's Needed
Component - Design
Component - Develop
Demos of Different Types of a Control
Comparative Analysis of Contribution Models
Contribution
Before I started creating concepts, I did a comparative analysis of some popular contribution/ open source models and mechanisms to understand the landscape of similar design systems.
With the research in mind, I started defining the types of contribution. After discussion with my PM, we narrowed down to 3 main types of contribution:
1. Report ( bugs, revision in the documentation, and etc.)
"I noticed something missing or unclear in the guidelines of a component, and I want to report it."
2. Request (new features, controls, icons, and etc.)
"I'm looking for a component for my use case that doesn't exist, and I want to request for it."
3. Contribute (code, design of controls, and etc.)
"I have some ideas/ designs/ code for a new component and I want to share them with more people."
A Comprehensive Web Design
Addition to guidelines and contribution, the final designs are comprehensive website designs including all aspects, such as home page easy entry to all technologies, global search, simple guidelines, contribution access and etc.
A Home page that surfaces popular topics and short cuts into different resources and guidelines.
Search allows for quick access to needed information.
Get Started provides a shortcut to all the resources for the beginners.
Contribute section provides a place for designers and developers to report bugs, request new features and controls, and contribute.
Landing Pages showcase filtered information for a specific technology (web, iOS, Android, and etc ).
Library Page provides a quick view of all the visual elements.
Clean and Interactive Component Page
Users can easily understand the look and feel and the interactions of certain control and pattern by simply playing around with the demo, configuring it and seeing the changes.
Design - Design guidelines
Develop - Code snippets
Impact & Next Steps
This project has gained significant support and positive feedback from our stakeholders and users during the process. We aim to roll out the first release in May. We have laid out the foundation for analytics for the website visits and consumption, and it will help us with improvements.
Lessons Learned
-
Should always align with stakeholders on the goals regularly.
-
Reach an agreement with the development team on criteria of sign-offs beforehand.
