The Emergence of UX in an Agile World

Agile
&
UX

1

Welcome everyone. We’re here today to share our story of the emergence of UX in an Agile
world.

Before we get into it let’s introduce ourselves.

Image: http://ﬂic.kr/p/7a35RD

Victor
Rodrigues

2

I’m Victor Rodrigues.

Born somewhere
over here

3

I’m originally from South Africa.

Images: http://bit.ly/dQqR9D & http://bit.ly/hLr14F

4

Although I am 1st generation South African, being of Portuguese extraction.

Image: http://bit.ly/dNJdeX

5

You see my parents were one of those who ventured to Mozambique from Portugal.

Images: http://bit.ly/dNJdeX & http://bit.ly/dHMQuV

6

And for those of you that don’t know where Mozambique is, it’s that country on the east
coast of Africa.

Image: http://bit.ly/eRgu8D

December
2000

7

In December 2000

8

I moved to Sydney Australia and I have to say...

Image: http://bit.ly/gxAXi3

9

I have never felt so comfortable in a country as I have been in Australia.

Image: http://bit.ly/gBtswo

10

I have two daughters, Addison & Ashlin (born 7 weeks ago).

11

My day job is running a software development department at Cochlear based in at our head
office in Sydney.

Image: http://bit.ly/ijCkTM

12

We’ve actually just moved into our brand spanking new building on the Macquarie Uni
campus.

14

With lots of natural light, something we’re not really used to.

Xerxes
Battiwalla

15

And I’m Xerxes...

16

I was born in Australia, and grew up in an era
when...

Image: http://bit.ly/dL9WJX

17

...a good moustache looked like this...

Image: http://bit.ly/dHKJ5V

18

...people had hair like this...

Image: http://bit.ly/hUJi1V

19

...when the king of pop looked like that...

Image: http://bit.ly/dZjW5J

20

...and wearing your pants backwards wasn’t at all
weird.

Image: http://bit.ly/hF774x

21

I’ve had a passion for computing since I was a little
kid

Image: http://bit.ly/ezCUZ1

22

eventually working my way through to this ugly
building - (the University of Technology, Sydney)
where I studied

Image: http://bit.ly/i06zBg

C#
TDD

23

...(and now teach)...Computer Science, but actually
spent most of my time...

Image: http://bit.ly/gOEHr7

25

winning look-a-like competitions

<boring_lob_apps />

26

After working through a number of projects...

27

...i found myself here in 2008...

28

...working with an incredibly talented team of
developers...

29

...on software that changes people’s lives, which
is....

30

awesome!

Image: http://bit.ly/gnXG7w

31

So a little about Cochlear.

“The cochlear ear implant is the ﬁrst
and only device produced by mankind
which effectively restores the use of
one of the human senses”
Sir Gustav Nossal,
Australian of the Year (2000)

32

I think Sir Gustav Nossal probably says it best.

33

Back in 1980 we had what we called the “Portable Speech Processor”.

34

Last year we released our new implant system which now includes a wireless remote control
for our recipients...

35

and our smallest processor ever.

36

And by the way, we’re hiring.

Image: http://bit.ly/f8Kjel

37

Okay let’s get back to why are we here today!

http://ﬂic.kr/p/8PMpMJ

I write I design
software experiences

38

We’re here because we want share our story of how we married UX with Agile in our
development process.

Image: http://bit.ly/gZRUC9

39

There are some that previously believed that User Experience Designers and Agile
practitioners just don’t mix. But before we explore UX and why it’s important, let’s look at
where Agile came from.

http://ﬂic.kr/p/5BSrbG

40

According to Jeff Patton “Agile development originated from a place where user experience
practice was weak”

This chart (courtesy of Jeff Patton) shows on the y-axis user adoption scale and the x-axis
purpose. Bottom left is synonymous with internal IT projects which is where Agile, according
to Jeff, originated. On the top right you have consumer commercial stuff where UX is vital and
usually determines the success of your product.

