OS Design Systems
Project Case Study :: Documentation
Case Study Overview
This case study examines the documentation of design systems of the mobile team. As the lead platform designer of six years on the team, I possess extensive knowledge of both past and present components.
Whenever possible, I primarily use native components based on Google’s Material Design and Apple’s Human Interface Guidelines. However, I also adapt components for complex needs and improve accessibility and branding elements.
I have created two design systems for both the iOS and Android teams, although the examples in this case study focus on iOS.
Goals
- Document common and uncommon design patterns throughout the app.
- Discover out-of-date components that could be updated to better components.
- Have the ability to show engineers the different components we are utilizing with their different states.
- Speed up the design process and create cleaner document builds.
- Create guidelines around Dark Mode implementations.
The Four Click Rule
USER STORY:
As a manager, I want to look at my lowest Q12 Score, so I can know what I need to improve.
I came up with the "Four Click Rule" as a way to ensure our core user goals were met within the rule. When it wasn't initially possible, I found ways to sneak them in different ways that could or could not need a click-through to get to the information, but would also try to keep it lower than four.
iOS Design System
I created the design systems within Adobe Xd as if they were web page mockups. To the engineers, it feels close to a real website when it is prototyped up.
Within Xd, engineers can inspect the components and see the values of all the components for accurate implementations.
