UX Magazine

Defining and Informing the Complex Field of User Experience (UX)
Article No. 700 July 19, 2011

Change on a Dime: Agile Design

What does it mean to have a good experience? Think of your favorite restaurant, the interior of your car, and the software on your phone; how do people craft these experiences? What details, planning, and design go into the process?

Would it be possible to create a great experience if you were limited from laying out a full design before you got started? That’s the typical scenario in designing a user experience within the realm of agile software development. As a designer, how do you manage in an environment with such a quick pace and changing specifications? This article provides a brief overview of agile development and gives several tips for working as a designer in this environment.

Development Through Agile

In large part, the movement towards agile is a response to an industry perception of heavy, slow, and bloated software development. Specifically, agile is a movement away from the typical waterfall model of software development that requires an initial comprehensive design (“big design up front”). With the waterfall model, deliverables and the value from having a functioning product take the form of one bulk delivery near the end of the process. The drawbacks are that development can be delayed, come in over budget, or be irrelevant by the time the product is finished.

Waterfall development timeline diagram

Agile was conceived as an alternative approach that delivers a constant stream of value through much smaller deliverables. Typically, agile development takes place through defined iteration cycles that are usually 1-2 weeks in length. At the end of each iteration, a customer-defined set of features, called a story, is delivered. Stories have their own progression through development (typically a backlog, in-process, review, and production queue) and are continuously prioritized by the client. This means requirements can change quite frequently through development. Along the way, refactoring takes place from time to time in order to ensure that features fit together into a single cohesive application.

Agile development timelene diagram

The primary values of agile are to quickly deliver functioning software and allow for changes in requirements throughout development. As a designer, you may be asking yourself how (or why) requirement change is even allowed. Because no big design up front is delivered, developers can start working on simple features for clients that add immediate value. Although this potentially leads to a larger discussion as to what exactly is conveyed by the term “value,” in this case, I am specifically talking about functioning (versus theoretical) software. Through agile development, changes are not only allowed but also expected.

Assume for a moment that you’re tasked with creating a mobile travel application. Specifically, your client wants the user to be able to browse destinations, write reviews, and book travel. With agile, it’s possible to deliver the smallest units of functionality (e.g., browse destinations) almost immediately. Furthermore, because feature sizes (i.e., the stories) are small, a large UX design may not immediately be necessary (or in some cases, budgeted). However, what this gives your client is a product that can stand on its own at any given time throughout development. It’s important to clarify that deliverables prior to the final product will likely not provide a response to all problems the product set out to solve. That said, these deliverables will allow your client to see progress and steer the course of development as they see fit.

The sunny side of this methodology is it allows development to adapt to customer needs, budgets, innovations in the field, and potential ventures into uncharted territories (e.g., completely new concepts). The dark side encompasses the same notions that make it great: the client can change requirements at any time, features developed independently of one another may feel disjointed, and there is rarely time to create a comprehensive user-centric design.

As a designer, someone who is responsible for the end-user experience, how can you best react in such an environment? Let’s take a moment to examine some of the more prominent issues as well as some possible solutions for working in this periodically unpredictable and sometimes volatile field.

Designing Without Design Upfront

The sooner you understand and internalize the fact that big upfront designs may not exist, the better. Because of the pace of an agile environment, it can be difficult to produce high-fidelity designs and systems ahead of development. The only exception may be when style or branding guidelines are clearly defined. Even then, you may actually be wasting your (and your client’s) time by flushing out a high-fidelity mockup if requirements are to change.

Even though you will not likely have an opportunity to create a big upfront design, you may be able to take advantage of the period immediately before development begins (known as iteration zero). In this time, try to get as much groundwork done as possible. If you’re lucky enough to have direct contact with the client, ask as many questions at this time. What are they envisioning? What features are they aiming for? What theoretical features could be introduced? Why are they building the application? Who are their users? What would their ideal scenario be?

This information may save you from potential rework or dead ends in design.

Reacting to Course Change

The course of development may change at any time. This may cause frustration if the newly proposed idea deviates too far from a preconceived idea or design.

Let’s jump back to our theoretical travel application and assume that after using the first implemented feature, your client wants to drop the ability to write reviews and instead provide the ability to message other users within the application. How do you react to this? While potentially frustrating, it’s important to remind yourself of the client’s current needs and requirements. Additionally, you must able to separate and drop what is no longer needed. Sometimes this means removing something you just spent an entire day on; know that this is okay.