Reference: http://agileproductdesign.com/blog/emerging_best_agile_ux_practice.html

41

But then you ask yourself: but hang isn’t Agile all about user centredness?

Image: http://bit.ly/gFPsFT

Individuals and Interactions
over processes and tools

42

If you recall the phrases of the Agile Manifesto. The ﬁrst one emphasises Individuals and
Interactions. That’s user centred!

Customer Collaboration
over contract negotiation

43

The third one talks about Customer Collaboration. The mere fact that the word Customer is
there makes it user centred.

44

Then there are the practices such as the Customer Role...

Image: http://bit.ly/hWDSdG

45

Usability testing.

http://bit.ly/dEOiGR

Not
Enough

46

The problem is that it’s not enough.

Experience
needs to be
Designed

47

Experience needs to be designed.

48

Allow me to elaborate. And this is where I get on my soap box and talk about what I call...

Image: http://bit.ly/hqExPd

Total
User Experience

49

Total User Experience.

The
Problem!

50

I usually begin this speech by talking about the problem. Think about the world you live in
and the things that you interact with every day.

51

You get road signs that make you stop to read them in order to get what you need

52

Parking pay stations that make you wonder if they were designed by...

53

politicians.

Image: http://bit.ly/gdw82a

54

User interaction choices that make you do unnatural things.

55

Then there are the excessive options and the confronting choices that we have to make.

Image: http://bit.ly/hzhaO1

56

And there are others.

Image: http://bit.ly/hLOgXO

57

But I think the one thing major problem we’re faced with today is...

Image: http://bit.ly/ek1QAl

59

Now think about your average user, they still like the simple pleasures in life such as...

Image: http://bit.ly/ez8WCR

Can’t escape
User Experience

62

But even those things have some level of user interaction encompassing them.

63

You still have to stand in a queue to purchase a book.

64

Or read a menu before you can order and enjoy your food.

65

Pay for your food with one of your many credit cards.

66

I think you get the picture.

Image: http://bit.ly/fd5pBm

67

Thus the total customer experience is not only about how you use a product or service, it’s
how you:

- go about ﬁnding it
- how your perceive it’s value
- how easy it is to purchase
- how easy it is to ﬁx if it’s broken

... and so on

68

The problem is that most of the time us software people forget this.

Image: http://bit.ly/gC0VBs

69

Why, perhaps because there are too many technologists in technology.

70

The technology is only half the equation.

71

The other half is the human, that

irrational,
impulsive,
impatient,
power-hungry gratiﬁcation machine.

Examples

72

I’m merely touching the surface of User Experience Design. There is a lot more that we can
cover. But before we get to the Cochlear experience I’d like to do share with you a few
examples of what Seth Godin refers to as things that are...

Broken!

73

Broken! Products that we interact with in our world that have lacked that user experience
design.

74

These are parking pay stations used throughout Sydney.

I always have to read the instructions before doing anything on this thing.

75

Here is the American Airlines website.

Some of you may have heard of Dustin Curtis. He hated the experience you get from
interacting with the American Airlines website that he sent them a design to help them out a
little...

76

I’m not going to get into the speciﬁcs of why this is a better user experience but it certainly is
a lot more inviting?

77

Here’s one from American Airlines that I have personally experienced.

Wanted to lodge a complaint about a bad ﬂight experience and couldn’t

States that there are “errors” but I couldn’t ﬁnd any.

78

While I was doing some research for this presentation I tried Frontier airlines’ website.

Even though I have not ﬂown with them I tried their customer support.

Easy enough to ﬁnd.

I am giving a demonstration of your website user
experience and how it compares to other airlines...

79

And this is what their customer relations form looks like.

Much simpler, much more inviting. It only requires you to ﬁll in 4 ﬁelds.

This is the gist of what I wrote...

Your kind words will be shared with staff, and I am
sure they will be delighted.

80

And I actually go a response that was addressed to me personally AND

dealt with my comment!

