A Mobile App Design System for Old Adults
2019-Current, VISUAL DESIGN STRATEGY & VISUAL DESIGN SYSTEM
UI & UX Design
Create an accessible visual design system for the old adults.
We are trying to build a wellness management app for the elderly. This app provides a solution of staying connected and caring for those we love, an approach to checking the health and well-being of loved ones from anywhere and at any time.
As a UI/UX designer, I have worked on this project for 1.5 years on crafting and improving the user experience of the entire app. Except for that I have worked on upgrading the visual design style and strategy to ensure the app reach the accessibility requirements of AODA and WCAG.
I was asked to create a color system which would provide a guideline to determine the best way to apply the Skiin color palette.
Since the color palette of this product must keep a correlation with the compony visual identify, the primary colors have to stick with a blueish colors. From my research, I have already known that:
We should avoid blue for important information elements since the elderly is not sensitive to changes of cold colors.
We shouldn't only reply on the color to convey a message;
Pure red & green are the hardest colors to differentiate for color blindness;
High contrast will be the best.
Considering of the aesthetic and accessibility, I develop a more colourful and vivid color collection used as the secondary color, and a soft neutral color palette for background and fonts. For each color, I also develop a complete and holistic variety of shades to satisfy the diverse senarios of accessibility design.
To design a set of font style for copy through out the Skiin platform, I have set the following principles:
Limit the typefaces on interface for simplicity.
Avoid using multiple fonts on a single page.
Font size and line height are aligned to the baseline grid of 8pt.
To be accessible and readable for the elderly, we should use at 16px font for the primary action or goal of a page.
To provide a guideline for arranging components and other UI parts into a full page layout, I create a basic grid layout and layout scale system. In the Skiin, I choose to use multiples of 8 points as the measurement unit. It is an 8 points linear scale for elements with a 4 points half step for spacing icons or small text blocks.
Except for that, I create a spacing scale for smaller, more refined spacing needs (i.e. the spacing between a button and a text copy.) Similar with the layout scale, the spacing scale was also following the concept of using a modular scale. The base spacing increment is 4 pixels and the 2 pixels is the half step. By applying the spacing scale to the margin or padding properties, we keep the UI components consistency.
Here is the end of my documentation, but creating and managing a design system never ends.
Design system is like a tree, and it will keep growing...