Health Pal Design Documentation

Atomic Design System

Health Pal Design System Version 1.0

Introduc5on Health Pal’s design language system is a development tool that brings cohesion to the digital product’s user interface and experience. All brand and UX components including usage documentaFon will be managed here. Changes sync to the whole team, and designers can switch to the latest version or roll back updates at any Fme. This file has been built based on Atomic Design principles, an effecFve interface design system which is not a linear process, but rather a mental model to help my team members think of our user interfaces as both a cohesive whole and a collecFon of parts at the same Fme.

Index Fundamentals

Atoms

Molecules

Organisms

Voice and Tone

BuNons

Input with Label

BoNom NavigaFon

Brand Colors

Checkboxes

Search Field

Dialogs

Typography

Switches

Date Picker

Half Screen BoNom Sheets

Grids

SelecFon BuNons

Text Area AcFve

Search Result Cells

Iconography

Segmented Controls

Search Bar

Cards

Images

Tool Tips

Logos

Messaging

IllustraFons

IllustraFons

Do’s and Dont’s Gradients Cards SelecFon Controls Text Readability

Fundamentals

Fundamentals

Colors Iconography Typography Grid Systems

With our product we are geing to the heart of what maNers most our customers. Our visual design elements create an impression that Health Pal is fundamentally designed around paFent needs something very different to a typical healthcare experience.

Voice and Tone Health Pal’s personas are representaFons of a cluster of our target customers who exhibit similar aitudes, goals, and behaviors in relaFon to our product. Thanks to our personas, our design team is able to keep the real user at the heart of everything we design.

Nya: The Teacher Nya is a 34yr teacher living in California with her husband and raising two children. Her Fme is valuable and she needs a way to submit what she’s looking for in a health pracFFoner and have someone do the research and make the appointments for her and her family. She wants to make her health a priority and keep up with her regualr appointments, but she is unable to do so with her busy schedule. MoKvaKons MoFvated to book the top health pracFFoner’s based on Google and Yelp raFngs. Nya is interested in learning more about alternaFve therapy treatments.

Alex: The Triathlete Alex is a 40yr product director at a corporate investment and incubaFon firm and triathlete. He struggles with finding health pracFFoners near his office that have available appointments that work with his schedule. MoKvaKons MoFvated to treat injuries from being an athlete and oUen see’s health pracFFoner’s for preventaFve maintenance and rouFne body care. Alex does not have Fme to call mulFple health pracFFoners to see if they provide a parFcular service.

Kate: The College Student Kate is a 21yr college student living in Boston. She’s been adjusFng to this new independence in her life and is sFll learning to keep up with the process of booking her yearly health exams. Since Kate is new to Boston, she feels overwhlemed when trying to select a doctor out of the many provided to her through her insurance’s web portal. MoKvaKons MoFvated to find a new general health pracFFoner. Kate is a liNle embarrassed about asking certain health quesFons over the phone and would like to make appointments via text message or booking through an app to make her feel more comfortable.

Brand Colors Color is an extremely purposeful branding tool. It crosses language barriers to become the most powerful symbol of brand consistency. To promote global recogniFon for Health Pal, we use cohesive, consistent and ownable brand colors. Studies have shown that color can increase brand recogniFon by up to 80%. For Health Pal, the primary color chosen for our paleNe is a soothing Green. Green is thought to relieve stress and help heal. Green is a cool color that symbolizes nature and the natural world. Green also represents tranquility, good luck, and health. Did you know those who have a green work environment experience fewer stomachaches? Health Pal’s expressive secondary colors are hues of green and blue which provide an important supporFng role. Also included is a hot cool pink that is a split complementary color. Harmonious and interesFng, split-complementary colors will give our app just enough contrast to draw aNenFon to important details.

Colors

Primary Color

Secondary Color

Image Gradient

#0E353B

#0E353B

#0E353B

System Colors

Light Cyan

Lavender

Playful Accent

Plum

#D3F2F0

#E7DDFF

#FF50F4

#813B6E

H1 Header

Body Copy

InacKve State

Divider Line

Background

#1C2637

#727680

#D6D6DB

#EFF0F3

#FFFFFF

iOS Icons i

Typography Text and typography oUen define an interface—the majority of any app’s UI is text. Having a suitable typeface that’s set well is criFcal for an interface and, because Health Pal is a design led company, we care a great deal about the expression of our interface. We needed a soluFon that would lend a consistent voice across all mediums and plaporms we support—web, iOS, and android. We are using Google’s free open source font, Lato, which renders beauFfully on the browser and with good readability. Lato is a classic font which pairs well with Open Sans and Raleway. It was designed by Łukasz Dziedzic in 2010 and has been widely adopted aUerward. Currently, it is adopted by more than 8,600,000 websites.

Font - Lato 1st Level Headline | 30pt Black

This is the largest header for welcoming and onboarding 2nd Level Headline | 24pt Bold

This is a modal header for booked appointments 3rd Level Headline | 18pt Bold

This is the most used Ktle header for list cells, cards, and paragraphs

4th Level Headline | 16pt Black This header is used for the name of the health or wellness prac55oner

Copy Text Paragraph | 18pt Bold

Bullet Points

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

• Cold Laser Therapy

• Spinal & Postural

• ChiropracFc Care

• CorrecFve Exercises

• Myofascial Release

• NutriFonal Counseling

• Acupuncture

• Lifestyle Advice