Book next
trip on
Frontier

81

And how do I feel after this experience?

I want to ﬂy Frontier.

Image: http://bit.ly/fULzMJ

82

This is a pet peeve of mine as I use MS Excel as lot. A dialog box that forces you to read every
little bit of text before you hit either Yes or No.

The problem with this dialog is that because the buttons are labelled Yes/No you always have
to read the text before your selection is made.

Some content in “N5 Recipients Americas.xls”
will not be saved.

This is due to compatibility differences between
the newer .xlxs and the older .xls ﬁle formats.

Cancel Save as .xlxs Save as .xls

83

Here’s my attempt at redoing the dialog and conveying the same information.

In fact you will probably read all of it the ﬁrst time but because the button text contains the
actual action you will not have to next time around.

I’m sure I could have done a better job here but I only spent a minute on this one.

The
Good Ones

84

There are however beautifully designed products and here are a few that I think are good
examples.

Image: http://bit.ly/gKCiao

85

Of course I would not go through a presentation without mentioning an Apple product. The
thing about Apple products is that they have inspired...

86

the most amazing applications ever seen on any platform (in my humble opinion of course).

87

The guys at RunKeeper I think are an example of how you can design a great user experience
without spending a bucketload of cash.

88

Anyone use Rushfaster before?

I particularly enjoy the customer experience when using this online store.

89

But it’s not only Apple does can design awesome user experiences. This is the launch site for
the Google’s Nexus S Android phone and it’s superbly designed.

Reference: http://www.google.com/nexus/#!/index

90

It even gets Dustin Curtis’ seal of approval.

Reference: http://twitter.com/#!/dcurtis/status/11962698954711040

91

I’m going to ﬁnish “the good guys” with this one. It’s a free web-based book done by the
same team from Google that brought you Chrome.

Not only is it the perfect layman’s explanation of what web browsers are and how the web
works, it is also wonderfully executed.

It certainly gives you a glimpse of what we have in store in the near future for web-based
experiences.

Reference: http://www.20thingsilearned.com/

Summary...

92

So a quick mid presentation summary...

What is becoming more and more obvious is that people are looking for things that are...

93

Simple...

I love this quote and I think it should become engrained in all of us.

Familiar

94

We want things that are familiar.

Image: http://bit.ly/fXuDCK

Obvious

95

Obvious.

Really Obvious

96

Really obvious.

Choice limited

97

And limited in the number of choices to make.

98

Time for me to get off my soapbox and talk about our one of our projects at Cochlear where
we attempted to put into practice this preaching.

Image: http://bit.ly/hZfe0H

99

So this is our story. It’s the story of a recipient’s journey.

Once a recipient is implanted with one or more of our devices they will undergo...

Fitting
100

A series of fitting sessions in which the device is configured for their specific physiology.

Fitting Habilitation
101

A recipient may undergo habilitation to ensure they get the most out of their implant system.

Fitting Habilitation Upgrades
102

In their lifetime they will upgrade some of their system components to the latest model or
compliment their existing model.

FittingHabilitation UpgradesTroubleshooting
103

They will troubleshoot problems or situations with their implant system.

Fitting Habilitation UpgradesTroublesh...Service & Repair
104

Which may or many not result in servicing or repairing their implant system.

105

There is a bottleneck in our industry, the lifetime support for programming and maintenance
of the implant system juxtaposed by a staggering increase in recipient numbers not
complimented by an equal increase in the number of professionals.

Image: http://bit.ly/h6OmYc

106

Not only is it labour-intensive... but the current ﬂexible software is not ideal.

To make cochlear implants accessible to more people we needed a solution that would
involve the development of a user experience that can be used with embedded intelligence
to...

107

allow unskilled programmers to optimise CI at the same level as highly experienced CI
programmers.

Image: http://bit.ly/fBWD78

Challenge!

108

To draw out this challenge...

700 million
by
2015

109

There are more than 700 million will be hearing impaired by 2015.

110

