Mobile Design System
Mobile Design System
Embedded Files
Android & iOS Design System Unification
Android & iOS Design System Unification
The client had a popular mobile app whose design was completely different between iOS and Android. This resulted in extra time spent designing two separate apps, feature creep going in two different directions, and a weakening of the visual brand. My team and I were tasked with creating a more consistent design system.
Our first step was to have the Content team go through iOS and Android design guidelines to find out how terminology was used. Previous experience had told us all that consistent terminology was essential to preventing confusion and unnecessary communications. Once we had our vocabulary set, we created an empty file for our Design System project in Figma, with one page for each component.
Each component page included:
Overview
Overview
A quick illustration of the component's appearance on both iOS and Android, with variations.
Usage Instructions
Usage Instructions
An explanation of the circumstances under which the component should be used, and which variations to use when.
Anatomy
Anatomy
An indepth description of dimensions, light and dark mode colors, state properties, and any components that are used as a part of this larger component.
Context & Placement
Context & Placement
A visual representation of how the component appears in the context of a screen, with notes on visual hierarchy and potential conflicts with other components.
Accessibility
Accessibility
Notes on accessibility requirements including voiceover, contrast, larger text size handling, touchpoint sizes, and keyboard access.
Components were user tested as part of each screen as they were built out. The result was that this was a living document receiving frequent edits and changes as new pitfalls and requirements were discovered.
Eventually we discovered that the use of Figma for all this documentation had its limitations; access required a Figma license, which was not feasible for presentation to non-design and non-developer roles, and was not user-friendly enough. We landed on Zeroheight as a web-based interface and gradually moved the content to an instance there.
Page updated
Google Sites
Report abuse