8 March 2016
Agile Design: How to Iteratively Create an Amazing UI
Every web or mobile app has to start somewhere. Your app is not going to begin as the polished UI (user interface) that you’ve seen on dribble or Behance. It starts out simple and evolves over time with the help of experimentation and user testing. There will undoubtedly be some awkward stages where things just don’t seem to fit right. Yes, even UIs go through growing pains. This is particularly true in the world of agile development and agile design, where new features are released quickly.
Anyone who is familiar with agile development knows that the more opportunities you have to iterate on a given feature, or set of features, the better the final product will be. This is especially true when those iterations are guided by user feedback. Using that feedback to build thin iterative slices of your system at a time can be very useful in incrementally improving the speed, intelligence and cohesiveness of your software. But what does that mean for the UI?
##Designing to available resources I have struggled as a designer in the agile software development realm to make the best UI with what I’ve got to work with at the time. It’s important to always be thinking ahead, but to also stay cognizant of the resources you have right now to build the best thing possible. It won’t always be pretty but at least it will make sense.
Here’s just one example of iterating with available resources. You might start your UI by displaying a list of product names. As images become available, you can add them as it happens. Maybe you’ll eventually switch to displaying the products as cards instead of a list. Finally, you can add the product categories once those products are grouped together in the database.
The point here is that you’re not going to start out with all the resources you need to build the perfect UI right out of the gate. Being patient and holding out for that next big feature can add up to a big win. When you finally get that missing piece you need to transform your interface, it’s time to rethink what you have and make something great.
##New features and design spikes When your development team is moving fast and pushing new features and valuable bits of data, it can be easy for things in your UI to stack up. New features may need new buttons, controls and/or inputs that can begin to clutter up what was once a clean looking page layout. There comes a time when you need to step back and take stock of all the elements on the page and re-evaluate their relationship to one another. I like to think of new features not just as page elements, but as UI resources that can be used or combined to broaden your design language.
If you are feeling like your UI is cluttered or unclear, that’s your design Spidey sense tingling, and it’s telling you that you may be ready to make a big play. When you get to this point, often the best thing to do is to take a step away from your normal iteration cycle. Take the time to try to spike out something new that can add to your design language. It may also help to isolate yourself from what is currently in development. Putting yourself in a bubble can help to cut down on distractions and give you the freedom to exercise your creative muscle.
These time-boxed exercises are generally referred to as spikes in the agile world. The difference here is that you are looking back at what you have already accomplished instead of hashing out novel functionality. These retro spikes can be a necessary part of keeping your UI as optimal as it can be. I compare this to a kind of visual refactoring. Just as refactoring can help you to reorganize and and clarify your code, design retro spikes can help you to reorganize your UI elements and clarify your information hierarchy.
Incrementally building your UI can be hard. Retro spiking is a strategy that can make it just a little easier to couple the fast pace of development with design. If you’re hit with a flurry of functionality, it may be time for you to try your hand at restructuring before pushing on. Tying those small details together can make the difference between a good UI and a great one.