We have an ageing population whose life expectancy is constantly increasing.

Image: http://bit.ly/hWq5t1

111

0 – 14 years olds are becoming more and more aware of and actively using technology.

Image: http://bit.ly/fXcrNB

<10%
112

Estimated less than 10% of the people that need cochlear implants are receiving them and we
know that the number of recipients will increase exponentially.

113

Software plays an extremely important role in ensuring that we meet this challenge.

Image: http://bit.ly/dO389r

114

Ultimately we would like to go from this (extremely ﬂexible software but only necessary by a
fraction of recipients that are programmed through it) to...

I don’t need
software. I’m self
conﬁguring.

115

To this.

116

But before we get there we need to make the most of what our software products do for the
here and now, taking on those customer centric characteristics I have spoken about.

Image: http://bit.ly/hebKcu

How did
you do it,
fool?

117

So given this background over to my world famous colleague who will dissect our UX & Agile
story on this particular project.

So how did we bring out the best of UX in our agile project?
Image: http://bit.ly/fEUG3I

118

Just like any other agile project, it started with a full story backlog.
“What features do we want in this application?”.
Our team get together and work out exactly what broad functionality
we wanted in the ﬁnal product.

119

The UX team then went off and started drawing up a holistic view of
what the application might look and feel like.
Image: http://www.sueschildminding.co.uk/eyfs/cd/group%20drawing.JPG

120

Although agile development works brilliantly when performed using
small, baby steps. Improving, piece by piece...
Image: http://4.bp.blogspot.com/_oR8W4IhH1n4/TMDxmgNj8-I/AAAAAAAACHU/3gkWPhSi8ws/s1600/baby-feet.jpg

121

...UX needs to work at a higher level, taking the whole application
into consideration, devising a very low-fidelity imagination for what
the application would look like from the point of view of the people
using it.
Images:
http://www.spiritoflife.org/images/earth.jpg
http://lifebitz.files.wordpress.com/2009/01/b1eye011.jpg

122

This also meant building up a series of personas to identify who will
be using our application, and what role they play in the whole
system

Going separate ways

123

So given the very different ways these two teams work, both go in
their own separate direction. The UX team start kicking around ideas
and prototypes and putting them to test audiences, and the
development team start working out technical implementation
details, and report to an internal customer while the real customer is
still trying to work out their direction.

Every now and then, the two teams...

124

...come back together to reconcile where they’re at and then work
together when it comes to the actual implementation.

125

So once the features were identiﬁed, we then took the entire product
backlog and split it out into releases. “What do we think is
achievable in the time-frames we have for Release 1?”

So far this is just standard agile - nothing new here. Where things
get interesting is next.
Image: http://ﬂic.kr/p/eshZp

126

For each release, we then worked out exactly what UI detail we
wanted to go down to. In fact, we took this a step further, and
within Release 1, we identified 5 primary “drops” each representing
a different stage of development for the first release.
Image: http://margotmystic.files.wordpress.com/2008/09/magnifying-glass.jpg

DROP 1 DROP 3 DROP 5
Core Clinical Back Office Release

DROP 2 DROP 4
Clinically Complete Help & Guidance

127

Each drop has a specific purpose, so there are UX considerations for
each stage. Some upfront IA helps us better understand what each
specific drop is capable of.

DROP 1
Core clinical functionality

128

DROP 1: Speciﬁcally intended to test and validate the core
component of the underlying principle behind programming our
recipients.

UX was not a major consideration here. Why? We have enough
technical challenges to overcome alone without the UI/UX coming
into it. We’re dealing with electrodes in people’s heads! The last
thing we want to do...

129

...is put the wrong amount of electricity into someone’s head!
Getting this right is critical!
Image: http://image02.webshots.com/2/0/71/50/40907150eDlNzS_fs.jpg

DROP 2
Clinical veriﬁcation

130

DROP 2: First real-world user-experience test. The clinical aspect
was complete from a technical standpoint...

131

