A Mobile App Design System for Old Adults

2019-Current, VISUAL DESIGN STRATEGY & VISUAL DESIGN SYSTEM

Myant Inc

2140cb85-e1ac-440f-bb7a-d79db01d3393_rw_

ROLE

UI & UX Design

Visual Design

Build a design system for a wellness management app rebranding the company's mobile app.

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.

Design system is like a tree, and it will keep growing...

© Feng Yuan 2020

  • Linkedin
  • Dribbble
  • email