14pt Regular

14pt Regular

Grids

Android Material 8pt Grid iOS SoV 8pt Grid

Web Responsive Layout Grid

Grid Details hNps://material.io/design/layout/responsive-layout-grid.html#grid-customizaFon hNps://medium.com/sketch-app-sources/soU-8pt-grid-for-sketch-e6c3f3556960

Atoms

Atoms

BuNons Checkboxes Switches

Atoms are the basic building blocks of maNer. Applied to web and naFve app interfaces, atoms are our buNons, checkboxes, switches, selecFon buNons, segmented controls, images, logos, and illustraFons.

SelecFon BuNons Segmented Controls Images Logos IllustraFons

BuXons Android

iOS

Normal Btn

Normal Btn

Normal Btn

Normal Btn

Normal Btn

Pressed Btn

Pressed Btn

Pressed Btn

Pressed Btn

Pressed Btn

Disabled Btn

Disabled Btn

Disabled Btn

Disabled Btn

Disabled Btn

Secondary Btn

Secondary Btn

Secondary Btn

Secondary Btn

Secondary Btn

Normal Btn

Normal Btn

Normal Btn

Normal Btn

Normal Btn

Pressed Btn

Pressed Btn

Pressed Btn

Pressed Btn

Pressed Btn

Disabled Btn

Disabled Btn

Disabled Btn

Disabled Btn

Disabled Btn

Checkboxes

Switches

Checkboxes

Switches

SelecKon BuXons

Segmented Controls

OpFon 1

OpFon 2

OpFon 1

OpFon 2

OpFon 1

OpFon 2

OpFon 1

OpKon 2

Images

Doctor Profile - Office Images

Home Card

Profile

Profile

Profile

Logo

Health Pal

IllustraKons

Molecules

Molecules

Input with Label Search Field Date Picker Text Area AcFve

Things start geing more interesFng and tangible when we start combining atoms together. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properFes and serve as the backbone of our design systems.

Search Bar Tool Tips Messaging

Input with Label

Search Field type symptom, doctor, or treatment…

Label Input

Text Area AcKve

Input Filled

Describe Symptoms

I am experiencing pain in my leU achilles tendon. Interested in cold laser treatment or other recommendaFons.

Date Picker Monday, September 7

258

S

M

T

W

T

F

S

6

7

8

9

10

11

12

Tool Tips

Search Bar iOS

Browse Health PracFFoners

Got a quesKon?

Looking for something?

Ask your Health Pal who can provide recommendaFons and book your next appointment for you.

Android

Browse Health PracFFoners

If you have not talked to your Health Pal yet, try searching for a doctor or wellness expert here.

Messaging Info

Warning A short, auto-expiring info message

A short, auto-expiring warning message

Success

Error A short, auto-expiring error message

A short, auto-expiring success message

Organisms

Organisms

BoNom NavigaFon Dialogs Half Screen BoNom Sheet Search Result Cells

Molecules give us some building blocks to work with, and we can now combine them together to form organisms. Organisms are groups of molecules joined together to form a relaFvely complex, disFnct secFon of an interface.

Cards

BoXom NavigaKon Android

Home

iOS

Assistant

Schedule

Calls

Home

Profile

Assistant

Schedule

Calls

Profile

Dialogs

Half Screen BoXom Sheet

Search Result Cells

Cards

Dr. Olivia Wild Physical Therapist

0.2mi

Health Chart Track your annual physical, dental, skin, and vision exams with your Health Chart.

18 Reviews

Madison Park, SeaNle 8:30am

10:00am

10:00am

Blake Johnson, DC Chiropractor

View Chart

0.3mi

12 Reviews

My Doctors

Madison Park, SeaNle 6:30pm

9:00am

1:30pm

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

2:30am

Find Doctors

Do’s and Dont’s

Do’s and Don’ts

Gradients Image Cards SelecFon Controls Text Readability

When building an inclusive design language system with systems thinking, our design system is only as strong as our relaFonships with the teams who use it. For a robust design system to work, our company needs a mature culture that empowers people develop the system together. Without this, designers may feel like the system is limiFng or blocking their creaFvity. Our intent is to conFnue to support teams as they build a sustainable design system community together and form an organic alliance. The purpose is to meet our customers at the visceral, behavioral and reflecFve level. We want our customers to experience emoFons such as admiraFon and trust, which require Fme to build. Consistency in interfaces, will build trust by constantly proving customer expectaFons true.

Gradients

Do

Image Card Treatment

Don’t

Wellness

Medical

Do, use Lato font in bold and select background images that are easy to interpret. Keep images clean, bright, posiKve, and minimal. For cards use overlay #1A3228 at 40% opacity.

Don’t, select images and place Lato font over image without a transparent overlay layer as seen here.

Don’t

SelecKon Controls Title

Title

Line item unselected

Line item unselected

Line item selected

Line item selected

Line item unselected

Line item unselected

Line item selected

Line item selected

For all plaeorms iOS, Android, and Web do keep all selecKon controls to the right side of line item.

For all plaeorms iOS, Android, and Web do not place selecKon controls to the leV side before the line item.

Text Readability Title Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitaFon ullamco laboris … In ReKna, the most ideal text size for reading is about 16pt, while typography should be at least 12pt to be legible at a typical reading distance without zooming. The general rule for our product is 12pt for small text, and 16pt for body text and 18pt+ for Ktles.

Title Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitaFon ullamco laboris …