...and now we were focusing on the usability of the clinical
component. Giving it to our clinicians and actually using the
software to give people back their hearing.

DROP 3
Back-ofﬁce operations

132

DROP 3: Up until this stage the only UX consideration had been from
a clinical standpoint, but now we needed to look at all the back-
office operations, and ensure that the system stores and presents
information such as recipient details with databases and existing
systems - and does so intelligently.

DROP 4
Help and guidance

133

DROP 4: Help and Guidance. This drop introduces contextual help
into the system and assistance for when the clinician doesn’t know
what to do. How do you assist the user without being too intrusive?

134

Microsoft made mistakes - we’re taking advantage of those
learnings...
Image: http://bwog.com/uploads/Clippy!_1.jpg

135

...and yet don’t forget - UX isn’t restricted purely to the English
language. All along, the designers have been crafting the UI with the
intention that non-English character sets will be used as the display
language for the software. This particular drop also validates that
our application functions in Hebrew, Hindi or Hungarian.
Image: http://www.engrish.com//wp-content/uploads/2010/11/deformed-man-end-place.jpg

DROP 5
Product release

136

Finally DROP 5: Ready for production.

Any UX changes happening at this stage are minor alterations. All
the major decisions have been made upfront, with the application as
a whole taken into consideration.

UX Evolution

137

Once our releases were determined and we had a rough idea of what
user interfaces will be in each release, we were in a position to start
deﬁning the UX and the UI. Lets just consider the UX ﬂow at the
moment, and we’ll come back to look at development. Later on we’ll
go through the two side-by-side to see the progression.

3 stages of UX evolution

138

We found that there were 3 stages of UX evolution in our project

STAGE 1
Idea storming

139

Stage 1 - idea-storming

140

Firstly knowing what information should be displayed, the challenge
for UX was to define the most effective way of communicating that
to the user. This stage involves cycling through many ideas, with
most likely to end up here:
Image: http://finalfinishdesign.com/Architect%203.jpg

141

in the bin.
Image: http://1.bp.blogspot.com/_DOxunh1ey0U/THSuecaJzhI/AAAAAAAAAHg/2ijLuSGKGr8/s1600/oscar.png

142

and for one good reason - if you’re not dismissing options, then
you’re not considering them all. The ﬁrst answer might not be the
best one!
Image: http://www.sxc.hu/browse.phtml?f=download&id=1152070

143

...so how do you go through this with minimal friction?
Image: http://www.penaltytime.com/images/212.jpg

144

Start sketching ideas on paper...
Image: http://www.alecjacobson.com/weblog/media/drawing-with-pen-on-paper.jpg

145

...or find a program to help you do it.
Images:
http://www.gliffy.com/images/gliffy_logo.png
http://0ebr5a.blu.livefilestore.com/y1pa1wyhejy7ut144SV81CLBhazXfiQGcW-bJRAqj9_PdfjOzLCPVYwXHc6i7fr83dnwha_KsR4TVVypc_Vwq55Uw/Expression%20Logo%20Small.jpg
http://balsamiq.com/images/balsamiq_logo.png
http://it.cc.stonybrook.edu/site_content/software/images/100x/microsoft_visio.jpg
http://e.foi.hr/wiki/blog/Krunoslav_k/files/2009/12/logo.png

STAGE 2
Prototyping

146

Stage 2 - prototyping

147

Once a solution was identiﬁed as a good candidate for a particular
screen, our designers started developing a working prototype of the
UI based on the interaction model identiﬁed from the previous
step...
Image: http://www.localhiddenvariable.com/ciid/wp-content/uploads/2009/01/soldering.jpg

148

...and what tool do you use for the prototyping job? In a
metaphorical world ﬁlled with nails, which hammer is the right one?

This one?
Image: http://library.thinkquest.org/C0121286/hammer.jpg

149

...this one?
Image: http://www.lamaadvertising.com/stevelama%20web%20site/Teaching-Interesting%20stuff/toy%20hammer.jpg

