Frame-2

PM + Product Design

TIER Design System

Creating and executing the whole implementation process of TIER's Design System, both as a Product Manager and Product Designer.

My contribution
- Collected old components
- Established collaboration with external teams
- Pitched Design System to C-level and other stakeholders
- Worked closely with Head of Engineering and developers
- Coordinated work of other Designers throughout the process
- Created components and deliverables for visual identity flip

Duration:  
12 months

Role: 
PM + Product Designer

Worked with: 
Product Designers, Brand, Mobile devs

1. Kick off and principles

Accessibility and scalability were one of the principles we defined. We wanted to make sure we can build features for:
- people with vision imparity
- direct sunlight exposure (using TIER after sundown)
- cold weather (frozen fingers)
- rain (wet screen)

Outcome: Short and long-term plan and design principles to follow.

Kickoff_DesignSystem

2. Status quo: Repository

At some point, we used to have 8 versions of the primary button and 50 colors in total. Working without a design system started creating more and more tech and design debt.

DSRepository

3. Basic components

Along with the Brand team we defined brilliant basics:
- colors
- typography
- CTAs

We all agreed that the outcome has to be scalable, flexible, and accessible.

Components-basic

4. Accesibility

In the process of creating all components, we ran it through accessibility plugins in Figma to make sure it's WCAG compliant. 

accessibility2

6. Quick UI update

TIER introduced a new visual identity and we were still in the process of developing the DS. We had to act on it quickly to keep the consistency between the mobile app and other mediums. 

Outcome:
One-week special sprint to flip the most consumer-facing components such as colors, typography, all illustrations, and animations. 

VisualId-FLip

7. RTL and Dark mode

The Design System had to be scalable and bulletproof, which means we also had to take care of dark mode and Right to left layouts, considering more upcoming Middle-Eastern markets.

RTL_DarkModeShowcase

8. Implementation

I worked closely with iOS and Android developers during the whole process of Design System implementation. 

Outcome
Modularized design system for developers and nice sandbox for designers implemented directly into the app. 

DS-Implemented-1

Key learnings

During the whole process, i learned a few valuable lessons as a PM and Product Designer.

1. Democracy doesn't work here. You can't have designers voting on solid vs outlined buttons. You need to make a conscious and informed decision as a leader.
2. Don't ask for volunteers. Pick someone and make them accountable for something.
3. Don't pitch a design system to C-level or VPs. Pitch it to developers and the Head of Engineering instead.
4. Most importantly - start ASAP. Without a Design System, tech and design debt grow asymmetrically every day.

DS-summary3

See more projects

Follow me on:

LinkedIn  |  Medium