A Simple Mobile User Testing Setup

Bryan Sleiter
Framer
Published in
3 min readJun 28, 2016

My product team recently reached a point on an Android project where we needed to do some user testing to validate our ideas. After talking with a few user testing services, I quickly realized that it would be best to do the testing myself — because our app has a very specific use case — and our timeline was quite short. Thanks to sketch and framer, producing a realistic prototype was very fast and painless. Love these tools!

For previous testing sessions, we had used a document camera & webcam setup. This time I was looking for something easier and more natural for the person testing the app. It also had to be super easy to setup with minimal chance of technical difficulties.

I found a great article on Smashing Magazine by Colman WalshA Guide To Simple And Painless Mobile User Testing. This is an awesome way to wirelessly record user testing sessions.

Here’s how it works

  1. The screen of the testing device is wirelessly mirrored to a laptop via Google Cast, enabled by Reflector 2.
  2. ScreenFlow places the webcam output on screen, and records both the video and prototype interaction at once.

This setup is almost perfect. However, without an overhead camera I couldn’t see where the user was tapping on the phone screen, only if the taps were successful. The path around this was by the way of an awesome framer module that lets you quickly add material design ripple effects to any layer. I used this on most elements in the prototype so I could track where the user was tapping.

targetLayer.on(Events.Tap, android.ripple)

Testing sessions

I put an ad in craigslist, looking for candidates to participate in a product study, stating they must use an Android phone and a few other requirements. In the ad there was a link to a survey. They had to take and complete the survey to see if they qualified. We offered a $50 amazon gift card for a 30 minute session, so I got a lot of responses very quickly.

When a candidate comes in for the study, I first take a bit to get to know them by having an informal conversation. Jake Knapp posted a great user interview guideline here.

Each session recording was saved as a .screenflow file. This gives you the ability to easily crop out highlight clips from each testing session. Perfect for validating with the team.

ScreenFlow Timeline

This setup makes the testing as natural as possible for the user so they feel comfortable, hopefully providing more natural results. I know it’s not ideal for a designer to also run tests, but it’s what we had to do at the time. Some testing data is better than none. ¯\_(ツ)_/¯

--

--