150

I doubt it’s this one.
Image: http://heathenjeweler.ﬁles.wordpress.com/2010/04/mc-hammer1.jpg

151

We found that the right toolset for prototyping was the one which
allows...
Image: http://ﬂic.kr/p/GUfxM

152

...our UI/UX designer to do their job effectively. At the end of the
day, its important to acknowledge that this is only a UI prototype
and it is intended to be junked after its developed. Even if it’s not in
your company’s core technology, this tool should be as frictionless
as possible for your UX team.

Our experience

153

Just quickly - a little on our experience with prototypes

We started with SketchFlow. Our designer was brought in with the
intention of creating a working prototype in SketchFlow. The tool
itself works, and does a good job...

154

...Yay! Rainbows and sunshine, everyone’s happy...
Image: http://b.imagehost.org/0416/hjkl.png

155

...except for our designer. What didn’t work, was that our designer is
an experienced Flash developer, and he felt that his natural work
pace was being held back because he wasn't experienced in the tool
he was using.
Image: http://diablolink.net/ﬁles/Screaming_Lady_2.jpg

156

He started doing the prototype in Flash, and was able to turn out
changes to a ﬂash prototype inordinately faster than for SketchFlow,
with a much higher level of quality, too.
Image: http://upﬂysoft.com/wp-content/uploads/2010/10/y3Fl877z.png

157

So the lesson learned was to let the team pick the right tool for the
job. Sounds obvious, but it’s an easy trap to fall into given your
organisation’s situation.

http://bit.ly/ﬂm5t0

STAGE 3
User testing

158

3rd Stage of ux evolution - user testing

159

Given a working prototype, we were now in a position to test this
idea using our clinicians. We ran several rounds of UX testing, and in
fact we still continue to, so that we’re always reﬁning the application
- it goes back to the agile adage:

160

...continuous improvement
Image: http://www.clickbuyhelp.org/wp-content/uploads/2010/03/Continuous-Improvement.jpg

☑ Ease of use
☑ Makes sense
☑ Sketchy UI
161

...and when testing these prototypes, we assessed each function
against a series of criteria, a few of the most important of which
were

☑ Ease of use
☑ Makes sense
☑ Sketchy UI
162

First asessment - ease of use. Did the user understand what they
were to do on this screen? Were they able to ﬁnd their way through
the interface without requiring prompting? Was it intuitive?

163

Take this interface, as an example. This is an ATM in Japan.

It’s far from being considered “easy to use”.

☑ Ease of use
☑ Makes sense
☑ Sketchy UI
164

Second assessment - does the solution make sense? Does the
design help the user solve the problem they needed to.

165

...sounds obvious, doesnt it? but it’s easy to unintentionally design a
UI in a manner which doesnt make sense for the information being
presented...
Image: http://somuchmorethanamom.com/wp-content/uploads/2010/01/obvious.jpg

Example!

166

Example?

If i asked you to add a series of numbers on the screen, which
design makes it easier?

23 53 77 127 343 232 443 39

this?
167
2

23
39
53
77
127
232
343
443

1337

168

or this?

169

Again, it sounds like common sense, right? But the same UI mistakes
keep getting made over and over as we saw earlier.
Image: http://www.zuschlogin.com/content/blogimages/36/WordAllTlNoTaskPane.gif

☑ Ease of use
☑ Makes sense
☑ Sketchy UI
170

and the third criteria for usability testing - did the UI speciﬁcally
*lack* the right level of detail.

I want to stress here the importance of user-testing against
incomplete-looking user interfaces. It’s widely recognised that when
you present a person with a highly reﬁned user-interface...

171

...they start getting bogged down in details, often unnecessary to
the problem at hand.

172

...sketchy or hand-drawn user interfaces separate the details of how
a screen looks from the fundamentals of how a user intends to
interact with the system. It frees them to think about problems, and
not what shade of mauve a button is.
Image: https://plugins.atlassian.com/server/1.0/screenshot/fetch/4645

