keynote #5 scaling up design by jurgen spangl

62
Scaling Up Design From engineering led to experience led JURGEN SPANGL

Upload: ux-singapore

Post on 22-Feb-2017

167 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Keynote #5 scaling up design by jurgen spangl

Scaling Up DesignFrom engineering led to experience led

JURGEN SPANGL

Page 2: Keynote #5 scaling up design by jurgen spangl
Page 3: Keynote #5 scaling up design by jurgen spangl

This team just shipped their beta. To Mars. Atlassian helped NASA’s Rover team ship stellar code

Page 4: Keynote #5 scaling up design by jurgen spangl

• Big cool statistic

• 2,569

• Add-Ons in Marketplace

@JURGENSPANGL

2012

Page 5: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

2013

Page 6: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

Just text by itself, for impact.

@JURGENSPANGL

2014

Page 7: Keynote #5 scaling up design by jurgen spangl

• Big cool statistic

• 2,569

• Add-Ons in Marketplace

@JURGENSPANGL

2015

Page 8: Keynote #5 scaling up design by jurgen spangl

• Big cool statistic

• 2,569

• Add-Ons in Marketplace

@JURGENSPANGL

2016

Page 9: Keynote #5 scaling up design by jurgen spangl
Page 10: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

Design is the new black

Page 11: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

Seat at the table?

Page 12: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

Seat at the table?

Page 13: Keynote #5 scaling up design by jurgen spangl

It’s about changing company culture

Page 14: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

1

Page 15: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

Sprechen Sie Deutsch?

Page 16: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

Do you speak German?

Page 17: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

