A Mobile App Design System for Old Adults

2019-Current, VISUAL DESIGN STRATEGY & VISUAL DESIGN SYSTEM

Myant Inc

Frame 51.png

ROLE

UI & UX Design

Visual Design

Create an accessible visual design system for the old adults.

DELIVERABLES

Style Guideline

UI Component

Hi-fi Prototype

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.

Color System

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.

Typography

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.

Structure

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.

UI Components

Frame_edited.png

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...

© Feng Yuan 2020

  • Linkedin
  • Dribbble
  • email