Keeping Designs Simple

Because the horizon may be unknown, try to keep all solutions and designs as simple as you possibly can. Reduce problems down to their lowest common denominator and create only what is necessary—nothing more, nothing less. Not only are such systems easier to maintain, but they may also save you time in case something gets changed, added, or scrapped.

Simple and quick solutions may be all that are necessary. This means ditching perfectionism (pixel counters, I’m looking at you). However, this does not mean relinquishing your perspective on the entirety of the application. On the contrary, sometimes the most important time to consider your high-level design is when you’re creating specific solutions. In any case, respond accordingly within the scope of stories, features, and iterations.

Maintaining Consitency Through Development

Even though a comprehensive application design may not be created, it is important to understand feature consistency and congruence. As a designer, one of your greatest challenges may be ensuring that all implemented pieces fit together into a single cohesive experience. One barrier may involve implementation problems; your design for a feature may be spot-on, but due to the quick pace of agile, it may not be fully (or properly) implemented. Because of this, it’s important to review all stories that go through iterations.

Feature consistency diagram

Alternatively, sometimes your feature designs are properly implemented but the over-arching design feels disjointed. To combat this, try creating a low-fidelity task flow diagram or outline to keep in mind how it all should fit. Not only does this give you some sense of direction and context, but it can also provide your developers with immediate direction if needed.

At times, it will be necessary to jump out of the iterative flow and examine the whole system for congruency. Do components fit? If not, why? As you work through these potential problems, keep in mind the scope of your iteration and deliverables. Refactoring for the sake of consistency is great, but if it means holding up your development team, you may need additional planning for these efforts. Try creating stories specifically for reviewing and updating the UX of your product.

Avoiding the Design Vortex

As a designer, sometimes the most difficult activity to do is to stop designing. It’s important to mind the scope and pace of agile, which sometimes means your prototypes will not be pixel perfect. That’s okay. Just be able to communicate to your development team how everything should work.

One strategy for this is to conduct basic whiteboarding sessions with fellow designers and your development team. This allows your ideas to be quickly communicated and allows for technical validation of any solutions or features you are considering. If a more formal deliverable is required, try wireframing for multiple screens and layouts.

Considering Your Project

Even though agile development is quick, stay focused on your users, clients, personas, or the closet thing you have to visualize who will be using your product. It’s important to be able to visualize who is using your application. How are they using it? Where will they be? Under what conditions? Keep this in mind and help others to understand the project.

And continually ask yourself if the product is still a success. It’s really that simple. Is your client happy? Are the users happy? Though subjective, sometimes this is your only metric to check your efforts.

Last But Not Least

Design in an agile setting may be challenging (and even jarring), but it’s not all bad. Agile allows for a consistent stream of feedback from your client. Because features are released each iteration, you can potentially gain continuous insight into how your designs are being interpreted and used. Though this provides no substitution for traditional user testing, client demonstrations do provide some level of feedback. In a way, agile may be a great training ground for designers as it provides an opportunity to create smaller, more manageable solutions with a rapid feedback cycle.

Iteration feedback cycle diagram

For some, creating an effective and memorable user-centric design within an agile environment may seem tricky. Then again, the challenge may also be fun and exciting. It’s important to note that there is not one proven method or process that works best. Like all human interaction and patterns, we’re still figuring this out. However, as long as you actively consider your end users and design with them in mind, you should do just fine.

ABOUT THE AUTHOR(S)

User Profile

John Anderson is a User Experience Designer and Certified Usability Analyst at Asynchrony Solutions, Inc., a leader in Agile software development. He collaborates with a variety of teams in the industries of healthcare, real estate, and government focused on crafting custom mobile and web applications. For more information, visit http://blog.asolutions.com.

Add new comment

Comments

33
39

I'm glad someone has expressed the very issue at hand with UX -- upfront design goes hand-in-hand with up-front analysis and post-development testing. That is, its a Waterfall world, not an Agile one.

39
45

Interesting article and one that addresses many of my frustrations as a designer working in an agile development process.

There's a fine balance to the pixel-perfect and iterative deadline process. If you aren't pixel-perfect enough, you end up over-time looking like "Ling's Cars" with your public-facing product. Quality-compromises add up. It seems like there's never enough "dev time" in the sprints to correct blatant visual pixel-poo.

