Building Design Systems and Living Style Guides with AtlasUI · 2020-04-23 · UX Designers are...

Building Design Systems and Living Style Guides with AtlasUIWillem Gorisse / Design Lead / MendixRussell Hite / Sr. UX Designer / Mendix

MENDIXWORLD

1 2 3Introduction on Design Systems

How does Mendix implement Design Systems

How do they fit into a Mendix Maker Center

Agenda

4 5 6Getting started Interlude:

Any questions before we get practical?

Practical session:Getting started with Living Styleguides

MENDIXWORLD

Lets get to know each other

MENDIXWORLD

What do you do?

a. I’m a designerb. I’m a developerc. I’m a (product) manager

MENDIXWORLD

What do you do?

2 2 2

I'm a designer I'm a developer I'm a (product) manager

MENDIXWORLD

Do you know what a Design System is?

a. Never heard of itb. Kind ofc. I’ve helped realize a

Design System

MENDIXWORLD

4

7

12

Never heard of it Kind of I've helped realise a DesignSystem

Do you know what a Design System is?

MENDIXWORLD

How do you use AtlasUI?

a. I don’t use itb. I use it out of the box

(with tweaks)c. I fully customize it to

suit my needs

MENDIXWORLD

3

1

10

I don't use it I use it out of the box (withtweaks)

I fully customize it to suit myneeds

How do you use AtlasUI?

MENDIXWORLD

Introduction into Design Systems

MENDIXWORLD

A Design System

A set of connected patterns and shared practices,

coherently organizedto serve the purpose of digital products.

MENDIXWORLD

Material DesignGoogle

MENDIXWORLD

LEGO

MENDIXWORLD

What happens if you don’t create one?

Telephone game

Every team / application will be slightly different than the last.

But after 50 cycles?

Increase in effort and costs due to low level of:

• Re-use

• Consistency

No scaling possible

MENDIXWORLD

Ingredients of a Design System

Design Principles A shared language PracticesPatterns Pattern libraries

MENDIXWORLD

Design Principles

Shared guidelines that capture the essence of what good design means

MENDIXWORLD

1 2 3Lucid Animated Unbreakable

Example from Pinterest

MENDIXWORLD

PatternsA recurring, reusable solution that can be applied to solve a design problem.

MENDIXWORLD

Examples

MENDIXWORLD

Shared Language

Allowing for creating and using patterns cohesively by multiple people and teams.

MENDIXWORLD

Living Styleguide

A tool for documenting and sharing design patterns.

Pattern Library

MENDIXWORLD

MENDIXWORLD

PracticesA set of practices and techniques for: Creating, applying and evolving a Design System

MENDIXWORLD

Habitat of a

Design System

MENDIXWORLD

Habitat of a

Design System

MENDIXWORLD

Habitat of a

Design System

MENDIXWORLD

UX Design& Culture

Business Value& Culture

Development& Culture

Design SystemHabitat of a

MENDIXWORLD

1 2 3The most important influencing factor is team culture

It is common for a companies Design System to change in time

Design systems have a large impact on design & development processes

Takeaways for your Design System

4 5Someone else’s system is not yours.

Every Design System is unique

MENDIXWORLD

How does Mendix implement Design Systems

MENDIXWORLD

AtlasUI

MENDIXWORLD

MENDIXWORLD

MENDIXWORLD

MENDIXWORLD

The picture can't be displayed.

MENDIXWORLD

MENDIXWORLD

The picture can't be displayed.

MENDIXWORLD

MENDIXWORLD

MENDIXWORLD

MENDIXWORLD

The picture can't be displayed.

MENDIXWORLD

Zooming in AtlasUI Resources

Modelling AssetsPage TemplatesBuilding BlocksPage layouts…

Theme structureSASS frameworkCSS Assets

Custom widgetsRequired ones

MENDIXWORLD

It’s time to play

The entire AtlasUI Resources package is your playing ground.

MENDIXWORLD

How do they fit into a Mendix App / Maker Center

MENDIXWORLD

Single successesOver strong foundation

Change best practice

need

Waterfall mindset from business

