SAP Design System Website
An easily consumable single source of truth of SAP design system Fiori
Overview
Designers and developers using SAP design system "Fiori" are having a hard time aligning on the same resource because there are an infinite amount of them that 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 - Feb 2019
The Challenge
How might we standardize and simplify Fiori guidelines for designers and developers to easily consume?
Business goal: Create an open source mechanism to allow for contribution from the bigger community.
The Problem
Finding the right resource is like looking for a needle in a haystack.
Current resources for design guidelines, stencils, development documentation, and etc.
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.
Insights
With the understanding of the major pain points and needs, as well as the business goal, I categorized our insights into 3 categories:
Information Architecture
I came up with 2 versions of information architectures to house design guidelines and development documentation. I did a series of card sorting exercise, 1-1 interviews, and a tree-test with more than 70 developers and designers.
The final solution ( Version 1) was proved to be efficient for users to find the information they need.
2 versions of new information architecture
Design Guidelines
We did multiple rounds of iterations of the guideline template design to make sure they can house all kinds of content such as images, gifs, videos, and code snippets, meanwhile being easy to consume.
We arrived at a final solution which provides all information in a concise format. It also enables developers and designers to customize controls and patterns in a "Playground" and copy the code or open a Sketch template to start building immediately.
Design iterations for guidelines
Contribution
Before I started creating concepts, I did a comparative analysis of some popular contribution models and mechanism. With my earlier research in mind, I believe there are 3 main types of contribution:
1. Report ( bugs, revision in documentation, and etc.)
2. Request (new features, controls, icons, and etc.)
3. Contribute (code, design of controls, and etc.)
Concepts for contribution
The Final Design
To provide designers and developers a design system that is a single source of truth, we have created a design system website that hosts all technoglogies (web, iOS, Android, Conversational UX ), as well as code snippets of development frameworks such as Fiori Fundamental, UI5, React and Vue.
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 provide 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 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
-
Politics get in the way of development
-
Reach an agreement with the development team on criteria of sign-offs beforehand