I definitely appreciate the style-guide exhortation and this is one that I've been feeling convicted of lately. I need to create something like this for our developers to help streamline the process and allay some of my frustrations with dev front-end output.

Do you have any helpful links that will guide us designers through the process of creating a style guideline for developers?

Thanks!

39
35

|As an agile designer I'd like to use iteration zero

Without a doubt. This is assuming you have a solid idea of the client's requirements, idea and vision of what they want the product to be. Unfortunately, this isn't always the case due to various client dynamics (e.g., changes in company goals, new project managers, new product directions, etc.)

|better relationships with your team members and your stakeholders

One of the best ways of building these relationships is a recurring demo session where you can consistently touch base with the client to make sure they see their product and have a channel to provide feedback. Additionally, this allows you to be reminded of the overall goal of the product and ensure that everything is still on track.

|there's all of the planning and discussion and and proposals and green-lighting and research and debate

Ideally, all projects would have the over-arching ideas fully considered before anything actually happens. However, it sometimes seems that due to varying circumstances, you may need to reconsider what you're building due to changing requirements and ideas of what the project should be.

|annotate your low-fi mocks with references to the appropriate styles

This is a great point. Time provided, I always try to provide our development team with a separate style guide document to outline all design patterns and nuances so they are empowered to make calls should I not be available (which can be the case if you're dedicated to more than one project). That said, it's also important to set time to do design review sessions to make sure nothing is lost in translation.

40
38

Great article. As an implementer of someone else designs, i love to have it pixel perfect, saves them coming back afterwards and pointing this out!

37
44

Hey John,

Your point that "The only exception may be when style or branding guidelines are clearly defined. Even then, you may actually be wasting your (and your client’s) time by flushing out a high-fidelity mockup if requirements are to change." is a great one.

I would even go further and say that if you have the benefit of clearly fleshed out branding guidelines, it's a waste of time to develop high-fi mocks--even if the requirements won't change.

Instead, you should just be able to annotate your low-fi mocks with references to the appropriate styles. That saves you the time of developing hi-fi mocks for every feature, but still gives developers enough specificity for them to fill in the details by referencing the branding guidelines.

My company's product/design team has been doing a lot of work to move in this direction recently. I blogged about it yesterday: http://unpackingtech.blogspot.com/2011/07/accelerating-design-accomplishing-more.html

-Jim (@jimlindstrom)

37
37

sacrificing quality.

41
34

This is missing something really important.. that agile isn't just about risk management and iterative delivery, the other half of the agile manifesto is just as important - better relationships with your team members and your stakeholders. Those are the things that can really make or break a project and can't be understated.

There's also a common misconception illustrated perfectly here by the agile development timeline diagram. That isn't how the process works, that's just how the actual build process works.

There's a whole load of stuff that has to happen before that. There is a brief mention here of sprint zero, but even before sprint zero there's all of the planning and discussion and and proposals and green-lighting and research and debate that always happen before a project kicks off in earnest.

So there's already a mechanism in place for doing stuff up-front. By the time your iterations take place you should already have done your audience research, worked out your overarching goals and design principles, and have a rough sketch of what it is that you are building.

That rough sketch may change shape a bit as the project goes along, but really the iterations are about fleshing out the details and changing as and when change is needed.

This is of course nothing new to designers, who are already used to a cycle of user testing and reworking as a project goes along.

If your valuable stuff is being junked then the project isn't being run properly. There are three possible factors, quality scope and time, and agile is designed specifically to safeguard quality and time by allowing flexibility with scope. So things that are dropped should ALWAYS be the things that have the lowest value. An ability to convincingly explain value is a crucial skill for a designer.

Lastly, there's always enough time to get feedback. That's the point of things like sprint reviews and the product owner role. If your feedback is from user testing which has a longer lead time than a single sprint, then that's not a problem at all either - there are many future sprints that findings can be implemented in.

It's all possible, there are plenty of organisations running agile UX very successfully, without

39
38

As an agile designer I'd like to use iteration zero to actually work out what the hell we are doing.

As a UXD I'd like to see the primary user centric stories lopped off the project to get it out the door.

As a UXD guardian I'd like developers to design web apps and prioritise user needs with arbitrary decisions based on technology priorities.

Somethings should just be upfront...
Thinking
Planning
UXD

It's just another type of process that is delevoper centric not necessarily better for businesses or end users.

Good agile can work with robust discussion and prioritisation of key UXD stories, however design has to be weighted or understood by a team, a good team, to have any chance at success.

It's a little dance we do...but ya gotta know the steps

35
37

|Any advice on how to stay positive when what you design gets sliced down for a quick release and then may not ever get revisited and reworked?

Don't lose your ideas.

I know it can be frustrating to cut designs, comps, and concepts. But, the keyword there is ‘cut’ and not ‘ditch’. It's important to not forget what you have done. You may be able to reuse part (or all) of your designs in the future. At the very least, maintain a local folder or place where you can keep your ideas and concepts. If you're working with a design team, you can also make these concepts public and another project or team may be able to use them.

You may also want to consider how or why your design got sliced down. What about it was 'too much'? Is it possible to create something equal or better while using less resources (or whatever is scarce)? At any rate, don't stop thinking or being creative. After all, it's agile- the future is always unknown.

|You say it is alright to not have it pixel perfect when designing, but in what phase do we get to the pixel level then?

This is tricky and based on a) what stage your project is in, b) your personal bandwidth, c) and any development deadlines.