Dev Evolution

173

So we’ve seen what happens in a UX/agile process. Lets look at the
development side of it and see how they fall into place

174

Development of any product usually involves a little plumbing and
SDUF (what I coin “small design up-front”) to understand the feature
and how it ﬁts into the existing codebase. Just because its agile with
TDD didn’t mean there was no code-design.

...so we devs started working on some plumbing code or bits and
pieces which were superﬂuous to the interaction experience of the
user. Why? Because completely changing the way a user interacts
with a feature involves a lot of re-work...

175

...at which point the whole thing explodes in our faces.

With UX, devs are best left to wait a little while until the main
interaction model has been deﬁned, and THEN commence work on
areas of the system closer to user interaction.
Image: http://forums.tf2maps.net/geek/gars/images/5/1/4/9/time_bomb.jpg

176

Given a particular direction for a feature, the development team
started dipping our toes in the UI water, and invested a little time
creating the interface, but didn’t invest too much - we were making
sure our user can interact with the system, but we abstracted away
any *real* UI task until later
Image: http://ﬂic.kr/p/kDSc4

How?

177

how did we do that?

178

We architected the solution with clear separation between the visual
representation of the UI and the underlying interaction model.
Image: http://ﬂic.kr/p/4fznMy

179

In our world, we develop on top of Microsoft’s .NET platform,
building our application using WPF
Image: http://blogs.msdn.com/blogﬁles/tims/WindowsLiveWriter/IntroducingtheThirdMajorReleaseofWindows_12A7F/WPF_Logo_2.png

Designers Markup Developers

180

which allows developers and designers to work using tools from
their own worlds, but helps bring the two together by allowing them
both to speak a common markup-language to deﬁne the UI

MVVM
Model - View - ViewModel

181

...for the interaction model, we then have the Model-View-
ViewModel design pattern. (Originally known as Martin Fowler’s
PresentationModel pattern).

Roughly, we know that MVVM allows us to separate the way that a UI
looks, and the way our user’s interact with the system. This is a very
common design pattern in the .NET space...

BUT!

182

...BUT! It’s not just limited to .NET.

This separation pattern can be found in frameworks in a number of
other languages...

JGOODIES

183

For example,
Knockout in JavaScript
JGoodies in Java
Mate in Flex/Flash

just to name a few.
Images:
http://knockoutjs.com/img/main-background.jpg
http://knockoutjs.com/img/ko-logo.png
http://mate.asfusion.com/skins/mate_site/assets/images/banner_mate2.jpg

UI Implementation

184

the next phase in the development process commenced once the UX
team had completed a large portion of their testing and had
designed the screens...

185

...development started and a ﬁrst-pass implementation of the UI
was built. It was low-ﬁdelity, but started marking the application
coming alive
Images: http://www.bonn.de/imperia/md/images/rat-verwalt-buergerdienste/pressefotos/veranstaltungen/marathon_start.jpeg

186

and lastly once all the decisions had been made, hi-ﬁdelity assets
were rendered and integrated into the application...and thus we had
successfully brought the best of agile and UX together
Image: http://bit.ly/edqIl2

Lets see it in
action

187

What’s the problem?

188

The problem i’m about to discuss is a task of
making a series of sounds have the same volume.
*Split the frequency range of bass/deep sounds up
to treble/high-pitch sounds into 8 bands
*user uses volume adjustment to make each sound
the same

STAGE 1

UX Dev

189

STAGE 1:

< UX guys start working out what is the best way
to perform the task

> Developers did what we do best - building
infrastructure to perform the necessary core task
(ie: stimulation)

(Getting developers to start thinking about UI at
this stage is guaranteed to result in lots of
unnecessary re-work which we know something
every developer *loves*)

STAGE 2

UX Dev

190

STAGE 2:

< UX works through another possible
implementation. Sometimes throwing away entire
ideas and mockups

> Devs are still keeping the world a safe place to
live

STAGE 3

