Behind the Scenes, UI Design

Usability Testing Made Simple with Adobe XD and Quicktime

In February, I wrote a short blog post about how we designed, developed, tested and shipped a cross-platform mobile application in six weeks. The app was successfully launched in App Store and Google Play, but it was by no means a finished version of a finished product, but rather a Minimum Viable Product (MVP).

One of the principles of Lean UX is to create a MVP to determine which ideas are valid. After our first release, we focused on validating ideas and interaction patterns with real users, and then continually adjusted our prototype based on our learnings.

The think aloud test

For the Smartly project we used the think aloud test method, which is a good way to understand participants’ thoughts as they interact with our product by having them think aloud while they work. This form of user test is suitable for qualitative research, as a standard test lasts up to one hour.

Why and how to perform usability tests

Requesting feedback and testing prototypes on your audience is key if you’re building a product that people will adopt and use. Having an open mind and sharing prototypes with end users early and often in the design process will give unique insights of what works well and what doesn’t. Easy as that.

Create tasks for the user

Take notes in advance about the things that you would like clarified, you don’t have to test everything. Write down the tasks you want the user to perform. A tip is to provide users with tasks that will have a major impact, if features do not work as intended.

Usability Testing with Adobe XD and Quicktime

Here are a few examples of tasks that we created for the users of our smart-home app for Smartly:

  • Can you please try to navigate to where you would set your preferences for housing modes?
  • What do you expect will happen if you press the holiday button on the home screen?
  • Can you please try to set up a schedule for when your house should enable energy saving mode?

Set up your prototype in Adobe XD

For User Interface (UI) Design, we used Adobe XD, which is, in my opinion the best piece of software available on the market for UI Design. If you’re not familiar with Adobe XD yet, I’ve written a short blogpost about why I think it’s brilliant.

One of the most powerful features in Adobe XD in regards to usability testing, is the ability to test your prototype directly on a real mobile device. This is really useful for think aloud tests, as it enables the end user to interact with your prototype on the very medium it was designed for. The user will get a more authentic feel of what the product will feel like while you have the power and flexibility to iterate and make adjustments on the prototype as you go. What’s not to love?

Creating an interactive prototype from your static design in Adobe XD is super easy. Here is a great video tutorial with a demo of the prototyping capabilities in XD.

Capture screen interactions and voice with Quicktime

From our experience, it’s quite hard to capture all the relevant details during a think aloud test. What did the user click on? How did the user get into trouble and how did she respond when she was asked to perform a specific task?

Screen and voice recording with Quicktime

That’s where screen and voice recording with Quicktime comes in and saves the day:

  • You will get a live render of the user’s interaction with your prototype, right there on your Mac (which means you do not have to hang over the user’s shoulder during the test, and thus be a pain in the ass)
  • When the test is over, you can sit back and watch the test as many times as you like, take notes and create a summary of the most important findings

How? It’s easy. Simply just launch Quicktime (comes pre-installed with Mac OS) and select File > New Movie Recording. Make sure your phone is connected to your Mac using a USB-cable. Open the drop-down menu just to the right of the recording button and select your mobile phone in the list. When you see the screen of your phone on your computer, just hit the record button and you’re good to go.

Our experiences and what we learned

We performed five usability tests with screen and voice capture. Each of the participants were given three scenarios and corresponding tasks. Before running the tests, the team had some hypotheses about which parts of the app that would work and where there might be areas for improvement. Our hypothesis were partially confirmed.

We ended up with a small list of changes we would make in the prototype. There was one case where we knew we had to do a change, but we were unsure which way we should go in the visual representation of the functionality. Therefore, we made an A/B test and designed two variants that we tested on 13 potential end users. The results did speak for itself. 11 of 13 users preferred one of the two variants. Bingo!

Final words

Usability testing does not have to be either expensive, painful or difficult. Our experience is that if we ask people for feedback on design and prototypes, we end up with valuable insights that we would not have done without. Good for us. Good for our customer. And not least – good for the end users of the product.