First, if it is an existing product, create what you can (e.g., white-boarding, sketches, low-fidelity mockups, etc) to communicate the idea of what needs to be developed. Have your developers use existing product styles or design patterns to save time and help with composition. In some cases, you may be able to create high-fidelity mockups (to the pixel level) if you feel it is necessary and it does not hold up your development team.

That said, if you are fortunate enough to have the bandwidth to create full-fledged mock-ups, this is okay. In my opinion, it is even more justified if you are creating an entirely new design or product. Depending on how well your development team acknowledges and understands the design, you may not have to create more than one or two mockups to set a design pattern.

|I even hear from Scrum Masters, that there's not enough time to collect feedback. Who's fault is this?

It's important for the team as a whole to make time to collect feedback. Sometimes you have to really push for it: bring it up at stand-ups, retrospectives, or any kind of planning meeting that you may have. With enough support, you will be able to have this time to reflect on what has been created and react (if necessary) appropriately.

38
41

In theory and in practicality, this post is nothing more then Agile/ UX development 101.

My issue is with subtitle "Last but not Least".
Having worked in an Agile environment for years (even before the term "Agile" was official) , designers have always been that eccentric, liquid, free flowing, adaptable knowledge worker which the Agile environment tries to forge. The problem I find is that even though the Agile process should host an environment for quick change and turn around, the Scrum Master or accidental Scrum Master does not as a matter of fact allow this "down" time at the end of a cycle to collect feedback from customers, team developers or stake holders.

Obviously this is not the way to conduct an Agile development process, however more often then not, this is what is happening in the background.

Even though we as designers would like to step away from a Waterfall approach to development, this is simply not happening enough in the Agile world.

I hear countless complaints from designers who are led to believe one thing, but when the project kicks off, it's nothing more then business as usual.
I even hear from Scrum Masters, that there's not enough time to collect feedback. Who's fault is this?
The regular shortcuts kick in and the Scrum Master get into their near-sighted monocular vision of simply getting the job done.

I've yet to see a real and true Agile environment that truly embraces the flexibly and agility of allowing free flowing design thinking and development with the proper time for feedback and the addressing of those issues at hand from the people that really matter.

I bet you soon enough we'll coin a term entitled "Lean Agile, or Swift Agile Process" to address these same issues.
Ever hear of "Lean UX" anyone?

Let's stop defining the damn thing and lets do things properly- Stake holders take note.

"Be water my friend"- Bruce Lee

45
43

Great article - its only natural that we extend agile development cycle into UX design. One issue I run against is the visual design... rough sketches are no problem to iterate, but you can only go so far with sketches. Eventually you'll need a pretty polished design to present.

42
45

Hi,

Nice article! It addresses the issue I struggle with, that is: how to get the visual design done well? You say it is alright to not have it pixel perfect when designing, but in what phase do we get to the pixel level then?

Thanks!

36
39

I work in an agile environment but one in which ux is a fairly new component. I don't consider any of what I do "deadwork" because it all adds experience and helps to solve other problems down the road.

Any advice on how to stay positive when what you design gets sliced down for a quick release and then may not ever get revisited and reworked?