the importance of design in enterprise software

D. KEITH ROBINSON • PRODUCT DESIGNER • ATLASSIAN • @DKR

The Importance of Design in Enterprise Software

A little bit about me

A little bit about Atlassian

Consumer + Enterprise

ConsumerEasy to use

Modern

Clear and focused

Fast

Fun

EnterpriseComplicated

Dated

Confusing

Slow

Boring

So, how does design help?

4. Building consistency with design systems

3. Understanding and reducing complexity

1. Promoting design thinking with inclusive design

2. Increasing knowledge and empathy with research & testing

Promoting design thinking with inclusive design

Inclusive design

Soft skillsLean teamwork

Design thinking

Essential “soft” skills for designers

Practice.

Practice.

Practice.

More: Beginner's Mind

Shoshin (beginner’s mind)

“In the beginner’s mind there are many possibilities, in the expert’s

mind there are few.” - Shunryu Suzuki

From: Zen Mind, Beginner's Mind

Active listening

“Sometimes the most appropriate technological solution is a person

talking to another person.” - Robert Hoekman Jr

The Tweet from @rhjr: https://twitter.com/rhjr/status/464129645688799233

Asking questions

“Asking questions is at the heart of collaboration, more so than any project

management software or process. And if you want to truly collaborate, I’ve found you

need to allow yourself to be someone without the answers.” - Jason Santa Maria

From: https://the-pastry-box-project.net/jason-santa-maria/2014-march-15

Writing

Lean teamwork

Lean teams can run on two pizzas.

“If you can’t feed a team with two pizzas, it’s too large.”

- Jeff Bezos

“Getting the right people and the right chemistry is more important

than getting the right idea.” - Creativity, Inc.

From Creativity, Inc. by Ed Catmull (co-founder of Pixar) and Amay Wallace

“Infinite diversity in infinite combinations...symbolizing the elements that

create truth and beauty.” - Commander Spock

The Triad

Design

Product management

Engineering

Design thinking

Empathize

Define

Ideate

Prototype

Test

Empathize

Define

Ideate

Prototype

Test

Talk to your customers. Include everyone.

Synthesize and share. Again with everyone.

Sketch out ideas. Everyone can draw and volume is key.

Build something real.

Gather feedback, share and then iterate.

http://dschool.stanford.edu/dgift/

Increasing knowledge and empathy with research & testing

It’s a big topic

Empathy is job #1

Simple: talk to people

Guerrilla research

Photo Credit: Carine06

What can you do on (mostly) your own?

Talk to sales, support, etc.

intercom.io

Surveys

Interviews

Customer visits

optimizely.com

Understanding and reducing complexity

Understanding and reducing complexity

Understanding complexity and increasing clarity

Task complexity

Task complexity

“I can’t figure out how to give Emma permission to see this page.”

Navigation complexity

“I don’t know where to go to change people’s permissions.”

Navigation complexity

Concept complexity

“I don’t understand what page permissions are or how they work.”

Concept complexity

High frequency

Low frequency

Low pain High pain

More: Designing Products People Love by Scott Hurff

Scott Hurff’s Pain Matrix

High frequency

Low frequency

Low pain High pain

More: Designing Products People Love by Scott Hurff

Fear

Anxiety

Confusion

Self-doubt

Guilt

Procrastination

Dislike

Irritation

Boredom

Scott Hurff’s Pain Matrix

Things to try to clarify

Building consistency with design systems

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown buttonButtons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown buttonButtons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Forms

Tables

Tabs

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown buttonButtons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown buttonButtons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Ali Baba & the forty dropdowns.

Atlassian’s Design Guidelineshttps://design.atlassian.com/latest/

Atlassian’s AUI Libraryhttps://docs.atlassian.com/aui/latest/

MailChimp UX patterns. Voice & Tone.http://ux.mailchimp.com/patterns & http://voiceandtone.com/

eBay’s Design Playbookhttps://designplaybook.ebay.com/

Salesforce Lightningwww.lightnightdesignsystem.com

So, what is a design system, exactly?

And more…

BrandUser interface

CodeCopy

Design principles.

Living design documentation.

What is a design system good for?

Increasing quality and consistency

Increasing speed and efficiency

Providing autonomy

Improving focus

How can I get started?

Declare a design czar.

Research, align and document.

Promote!

Iterate and plan for change.

And now for a few quick tips!

Start small

Show examples

Provide resources (assets & code)

Be explicit yet flexible

Respect your users and go slow

Make it public

Quick review

4. Building consistency with design systems

3. Understanding and reducing complexity

1. Promoting design thinking with inclusive design

2. Increasing knowledge and empathy with research & testing

Sláinte!

D. KEITH ROBINSON • PRODUCT DESIGNER • ATLASSIAN • @DKR