UX Dev

191

STAGE 3:

< UX believes they have solidiﬁed a concept - 8
bars. Actual design is still very ﬂuid

> There’s actually a lot of plumbing code to
facilitate electrocuting someone, believe it or not.

STAGE 4

UX Dev

192

STAGE 4:

< UX start refining the idea of 8 bars.
Terminology also defined (“bands”). Control UX
nutted out. All the pretty colours still to come, but
the workflow and core behaviour is worked out

> Development took a cautious step - OK/Cancel
and a slider to control Volume.

(Notice we picked low-risk, high impact
features early on. Final design wont affect the fact
that these items will need to exist on this screen
anyway)

STAGE 5

UX Dev

193

STAGE 5:

< UX have the idea worked out - now starting to
detail how the controls will appear and interact with
the user

> Devs start embracing the band idea and
implemented a single band version. Theoretically, if
you get one band to work, then making 8 is a
logical extension of the ﬁrst. Not concerned about
nailing the UX so early on. Goal is to deliver 80% of
the UX upfront and reﬁne over time

STAGE 6

UX Dev

194

STAGE 6:

< UX continue reﬁning/prototyping usability and
interaction of the 8-band concept

> Dev started working on the underlying
implementation for 8-bands

STAGE 7

UX Dev

195

STAGE 7:

< UX now start looking at high ﬁdelity design
and testing. Working prototype becoming more
advanced. At this stage, UX team are freeing up
more time to look at other parts of the system.

> Dev pull together the most crummy looking
user interface. As a bonus, it’s 100% functional and
serves its purpose completely.

STAGE 8

UX Dev

196

STAGE 8:

< UX finalise high-fidelity design and tune based
on testing results. Assets are starting to get cut-up
for integration with development. By now, mainly
working on another part of the system - coming
back to assist with integration with app.

> Dev start integrating hi-fi assets. Because the
interaction points have been defined upfront, the
development task should mainly involve skinning
controls.
TRUTH: We forgot about some interaction points
like stimulation indication - required re-work to
underlying mechanism.

STAGE 9

UX Dev

197

STAGE 9:

UX and development work closely (YES -
PAIRING!) to ﬁnalise the screens to match as much
as possible given time constraints and other goals
required of the planned release. Incremental
improvements will be made ongoing.

FINAL RESULT

UX Dev

198

...with our ﬁnal result looking like this.

Close (not exact) but close to the original design,
with successive reﬁnements planned in future.

199

So there you have it. That’s our story condensed into 45 minutes.

200

At this point we thought of providing a summary checklist of things to do when bringing UX
into Agile but...

Image: http://bit.ly/igYoC8

References:
๏ http://agileproductdesign.com/blog/
emerging_best_agile_ux_practice.html

๏ http://52weeksofux.com/
๏ http://www.smashingmagazine.com/2010/01/05/25-user-experience-
videos-that-are-worth-your-time/

๏ http://sethgodin.typepad.com/
๏ http://www.jnd.org/
๏ http://www.uxaustralia.com.au/

201

there are several excellent web references and these are but a few and include some which
have been a source of inspiration.

We can conclude however that in our experience...

202

UX and Agile are very compatible and in fact...

Image: http://bit.ly/dPp33w

203

and actually bringing UX into Agile makes Agile fun and builds a new found respect for each
other’s disciplines.

Image: http://bit.ly/i34mhh

Thank you
Victor Rodrigues Xerxes Battiwalla
Head of Audiological Software Development Senior Software Developer
Cochlear Limited Cochlear Limited

Email vrodrigues@cochlear.com Email xbattiwalla@cochlear.com
Twitter @jeunj Twitter @xerxesb

We’ll post slides up on Slideshare after Brisbane conference
using hashtags #yowoz & #cochlearux

204

The Emergence of UX in an Agile World

More Related Content

Similar to The Emergence of UX in an Agile World (20)

Recently uploaded (20)

The Emergence of UX in an Agile World