(╯°□°)╯( ┻━┻

Page 18: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

(table flip)

Page 19: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

Language

Page 20: Keynote #5 scaling up design by jurgen spangl

We should change the colour of this button.F O U N D E R R E V I E W

“”

@JURGENSPANGL

Page 21: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

If you don't like what is being said, then change the conversationD O N D R A P E R , M A D M E N

“ ”

Page 22: Keynote #5 scaling up design by jurgen spangl

JIRA

Page 23: Keynote #5 scaling up design by jurgen spangl

Confluence

Page 24: Keynote #5 scaling up design by jurgen spangl
Page 25: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

Design Trunk

Page 26: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

Design TrunkAtlassian Design Guidelines

Page 27: Keynote #5 scaling up design by jurgen spangl
Page 28: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

I T E M 2

I T E M 1

I T E M 3

I T E M 4

AgendaFaster process

Page 29: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

I T E M 2

I T E M 1

I T E M 3

I T E M 4

AgendaExisting patterns

Page 30: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

I T E M 2

I T E M 1

I T E M 3

I T E M 4

AgendaExisting patterns…in code

Page 31: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

ADG is a product, serving products

Page 32: Keynote #5 scaling up design by jurgen spangl

Design sparring

Page 33: Keynote #5 scaling up design by jurgen spangl

Art critique

Page 34: Keynote #5 scaling up design by jurgen spangl

Design ledStructuredInclusiveRegular

Page 35: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

Radical candour

Page 36: Keynote #5 scaling up design by jurgen spangl

Challenge directly

Care personally

Radical candour

Page 37: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

Should designers code?

@JURGENSPANGL

Page 38: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

2

Page 39: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

Currency

@JURGENSPANGL

Page 40: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

Project Disneyland

@JURGENSPANGL

Page 41: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

Customer journey

EXPLOREKNOW GET HELP

?

SHARETHINK

RECONSIDER

STOPRENEWMIGRATE

BUY 1ST

PAYSET UP

$

BUY MORE

PAYUPGRADE EXPLORE

$

TRY

SET UPINSTALL BTF

USE

UPDATE

COLLABORATEROLL OUT

Page 42: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

Personas: from administrators to users

William HarveyAlana Emma

William the Wise

Loves• Challenges

• Programming languages

• New tech products

Hates• Bad or slow processes

• 5V[�ÄUKPUN�PUMVYTH[PVU�when he needs it

Places that matter• :[HJR�V]LYÅV^• Reddit

• Tech meet ups

• Slashdot

Company • Team size:

• Company size:

• Work remotely:

User Personas

Needs• Less admin work

• 5V�X\LZ[PVUZ�MYVT�T �̀[LHT• Evidence that change is

good

Goals• )L�HU�L_WLY[�PU�T`�ÄLSK�

and community

• Feel accomplished at the

LUK�VM�[OL�KH`•

“I’m obsessed with technology.”

>PSSPHT�[OL�>PZL�[HRLZ�WYPKL�PU�ILPUN�HISL�[V�ZVS]L�YLHSS`�KPMÄJ\S[�[LJOUPJHS�WYVISLTZ��>PSSPHT�OHZ�H�SV[�PUÅ\LUJL�VU�^OH[�ZVM[^HYL�[OL�JVTWHU`�\ZLZ��/L�SPRLZ�[V�NL[�[OPUNZ�done, and he usually knows how to do it. Nothing irritates him more than needless admin.

0M�OL�LUJV\U[LYZ�H�[LJOUVSVN`�O\YKSL�OL�HS^H`Z�OHZ�[OL�WH[PLUJL�[V�ZP[�^P[O�[OL�WYVISLT�HUK�WLYZL]LYL�\U[PS�OL�OHZ�ZVS]LK�P[��/L�SV]LZ�KVPUN�[OPUNZ�[OH[�YLX\PYL�SLHYUPUN�H�ZRPSS�HUK�OVUPUN�P[�[V�ILJVTL�HU�L_WLY[�H[�P[��/PZ�MH]V\YP[L�WHZ[PTLZ�HYL�SLHYUPUN�TVYL�HIV\[�OPZ�OVTL�ILLY�IYL^LY`�HUK�JVSSLJ[PUN�YL[YV�NHTL�JVUZVSLZ��/L�HS^H`Z�OHZ�H�ML^�WL[�ZVM[-^HYL�WYVQLJ[Z�NVPUN�VU��>PSSPHT�[OPURZ�([SHZZPHU�PZ�H�WHUKH��KVTPUHU[�HUK�MYPLUKS �̀

Job role:

Additional description:

Software • JIRA

Languages• Java

• Javascript

• Ruby

• Java

“I have too many things to do and not enough time to learn.”

Harvey does not identify as a technical person nor does he crave the latest gadgets. Harvey has a business or traditional design background and doesn’t understand the technicalities of software development. He just wants stuff that works. Harvey is happy to take recommendations from William, Alana and Emma. However, if he feels software will YPZR�[OLPY�ZLJ\YP[`�VY�I\KNL[��VY�P[�[HRLZ�[VV�SVUN�[V�JVUÄN\YL��/HY]L`�PZ�X\PJR�[V�ZH`�UV��He craves predictability and control. He runs to de-stress. Harvey thinks Atlassian is an ant’s nest. Seemingly chaotic but working to a greater good.

Harvey the Hesitant

Loves• Reliable products• Time saving tricks• Note taking apps•

Hates• Agile• Software that updates � MYLX\LU[S`• Flash•

Places that matter• The Wall Street Journal• Harvard Business Review• NPR•

Company• Team size:• Company size:• Work remotely:•

User Personas

Needs• Minimal fuss products• Things work smoothly together• :PTWSPÄLK�MLH[\YLZ• Only show me what’s

relevant

Goals• Put structure and protocols in my company• Maintain life/work

balance•

Job role:

Additional description:

Software • Gmail• 4PJYVZVM[�6MÄJL• *VUÅ\LUJL•

Languages •

“The worst thing you can do is waste my time.”

Alana is a great people herder and works diligently until the project is a success. Alana is very ambitious and her organisation skills allows her to drive any project forward. She understands technology, how it works and then some, although she has no ambition to be a developer again. Alana has a personal blog that often overlaps with her thoughts on her industry. She thinks Atlassian is a dragon, a vehicle for greatness, but only if it does what she says.

Alana the Aware

Loves• Huge projects• Responsibility• Working with talented

people•

Hates• When shit doesn’t work• Old processes• People that don’t have a can-do attitude• Red tape•

Places that Matter• Brain Pickings• TechMeme• Twitter• BBC•

Company • Team size:• Company size:• Work remotely:•

User Personas

Needs• I want problems solved

fast• Track projects and teams• Automate the boring stuff•

Goals• Get to the next career

leap• Leave work at work• My team is using the

best practices and software available

Software • *VUÅ\LUJL• JIRA• Evernote•

Languages• Java• CSS• HTML•

Job role:

Additional description:

“I want to learn as much as I can as quickly as possible.”

,TTH�Q\Z[�NYHK\H[LK�MYVT�JVTW\[LY�ZJPLUJL�H[�<UP]LYZP[ �̀�:OL»Z�PU�OLY�ÄYZ[�QVI�HUK�PZ�keen to take things on. Emma tinkers with her own projects on the side. She aspires to know as much as William the Wise and wants to be an awesome technical guru. She is an early adopter and frequently experiments with tools and techniques. Emma loves the theory of Agile but needs more practice. She expects to have internet and app access everywhere. Emma has an Etsy store for her rainbow of hobbies. Emma thinks Atlassian is an old dog, loyal but can often be found napping.

Emma the Eager

Loves• Beautiful software• Organising social events with her colleagues• Quick wins•

Hates• Hitting road blocks• Clunky and enterprise software• Legacy code•

Places that matter• Pinterest• Twitter• Facebook• World of Warcraft•

Company • Team size:• Company size:• Work remotely:•

User Personas

Needs• Breaking news knowledge• Use products wherever I am• 7V^LY�HUK�ÅL_PIPSP[`• Don’t bore me. •

Goals• Become indispensable in

the company• Learn as much as

possible as quickly as possible

Software • Trello• GitHub• JIRA•

Languages • Javascript• CSS•

Job role:

Additional description:

¸.L[[PUN�T`�WYVQLJ[�ÄUPZOLK�VU�[PTL�PZ�T`�WYPVYP[ �̀� 0�^HU[�L]LY`VUL�[V�IL�VU�[OL�ZHTL�WHNL�HUK�TLL[PUN�[OLPY�KLHKSPULZ�¹

9`HU�[OL�9LHK`�PZ�SHYNLS`�WYVQLJ[�KYP]LU�HUK�PZU»[�HMYHPK�VM�^VYRPUN�OHYK�[V�THRL�Z\YL�[HZRZ�HYL�JVTWSL[LK�VU�[PTL��/L�SV]LZ�(NPSL�TL[OVKVSVN �̀�/L�RLLWZ�OPZ�[LHTZ�PU�[OL�SVVW�VM�^OLYL�[OL`�HYL�PU�[OLPY�^VYRÅV^�HUK�^OH[�ULLKZ�[V�NL[�KVUL��6M[LU�9`HU�PZ�[OL�Z\WLY�NS\L�VM�HU`�WYVQLJ[�OL»Z�^VYRPUN�VU��/L�NL[Z�H�[OYPSS�V\[�VM�KLHKSPULZ�HUK�HJJV\U[HIPSP[ �̀�9`HU�LUQV`Z�[OL�PU[LYHJ[PVUZ�^P[O�OPZ�JV�^VYRLYZ�HUK�SPRLZ�[V�IL�\WKH[LK�HIV\[�^OH[�[OL`»YL�KVPUN��/L�^VYRZ�YLTV[LS`�VUL�KH`�H�^LLR��9`HU�PZ�H�JOHTWPVU�MVY�WYVK\J[Z�OL�\ZLZ�HUK�VM[LU�ZWLUKZ�[PTL�[LHJOPUN�WLVWSL�ILZ[�WYHJ[PJLZ�

Ryan the ReadyUser Personas

“I strive for beauty in my work.”

Cassie the Creative has some technical knowledge but prefers to focus on aesthetics, not pixels. Cassie is happy to learn new tech-heavy products as long as they’re a pleasure to learn. For Cassie, quality is more important than deadlines. She knows some CSS and HTML.

Cassie the CreativeUser Personas

“I have a range of interests and technology is one of them. I want

to lead a balanced life.”

Max the Mainstream’s aim is to leave for home on time so that he can cycle, spend

[PTL�^P[O�OPZ�MHTPS`�HUK�^H[JO�ÄSTZ��4H_�PZ�SVVRPUN�MVY�HU`[OPUN�[OH[�^PSS�OLSW�OPT�SPNO[LU�OPZ�^VYRSVHK��/L�KVLZU»[�^HU[�[V�JSPTI�[OL�JVYWVYH[L�SHKKLY��WYLMLYYPUN�[V�MVJ\Z�VU�OPZ�passions and hobbies.

Max the MainstreamUser Personas

“I love organising huge events.”

Sameer the Social is a marketing expert that easily gets bored. He changes his job every couple of years. Sameer spins a story like a DJ spins a record. Sameer did one year of JVTW\[LY�ZJPLUJL�PU�\UP]LYZP[`�ILMVYL�Z^P[JOPUN�[V�JVTT\UPJH[PVUZ��/L�SHUKLK�OPZ�ÄYZ[�QVI�PU�H�OHYK^HYL�JVTWHU`�HUK�OHZ�Z[\JR�[V�[LJO�ZWLJPÄJ�THYRL[PUN�L]LY�ZPUJL��:HTLLY�plays to his strengths and often organises his company’s huge conference as well as smaller events. He is spread thin and often creates marketing campaigns, organises events and updates the website. His biggest pain point is getting company-wide aware-ness and buy in for cross product promotions.

Sameer the SocialUser Personas

RyanMax Cassie Sameer

Page 43: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

Net Promoter Score (NPS)

Page 44: Keynote #5 scaling up design by jurgen spangl

How likely are you to recommend <product>to a friend or family?

1 2 3 4 5 6 7 8 9 101

DETRACTORS PASSIVES PROMOTERS

% Promoters - % Detractors Net Promoter Score (NPS)

Page 45: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

Listen to users

Page 46: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

Being experience led

Page 47: Keynote #5 scaling up design by jurgen spangl

True triads

Engineering

Design

Product Management

Page 48: Keynote #5 scaling up design by jurgen spangl

True triads

Engineering

Design

Overall customer satisfactionMAU+ NPS + others

Product Management

Page 49: Keynote #5 scaling up design by jurgen spangl

True triads

Reliability

Usability

NPSFunctionality

Page 50: Keynote #5 scaling up design by jurgen spangl

Responsibility and accountability

Reliability

Usability

Functionality Are we building the right thing?

Are we building it in the right way?

Are we building it so that is usable and delightful?

Page 51: Keynote #5 scaling up design by jurgen spangl

Responsibility and accountability

Engineering

Design

Product management Are we building the right thing?

Are we building it in the right way?

Are we building it so that is usable and delightful?

Page 52: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

Just text by itself, for impact.

Page 53: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

[...] good, even great, design is meaningless unless it gets built. A L A N C O O P E R

“ ”

Page 54: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

3

Page 55: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

Pain

@JURGENSPANGL

Page 56: Keynote #5 scaling up design by jurgen spangl
Page 57: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

/30 70

Page 58: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

30% – 70% pissed off30 70

Page 59: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

It hurts so good to focus. D A N I E L L E L A P O R T E“ ”

Page 60: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

We become what we behold. We shape our tools and then our tools shape us.M A R S H A L L M C L U H A N

“”

Page 61: Keynote #5 scaling up design by jurgen spangl

@JURGENSPANGL

We, as a TEAM,ship great experiences

Page 62: Keynote #5 scaling up design by jurgen spangl

JURGEN SPANGL

[email protected]

@JURGENSPANGL

https:/ /medium.com/designing-atlassian

Thanks!