Beyond usability 🚀UX Cambridge 2016

Jonathan RobertsUser Experience Designer@touchdeluxe

“I invented the term [User Experience] because I thought human interfaces

and usability were too narrow”- Don Norman

(http://adaptivepath.org/ideas/e000862/)

@touchdeluxeIntroduction Design systems▸ Beyond usability

Credit: Airbus and David Benjamin/The Living, an Autodesk Studiohttps://medium.com/ideas-by-design/why-design-is-going-to-become-a-team-sport-for-humans-machines-9ba22e1a4aa3#.cogyvwtto

http://www.autodesk.com/customer-stories/airbus?_ga=1.196619116.1704246085.1473709732

An overviewAbout this talk, what we’re going to cover

↓

Design systemsWhy they’re necessary, how to start building one and mistakes to avoid

↓

Beyond usabilityWhat you should be doing with your new design system powers

@touchdeluxe ▸ Introduction Design systems Beyond usability

MeI’ve been designing products for ~10 years,

mostly enterprise software and consumer IoT products,always client-side within the engineering/product team

@touchdeluxe ▸ Introduction Design systems Beyond usability

RedgateSoftware-for-software-people, in CambridgeUsability was always the a differentiator…

...now it’s a basic expectation

@touchdeluxe ▸ Introduction Design systems Beyond usability

Design Systems

@touchdeluxeIntroduction ▸ Design systems Beyond usability

@touchdeluxeIntroduction Design systems▸ Beyond usability

Credit: Salesforcehttps://developer.salesforce.com/lightning

@touchdeluxeIntroduction Design systems▸ Beyond usability

Credit: Airbnbhttp://airbnb.design/building-a-visual-language/

@touchdeluxeIntroduction Design systems▸ Beyond usability

Credit: Google Material Designhttps://material.google.com/

@touchdeluxeIntroduction Design systems▸ Beyond usability

Credit: Google Material Designhttps://medium.com/ge-design/ges-predix-design-system-8236d47b0891#.hth8jo41p

@touchdeluxeIntroduction Design systems▸ Beyond usability

Credit: Mina Markhamhttps://medium.com/git-out-the-vote/pantsuit-the-hillary-clinton-ui-pattern-library-238e9bf06b54#.wci8t5uz1

@touchdeluxeIntroduction Design systems▸ Beyond usability

Consistency“It’s a coordinated effort to apply a

common design style to everything we do”

Credit: https://www.red-gate.com/blog/building/honeycomb-design-style

@touchdeluxeIntroduction Design systems▸ Beyond usability

atomicdesign.bradfrost.com

Building Redgate’s Design System, Honeycomb

@touchdeluxeIntroduction ▸ Design systems Beyond usability

@touchdeluxeIntroduction Design systems▸ Beyond usability

A foundation to build on,some internal marketing and

full support a C-level

@touchdeluxeIntroduction Design systems▸ Beyond usability

Design Week

@touchdeluxeIntroduction Design systems▸ Beyond usability

Design WeekDesign Week

@touchdeluxeIntroduction Design systems▸ Beyond usability

Design Week

@touchdeluxeIntroduction Design systems▸ Beyond usability

Design Week

Preparation

@touchdeluxeIntroduction Design systems▸ Beyond usability

Current

Future

@touchdeluxeIntroduction Design systems▸ Beyond usability

Design Week

Component cut-up workshop(the 10 minute version )🕑

@touchdeluxeIntroduction ▸ Design systems Beyond usability

Credit: https://medium.com/eightshapes-llc/the-component-cut-up-workshop-1378ae110517#.amctpik38

@touchdeluxeIntroduction Design systems▸ Beyond usability

Task 1~ 30 seconds ~

Choose an “atom”

@touchdeluxeIntroduction Design systems▸ Beyond usability

Task 2~ 5 minutes ~

Cut out all the examples of your chosen component

@touchdeluxeIntroduction Design systems▸ Beyond usability

Task 3~ 4 minutes ~

Begin to group your components

Honeycombhoneycomb.red-gate.com

@touchdeluxeIntroduction ▸ Design systems Beyond usability

@touchdeluxeIntroduction Design systems▸ Beyond usability

#HoneycombWe should have put a team on it full time

@touchdeluxeIntroduction Design systems▸ Beyond usability

ImplementationAvoid asserting the use of a single tech

@touchdeluxeIntroduction Design systems▸ Beyond usability

What’s next in the sequence?1

11

21

1211

111221

….?

@touchdeluxeIntroduction Design systems▸ Beyond usability

What’s next in the sequence?1

11

21

1211

111221

31 22 11

@touchdeluxeIntroduction Design systems▸ Beyond usability

Consistencyfor consistency’s sake… 😓

@touchdeluxeIntroduction Design systems▸ Beyond usability

@touchdeluxeIntroduction Design systems▸ Beyond usability

@touchdeluxeIntroduction Design systems▸ Beyond usability

Critical mass of 3

@touchdeluxeIntroduction Design systems▸ Beyond usability

Credit: https://www.youtube.com/watch?v=GA8z7f7a2Pk

Your new Design System(and how to take advantage of it)

@touchdeluxeIntroduction ▸ Design systems Beyond usability

@touchdeluxeIntroduction Design systems▸ Beyond usability

Think abductivelyThe most likely one is probably the right one

Resource: http://www.jonkolko.com/writingAbductiveThinking.php

@touchdeluxeIntroduction Design systems▸ Beyond usability

@touchdeluxeIntroduction Design systems▸ Beyond usability

“...so what is it you do?”Good question

What to do?(now you’ve got all this time)

@touchdeluxeIntroduction Design systems ▸ Beyond usability

1Be responsible for team learning

@touchdeluxeIntroduction Design systems ▸ Beyond usability

@touchdeluxeIntroduction Design systems Beyond usability▸

Image credit: http://www.usaswimming.org/ViewNewsArticle.aspx?TabId=0&itemid=4368&mid=8712

@touchdeluxeIntroduction Design systems Beyond usability▸

Question assumptionsand build team intrigue through question gathering

@touchdeluxeIntroduction Design systems Beyond usability▸

@touchdeluxeIntroduction Design systems Beyond usability▸

@touchdeluxeIntroduction Design systems Beyond usability▸

Resource: http://www.slideshare.net/johannakollmann/understanding-systems Credit: http://proceedings.informingscience.org/IS2002Proceedings/papers/Horan133Newan.pdf

2Contribute to innovation

@touchdeluxeIntroduction Design systems ▸ Beyond usability

@touchdeluxeIntroduction Design systems Beyond usability▸

Credit: http://www.slideshare.net/ISITEDesign/delight-2013-jared-spool-of-uie

@touchdeluxeIntroduction Design systems Beyond usability▸

Image credit: https://twitter.com/wapadam/status/662606961800781824

3Uphold your principles

@touchdeluxeIntroduction Design systems ▸ Beyond usability

@touchdeluxeIntroduction Design systems Beyond usability▸

PrinciplesRecover from mistakes

Prevent themImbue trust

Facilitate conversation

In summary

@touchdeluxeIntroduction Design systems ▸ Beyond usability

Beyond usability 🚀

UX Cambridge 2016

Jonathan RobertsUser Experience Designer@touchdeluxe

Thank you!