Published on | Prototyping: From UX to Front End — Medium Louisa LaughtonScott

Agile Development is popular due to its overall efficacy and success. A single product goes through repetitive cycles of being 1) designed, 2) developed, 3) released onto the market then 4) tested by real users. Their 5) feedback dictates the changes that need to be made in the next cycle. So it starts again at 1) design, 2) develop…. You get the picture. Evangelists of Agile Development rave about how this iterative loop ensures products are tested early for market validation, then quickly improved according to user feedback.

They’re not wrong. This cycle ensures that the product is user focused. Changes are made quickly implemented to benefit the user, thus ensuring a higher quality product.

So why is Agile Development still wasting time and money?

Due to the short sprints, designs often get handed over to the development teams before they are ready. They ‘look’ ready, but they have undiscovered UX flaws. This means products get developed and deployed with multiple problems that need to be fixed later.

Oh but its fine, the agile evangelists say. Its better to get it out into the market and tested by real users, they cry. Then we can make changes the really important changes!

Well, that’s simply not the case.

1) You should be able to achieve a certain amount of market validation from user research, so your product is already being designed around a user pain-point, before mouse touches sketch (and WAAAAAAY before product release).

2) By doing user and usability tests during the UX Design phase you can iron out issues early on. BEFORE you waste time and money developing and deploying a product that needs to be fixed again and again and again.

Please let me introduce you to the both CHEAP and EFFECTIVE Iterative UX Design process…

Step 1: A Low-Fidelity Test

Sketch out on paper the first screen designs, following your primary user flow (or create VERY basic wireframes on Sketch). For example, if I’m creating an online banking app, my primary flow would be: the user logs in → views current account balance → selects to transfer money → then transfers from current account to savings account → confirmation of transfer.

Create a digital paper prototype by uploading pictures of your sketches onto prototyping tools like Invision or Marvel.

Digital low-fidelity paper prototype user testing

Ideally test with a developer, a stakeholder and someone totally unfamiliar with the product. Individually take them through your designs step by step, asking them to perform each action from your user flow on your paper prototype. Should take 5 to 10 minutes each. Observe, take notes and ask for feedback. From this you can find out whether your initial design idea is user friendly, technically viable and in line with the projects requirements. If it’s not, you can use the feedback to make changes.

All this before anything is properly designed and developed. Time saved 👍 Money Saved 👍.

Step 2: Mid-Fidelity Prototype User Test

Make a mid-fidelity prototype using your second iteration wireframes (i.e. the improved wireframes following your low-fidelity user testing). Create a list of tasks, inline with your primary and secondary user flow, that the user must complete (side note — do a dry run to check your prototype works with your task list).

Test with 5 people including developers, stakeholders, target and non-target users. Ask them to complete the tasks. Takes about 15 to 30 minutes per user, depending on the complexity of the product. Once again, observe, take notes and ask for feedback. Make changes to the designs according user feedback (a trend is appearing).

See those UX problems rapidly melting away? Time saved 👍 Money Saved 👍.

Step 3: High Fidelity-Prototype Testing

In a high-fidelity prototype, there should be the same content, graphics and interactivity as the live product is expected to have. At this the point the designer can focus on testing the details, such as checking if the UI components like the menus or buttons are clear.

By now, the problems identified in the mid-fidelity test have been solved. Write a more extensive task list to ensure that all bases have been covered. Find a new developer, new stakeholder and target user to test with. Observe, take notes and ask for feedback. Make changes to the designs according user feedback (BAZINGA).

Hand over a user-centred product to developers with no usability issues. Time saved 👍 Money Saved 👍.

Conclusion

Despite everything, I am actually one of those Agile Development evangelists. I love the iterative loop that leads to continuous improvements. Arguably, I’m a huge fan. But, that doesn’t mean the speed of Agile Development should compromise good UX.

Agile Development iteration cycles should be used to tackle high-level changes, such as product pivots. The Iterative UX Design process means that usability issues are solved very early on. My method is lean UX, but for the time pressed designer its a million times better than nothing.

So save time and money by implementing Iterative UX Design as a must.

Save time and money! Try Iterative UX Design was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Save time and money! Try Iterative UX Design

Cool stuff, every week

More Articles