Design & DevelopmentCollaboration lacking

Program levelCommitment

Hard to realize

EngagedUX Designersare scarce

Growing Demand for applications – Scaling UX

One off, project based development

Delayed change

No foundation being constructed

No scaling possible

Can’t grow & execute vision

Funding Change

The challenges we generally see

MENDIXWORLD

3S Change: Start, Structure, Scale

START

• Start small, experience the platform

• Start building your core Design Systems team

• Get started on your Design System & Living Styleguide

STRUCTURE

• Further develop your Design System

• Grow your Online Living Styleguide

• Grow your Design Systems team

• Start growing your community

SCALE

• Re-evaluate your current processes and rules

• Mature your community• Keep it fluid• Strategic impact

MENDIXWORLD

Maker CenterFundamentals

Unleash Maker Capability

Micro Services BizDevOps

Cloud Native

MENDIXWORLD

Maker CenterFundamentals

Unleash Maker Capability

Foundation & Governance

Delivery & Ops:Maker Line(s)

Experts & Tools

Portfolio

Value

MENDIXWORLD

Maker CenterFundamentals

Delivery & Ops:Maker Line(s)

Foundation & Governance

Experts & Tools

MENDIXWORLD

Maker CenterFundamentals

Delivery & Ops:Maker Line(s)

Foundation & Governance

ExpertsTools & Assets

MENDIXWORLD

Delivery & Ops:Maker Line(s)

PROGRAM MANAGER

ENTERPRISE ARCHITECT

SOLUTIONS ARCHITECT

UX LEAD

Foundation & Governance

Experts

INTEGRATIONSPECIALIST

UX EXPERT

Tools & Assets

ATLASUIRESOURCES

IDM INTEGRATION

TEST & DEPLOYMENT AUTOMATION

REUSABLE COMP.

LINE #13

appsLEAD

DEVELOPERRAD

DEVELOPERSPRODUCT OWNER

LINE #2+10apps

LEAD DEVELOPER

RAD DEVELOPERS

PRODUCT OWNER

Maker CenterFundamentals

MENDIXWORLD

First app live

DAY 1

Intake & Solutioning• Focus on Awareness• Design Techniques

(userjourney’s, wireframes etc.)

MONTH 1

Exploration• UX Design Approach• People

MONTH 2

Plan

MONTH 3

Foundation• Setup the DS Team

& Processes• Start designing the

customized User Experience

MONTH 4

Second app live Third app live

MONTH 5

Assembly line maturity• First MVP of Design

System• Employing it in third app

MONTH 6

Maker line split• First project success• Start structuring

First Independent line• Start extracting assets and

templates from the project• Start working on Living Styleguide

Decrease Mendix

Enablement Footprint

First Team

Maker Center Start (Month 1-6)

MENDIXWORLD

Milestones

Successfully delivered your first app with a customized User Experience

Published an Online Living Styleguide

First project successfully delivered using the Design System

Setup the (initial) Design System Team & Processes

Created your first MVP version of a Design System

MENDIXWORLD

Getting started

MENDIXWORLD

I have my first 3 apps. Now what…

MENDIXWORLD

Do you have a Design System?

Refresher:Design Principles – Patterns – Shared Language – Practices - Living Styleguide

MENDIXWORLD

Do you have the skills & a designer?

MENDIXWORLD

Do you have an owner?

MENDIXWORLD

Do you have an Living Styleguide?

MENDIXWORLD

Need some help?

Design System (Maturity) Assessment

Design & Implementation support

Anything you might want expert Mendix advice on…

Get in touch with our CSM / ES team

MENDIXWORLD

Questions so far?

MENDIXWORLD

Getting started withLiving Styleguides

MENDIXWORLD

A Living Styleguide

An evolving reference document for a team to understand how an application’s UX and UI should function and look.

MENDIXWORLD

Three accelerators

AtlasUIReference App.

Living Styleguide AtlasUI StyleguideBoilerplate

MENDIXWORLD

Demo Steps

1. Export UI Resources2. Create new LSG app3. Import UI Resources4. Document components5. Organize components6. Customize

MENDIXWORLD

Open floor…