Refactoring Design and Incremental Development

“The release cycle of products has changed: systems … now have vast, permanently connected user bases. Users are now learning to accept change as the norm….”

In my spare time, I’m a keen gamer—particularly a player of Battlefield 3 on the PS3. Recently, the game developers DICE applied an update to the online multiplayer game that tweaked a number of its weapons. As often happens, this triggered a vigorous debate online. Gamers will appreciate that this is a euphemism for “lots of anger, expressed with varying degrees of coherence and literary merit.” I’m sure DICE had conducted alpha and beta testing of the changes, listened to feedback, and made further refinements based on it; just as I’m sure they made the changes in response to feedback from users on the forums. But this whole update process demonstrates how the release cycle of products has changed: systems, including games, now have vast, permanently connected user bases. Users are now learning to accept change as the norm—whether producer-driven or user-driven change—or typically, both.

Advantages of Refactoring

“A development approach based on incremental change may present a less attractive design task for a UX designer than doing wholly new development, but refactoring an existing design offers a number of advantages….”

A development approach based on incremental change may present a less attractive design task for a UX designer than doing wholly new development, but refactoring an existing design offers a number of advantages, as follows:

Users can build on their existing knowledge. A design that makes use of users’ existing knowledge reduces user frustration. Particularly if software developers involve users in their redevelopment work, users can become strong advocates of a product.Corollary—Don’t be afraid to introduce something new if it offers genuine advantage—especially if research and testing indicate that users have experienced a new approach in another context and responded to it positively.

Costs are contained. Refactoring an existing design should be less work overall, because you can refine your research and prototypes rather than create them from scratch. This is particularly important in the current economic climate.Corollary—This is not certain and depends on the design context and the nature of the change you’re making.

Time scales are contained. Typically, you’ll expend less effort on creating original user journeys, personas, and prototypes than for completely new development.

It helps to build a relationship with the client and users. Having the same team working on the same design, whether through refactoring the original design or doing repeated refactorings, builds their knowledge of the system and users and deepens their relationship with clients.Corollary—Designers need to be able to maintain sufficient distance from their own designs to be objective about them.

Principles for Refactoring Designs

With these advantages in mind, you can apply a number of principles that support a refactoring approach to design.

1. Document design changes and your rationale for them.

“One area in which UX designers frequently fall down is in documenting their designs—both in terms of providing sufficient detail for developers and in helping other UX designers understand how and why they made a particular design decision.”

One area in which UX designers frequently fall down is in documenting their designs—both in terms of providing sufficient detail for developers and in helping other UX designers understand how and why they made a particular design decision. If the only way another designer—or even you some months or years later—can understand why a particular design works as it does is by talking to you, your design needs more documentation. Understanding why a designer has made a design decision is a major element in our ability to make informed decisions about what to change and what to leave unchanged. If this is important for an individual designer returning to a design after a gap of some months, it is even more important when picking up a design that a colleague has created.

Design documentation is also important for another reason. The act of writing down why they’re doing something in a particular way forces designers to reflect on why they’re doing it and assess whether it is a reasonable approach. This can in itself be a valuable exercise—or you could always explain it to the duck.

2. Fail fast.

Having good documentation in place lets you produce your deliverables much more quickly because you are building on existing personas, user journeys, and prototypes rather than having to create them from scratch. This lets you produce your prototypes more quickly and fail fast, by allowing you to try out multiple ways of addressing the same problem or change.

3. Look for commonality.

“Once your design is in place, you can identify similar functionality that you can tweak using a common approach, making life easier for users.”

Once your design is in place, you can identify similar functionality that you can tweak using a common approach, making life easier for users. You can liaise with graphic designers and developers to ensure that they can implement what you have proposed and get them thinking about your design. Most important, you can start to get early feedback from users to further refine your design.

4. Simplify.

Since simplicity is an inherent part of good UX design, removing clutter makes the essence of a user interface easier to perceive. Hence, opportunities for improvement become more visible. A designer needs to be absolutely ruthless in removing clutter. Consider the date entry design shown in Figure 1.

Figure 1—A cluttered form

In this example, the Date of Birth field label has three types of decoration: bold, title case, and a colon. Because the field label is next to a field within a form, its role should be clear to users. A designer should carefully consider whether to add such decoration in terms of whether it adds value. Here, bold adds nothing of value, nor does the use of title case. While a style guide may mandate the use of such styling, it does nothing to help increase users’ understanding of the form. The colon can provide consistent demarcation of right alignment for the eye, which can increase the visual appeal of the form.

The input field itself is visually cluttered, which will slow users down. There are three input fields where a single field would be sufficient, requiring users to either tab or click to advance the insertion point, possibly requiring them to switch from keyboard to mouse. The heavy borders on these three separate fields further detract from the simplicity and effectiveness of the design. Removing visual clutter makes life easier for users, and it’s easier for you, as a designer, to understand and rework a design later.

5. Embrace feedback.

“Short cycle times for design and development require that you expand the system boundaries to include users as a group, getting them much more involved than was previously common.”

Once you have created your design, tested and refined it, and made it available to users, give them an explicit opportunity to provide further feedback. Short cycle times for design and development require that you expand the system boundaries to include users as a group, getting them much more involved than was previously common.

6. Expand the system boundaries.

UX designers can sometimes get locked into a mindset in which they look only at the user interface on which they are working. You can apply good UX principles far more widely: to the processes the host organization uses and to other user touchpoints—for instance, promoting cross-channel consistency. This understanding of a wider system can help UX designers to have a broader understanding of a user experience than simply a user interface—and by developing a deeper relationship with a client, they gain the ability to make positive change.

In Conclusion

“The development techniques that refactoring involves can have a positive impact on any type of product development.”

Designing a new system is sexy: it gives designers room to be creative, to experiment with different ideas from the ground up, and to experience a sense of control over the finished product. However, as systems get bigger, with larger user bases, they acquire greater momentum. Some may perceive making changes to existing systems as less sexy, but the development techniques that refactoring involves can have a positive impact on any type of product development.