Embedded Files
Re-designing & Creating Brand Ethos for a digital Health-Care products and services (B2B & B2C)
OLD - Website & Mobile App | Before Defining Design System
GOAL
My goal was to give one definitive design direction to the team and org, by building design system guided by a shared ethos.
In the process, making the Health Care brand instantly identifiable to customers and to scale the direction across the end-to-end experience of everything made by MediBuddy.
As a Design School graduate the visual design language in a design system is one of my favourite part to work on. I love thinking about Color theory, Typography, and Composition which are at the core of any design system.
Role: Director of Design
Responsibility: Research, Define, Deliver & Drive the Design System
Team: 2 Members
Preparation
Laid down all the exisitng flows and their associated screens to understand the depth of existing system and the issues. Listed & Created inventory of all the components by making sure everything is covered.
This process revealed inconsistencies in the exisitng design language and paved the way for a design system.
Process
ETHOS
DESIGN PRINCIPLES
FOUNDATIONS
COMPONENTS
ENVIRONMENT
CONTENT
1.
The Ethos:
The set of moral Beliefs
& Attitudes
In order to accomplish our mission, the brand, marketing, tech and product teams decided to collaborate as one. First, we let go of past work and evolved towards one direction together.
It was equally important to have a shared backlog of goals and tasks we decided on as a group. We hosted cross-disciplinary feedback sessions and retrospectives.
We started shaping our shared philosophy by identifying the unique value we as MediBuddy bring to the world
MediBuddy Ethos
2.
Design Principles:
A few simple Considerations & Constructive questions which guided me & the team towards decision making.
Principles are important for design systems, primarily for describing how it was created, and how the makers of it would intend it to be used.
- Rich Fulcher
I have listed my Top 5 principles in the other project.
3.
Foundations:
The Visual Elements
Foundations are the visual elements needed to create engaging end-to-end user experiences.
This includes guidance on:
TYPOGRAPHY
COLOR
ICONS
ILLUSTRATIONS
GRID & COMPOSITION
When Care meets
TYPOGRAPHY
After multiple checks & testing in various conditions, went with Nunito.
We wanted to pick a typeface which resonates with the mood of our Ethos & reflects high readability when put together .
Nunito is a well balanced, highly-readable sans-serif typeface. The characters have thin, uniform stroke widths that work well for both body and display copy. Some of the impressing characteristics of the typeface incluude:
Space (Clean, Wide, Multiple Balanced Weights)
Shape (Divisor, Smooth)
Stroke (Thin, Uniform Stroke widths)
Movement (Smooth, Rounded)
Mood (Happy, Fun, Adapting, Organic)
Glimpse of Nunito usage at MediBuddy
Typography is a wonderful & Vast concept, Describing all our effort of type scale in one simple paragraph, is never enough...
Calming Blue & Fresh Red
COLOR
MediBuddy as a brand known to people in 2 colors since year 2000. We didnt want to goaway from that, but those existing colors required modern touch.
So we picked the best of the palette i.e, Calming Blue & Fresh Red
We limited the brand down to two palette types: Cool Colors & Grayscale (including black and white).
This duality gives users the ability more quickly perceive success, alert, error, and warning colors (green, yellow, red, orange) because they stand out from the cools and neutrals.
As a part of defining design system, we went on to fix the logo using newly defined elements.
The ratios are defined very close (1.5) to Golden Ration (A/B= A+B/A = 1.6)
Primary Color palette is induced with brand color Blue, along with dark and light color while ensuring accessible color contrast across values.
Designing for Health care product, which means usability becomes at most priority. We ensured sufficient color contrast between elements, to help users with low vision to have fine interaction & better experience.
Each color in Secondary Color palette is selected intentionally to provide meaningful feedback within our products. These colors also provide soften the experience and to impart confidence and optimism.
WCAG Standards
Background & Visibility
Text Weight - legibility
Expressive & Simplified
ICONOGRAPHY
"Icon is a representative visual symbol of any Thing or a Person in a simplified manner"
said Chakradhar Saswade.
(One of the greatest design faculty in the country or may be in the world, as far as I know)
I could recall all my Fundamentals of Design, Iconography - Vectorisation classes learned from design school. All those learning paid back when I started iterating Minimal Forms and Expressing essential characteristics of Human body organs for Health Care digital products.
These icons were demanding more organic forms rather than simplified geometrical shapes. So went on to craft those & defined outline of key shapes to bring balance and harmony across the elements.
1:1 Unit Grid (48x48 dp)
with 1dp Stroke
Example:
1dp Stroke works perfect in 1:1 Grid (48x48) with primary color & Gives opportunity to be more expressive when stiched with secondary color.
Even in 24x24 dp Grid, 1dp storke looks more Expressive and Fresh with primary Color than the bold icons.
Also you can notice the finer details of organic shape creating more feel than the geometric one in 24x24 Grid.
Key characteristics of our Icon System:
Light & Simple
Clean & Fresh
Organic Form
Expressive & Uniform
Balanced & Consistent
Connecting to T3 Audience
App & Web Icons
Primary &, Secondary Set of Active Icons
Informative Icons
Lab Tests & Health Checkups
Today we have more than 500 icons, sitting perfectly in our Visual Library..!!
Engaging & Meaningful
ILLUTRATIONS
Illustrations are power-full assets.
They not only communicate complex ideas in simple way but also play key role in brand system. They increase engagement with users and creates emotional bonding.
Trust, Care and Guidance :
With the kind of Ethos and Principles we have, we decided to follow Emotional Design principles to create bonding with users offering more Trust, Care and Guidance across all stages of product.
That can be someone who came to seek emergency medical help, wellness guidance, proactive suggesstions, etc.
Primary Informative
Speciality | Symptoms | Health Problems
Secondary Informative
Subscription plans | FAQ's | Guiders
Health Buddy (Emotional Design)
Is a friend who connects emotionally & positively with users. He helps them to achieve their tasks by:
Guiding & Suggesting
Appreciates & Gives Feedback
Will be Polite & Obedient
Gives Love, Trust & Care
It is a best thing to have a signature personality with which users can connect emotionally. It is the feeling which bonds anything.
Editorial
Promotional Banners | Events | Blogs & Stories | Other Services
Multiples of Two
GRID, SPACE & COMPOSITION
In order to practice good typography and layout, it’s essential to have a strong grid. In general 4pt or 8pt grid is the most common grid you could find on other apps.
Consistent use of any grid system provides the foundation for harmoniously and consistently positioning elements onscreen.
After multiple discussions with stake holders and backed up design research, decided to go with below grid for better scalability:
Columns - 4 on Mobile | 8 on Tablet | 12 on Desktop
Gutters - 10 / 16 dp | 24 dp on Tablet
Margins - 10/16 dp on Mobile
Spacing units play the support role to the underlying grid on Desktop.
We based spacing on multiples of 2 (4, 8, 16 etc.). These “spacers” are the invisible areas between blocks of content which give it form and shape.
Composition & Golden Ratio: (Check Design Principles that we follow)
This principle gave us structure to basic Layout & Elements placement.
I have always followed the 12/16 grid for balancing entire composition.
4.
Components:
The Building Blocks
Systematic reuse of components helps to create visual and functional consistency across products.
Each component is defined by it’s required elements (such as title, text, icon, picture and Options). Every element have a function and and expresses personality.
We made some huge lists and filled excel sheets to keep track of the existing components we ideally need, the ones we already have and some that need thought from ground-up.
This helped us to go through all the flows, screens, use-cases and by devices basis. All the tracking, linking, editing, cleaning was done on this sheet.
We defined components behaviour mainly in two ways:
Actionable (motivates user to take action)
Behaviour: They Float, Have Active Links, Primarily uses Blue.
Disabled (Communicate information, Settled, Non-actionable)
Behaviour: Stuck to the base, Non-movable, can have actionable elements
Few important basic components defined for Mobile App
5.
Environment:
The Building Blocks
Elevation Preview: Daily Activity Tracking section in the app
Which is more lighter? (A,B,C,D)
Often digital products environment in which components move around is seen in default state (A).
But to match our Ethos & Principles we needed a lighter environment where elements move friction less. When elements are stitched with right elevation they Create and Reflect a character. Distress, Calm, Clean, Hygiene, Positivity and totally a Healthy environment in the app.
Based on different defined material sizes and visual weightage, elevations are customized accordingly (Should keep it minimal to avoid tech burden as they need to create custom widgets than default one)
6.
Content:
Empowering People
Having a masters degree in Information Design, I am keenly aware of all the values that well-designed content can bring to any product and to the brand. It empowers people to use all the digital product offerings with ease.
Voice, Tone, Writing style, no of words and every little detail information communicating to end user becomes important in UX writing.
Some of the key values we believe in, while writing w.r.t to brand:
Simple and Easy to understand (In everything)
Persuasive with Clear point of View (while motivating)
Friendly, Human, and Inviting (All health issues)
More Caring & Notifying (for chronics issues)
After Redesign: App & Website
The design system has to keep evolving...
THANK YOU
Google Sites
Report abuse