Zeeto Tech Exchange: Design for Scalability - UX

Design for Scalability

Zeeto Tech Exchange

Zeeto Tech Exchange

The Inaugural Series

• Nov – The Project / Technology Selection

• Dec – Cloud Hosting / Containers / Scheduling

• Jan – Microservices

• Feb – Design for Scalability

• Mar – Database Infrastructure

• Apr – Reporting and Analytics

• May – Lessons Learned

Our Panel This Evening

Rahmeen SharyDirector of UX

Andre RecintoSr. Software Engineer

Tonight’s Topic

How Pattern Librariesand Reusable Components Future

Proof Your Application

Designing a Pattern Library

• Why Future Proof Your Application?

• Applying Atomic Design Principles

• Achieving Vertical Rhythm with Baseline Grids

• Defining UI Patterns in High-Fidelity

Why Future Proof Your Application?

What is Future Proofing?

Future proofing is the process of anticipating the future and developing methods of minimizing the effects of shocks and stresses of future events.

Don’t Future Proof

Pros

• Instant gratification • Less financial investment

Cons

• Velocity slows over time • System is less established for new hires • Less global control over the design language • Reusability is an afterthought • Not able to iterate quickly as business and product requirements change

= Leads to scalability and maintainability issues

Future Proof

Pros

• Pick up velocity over time • Maximize global control over the design language • Reusability is a primary focus • An established system is in place for new hires • Able to iterate quickly as business and product requirements change

Cons

• Can take longer to reach your MVP • There is a financial investment up front • Will take full buy-in from product, engineering, and the executive team

= Maximizes scalability, productivity, and maintainability

Choose Your Path Wisely

Team A / The Doc Browns vs Team B / The Biffs

Choose Your Path Wisely

Team A / The Doc Browns vs Team B / The Biffs

Applying Atomic Design Principles

Who Created Atomic Design?

What is Atomic Design?

Brad describes atomic design as a methodology for creating a design system.

What is a Design System?

A design system is a set of rules, guidelines, and guardrails that document and organize your design materials.

Often referred to as…

Style GuidesPattern LibrariesUI LibrariesComponent Libraries

Why Use a Style Guide?

Style guides promote consistency across the UI which benefits designers, developers, and users alike.

• Designing without style guides leads to inconsistent UI

• Developers end up building these inconsistencies, which leads to scalability issues

• Helps us design patterns NOT pages

• Inconsistent design patterns can be confusing for users

Living Style Guide

Can be a great tool for communicating design standards throughout an organization.

• Thoroughly documents and define usage for all UI patterns

• Helps keep product, design, developers, marketing, and executives on the same page

• Will help discourage random “one-off” requests

Examples

Examples

What is Atomic Design?

Atomic design is a chemistry analogy that suggests our interfaces are made up of atoms and molecules that combine to create organisms.

Let’s Talk Science

What is Atomic Design?

“We’re not just designing pages, we’re designing systems of components.” – Stephen Hay

There are five distinct levels in atomic design:

Atoms

Atoms are the basic building blocks of an interface.

Molecules

Molecules are groups of atoms bonded together to form fundamental units of an interface.

Organisms

Organisms are groups of molecules or atoms joined together to form a relatively complex, distinct section of an interface.

Templates

Templates are groups of organisms stitched together to form pages.

Pages

Pages are specific instances of templates.

Pattern Lab

Check out patternlab.io

A Good Read

Achieving Vertical Rhythm with Baseline Grids

What is a Baseline Grid?

Defines a vertical rhythm by building vertical consistency into each layout.

Horizontal Grid

We use a flexible 12 column grid.

Baseline Grid

We use a 3px baseline grid.

Why Use a Baseline Grid?

• Takes the guess work out of vertical spacing resulting in faster design cycles

• Helps refine vertical consistency between designers

• Breaks down our design patterns mathematically, encouraging them to “play nice together”

• Buttons, inputs, and selectors naturally end up with uniform height and text alignments

• Easily identify when your layout is OFF

Take a Closer Look

• Define your baseline and set your type. (3px)

• All leading MUST be divisible by your baseline

Set Your Type

Block-Level Elements

All block-level elements MUST be divisible by your baseline.

Block-Level Elements

All block-level elements MUST be divisible by your baseline.

Layout

Layout

Defining UI Patterns in High-Fidelity

Define Your Page Types

• Work with product and stakeholders to gather platform requirements

• Iterate on low-fidelity wireframes to identify reusable page types

View/Manage Template

Add/Edit Template

Define Your Patterns

TypographyColorsButtonsFormsTablesUser Feedback

*All patterns MUST be divisible by your baseline

Typography

Colors

Colors

A LESS/SASS color strategy can be a powerful way to control your design language without a lot of heavy lifting

• Give your brand colors non-color specific names @primary1-color, @primary2-color

• Have a strategy for your grays @gray9-color, @gray8-color, @gray7-color, etc... @gray1-color

• Global border and background classes @dark-border, @light-border, @dark-background, @light-background

• Global text classes @dark-text, @light-text, @white-text, @disabled-text , @error-text

Buttons

Buttons

• Define button types and sizes separately for more control

• ex. .primary-button + .lg-size + .expand

• Button types help avoid the Skittle conundrum

• .primary-button (Add)• .action-button (Save, Publish, Next, Continue, Log In, Sign Up)• .utility-button (Cancel)• .delete-button (Delete)• .control-button (Control Bar: Filter, Download, Export)• .disabled-button (Inactive Button State)

• Variable over fixed width to accommodate internationalization

Forms

Tables

User Feedback

Build Your Templates

Build Your Templates