SKIIN | Consumer-facing product

About SKIIN

SKIIN is one of Myant’s main products. SKIIN is a garment that allows you to proactively manage your health from the comfort of your home, regardless of where you live. The SKIIN app is where you can visualize your health metrics.

Overview

During the Fall of 2021 to the Spring of 2022, I interned at Myant as a User Experience Designer working on the UX design team. In my role as the UX Design Intern I worked primarily on feature implementation in our mobile app. My work included UX Research (feature ideation, user persona creation, interviews and analysis, and user stories) and UI Design (wireframing, interactive prototypes, high-fidelity designs, and maintainance of the design system and component library). Presented below is one of the initiatives I led during my internship.

UI Component Library

How might we organize, develop, and standardize components used across the UX team?

Our component library was designed by our UX team to help ensure and maintain consistency across the SKIIN app. I designed a set of guidelines that would make it easier for designers to understand how these components are used. This is still being worked on and what I present are the initial steps I undertook to achieve this.

Design Objectives

• To setup guidelines for how components are used. This will help when onboarding new designers onto the team and also for exisitng designers, ensure that UI elements are being used in the right way.

• Keep track of new UI elements that have been created.

• Allow easy reuse by setting up UI elements as resuable components

Painpoints

• Locating certain UI elements by having to copy-paste from other files

• Recreating common UI elments on the page every time a new project is started

My Process

Audit of Existing Component library

A full audit of the existing component library was conducted as well as some of the app screens. To do this, I had to rely on certain Figma plugins like DesignLint, BatchStyler and Annotate it!. The main UI elements I prioritized for the first stage of the audit were typography, colors, and spacing. These UI elements are consistently present throughout all the screens in our app.

Typography Overview

Things Reviewed

• Existing typography guidelines

• Typography in practice

Insights

• There are too many of the same font size being repeated for the different typography styles.

• The font sizes are too similar/close together. We are not using a consistent type-scale for our fonts.

Recommendations

• We need to pick a type-scale we are using and be consistent with it. each type-scale has its recommended distance between font sizes. Refer to Type-scale website. Recommended is Major third, this allows for significant difference and helps establish visual type hierachy.

Typography Recommendation