RANGE UI + UX PROCESS

Action Target was ready to redesign the user interfaces on their gun range controllers and brought in Sawaya Consulting to help with the design, information architecture (IA), and user experience (UX). The system was originally designed by engineers so bringing in a team that focuses on app design and how people use it made a huge impact to the project.

The ranges that Action Target builds are more than your typical range with a target that travels from the shooter to the end of the range. These ranges are used for commercial, law enforcement, and military clients. They can run advanced training scenarios—like blacking out a range, running flashing police lights, and having a target turn to face you while you decide if it’s a threat or a friendly. Targets can move in a variety of ways and even charge at the shooter. Training in these high pressure situations leads to better preparedness in the field.

We worked closely with the client on information architecture, UI design, and user experience testing.

In the end we created a user interface that is much easier to use, understand, and generally more fun to work with.

Project Highlights

  • In-depth user experience studies where we recorded users completing tasks, then designed based on our research and retested.
  • The most basic process people use the interface for was taking new users between 30 seconds and 2 minutes to complete. Our redesign reduced that time to 3 to 10 seconds.
  • We introduced a Setup button, but found in our retesting that people still missed it so we instead presented a popup—this both reduced time and increased ease of use for users.


Our UX Process

Please note, several of the items shared have been edited for confidentiality.

Walk a Mile

Our UX process started the way it does on many projects—by walking a mile in our client’s customers’ shoes. For other projects we’ve done workouts, we’ve taken cooking classes, and we’ve eaten waffles. For this project we visited the client’s range and several others throughout Salt Lake and Utah County. We observed range users, talked to law enforcement, and fired at a variety of targets. We ran the simulations, we used the interface, we got to the point where we really understood their business.

Review the Current System

We fully documented and reviewed the current system (more about that in the Information Architecture section). The current system grew out of what the engineers originally put together, plus features tacked on over the years. This is what we started with:

Imagine a frustrating user interface—for instance, someone else’s microwave—now imaging using it, being frustrated, and having a loaded weapon in your hand. You can see why a user interface that is intuitive and works without much thought is important.

Some microwaves can cook an entire Thanksgiving dinner1—but most users only want to heat up leftover takeout. If you have a 30 second button on your microwave, you will likely push that 3 times if you want 1:30 instead of entering in the time.

Original Interface
Original Interface

sawaya-actiontarget-interviews-recap
Select pages from the pre-interview report

Pre-Interviews

We sat down with several stake holders and reviewed the current system: what was working, what wasn’t working and what would be cool in the next version. We send out interview documentation ahead of time so participants can be ready with their thoughts.

Interview Report

When we were finished talking to everyone we compiled an interview report. This put the information from the engineers, sales team, management team, and customers all in one place to reference throughout the project.

Pre-UX Tests

Once we had identified the tasks that users would need to do we conducted pre-design tests. For this we ask a cross section of people that fit our personas to complete tasks and recorded video of users completing the tasks.

How long people were taking to use the system was a major concern and something we were charged with fixing. We analyzed the videos and clocked the time it takes to complete a test.

The tests included not only this statistical data but also interviews about how people felt about using the system. Did they enjoy it? What did they like? Was anything frustrating?

There is nothing like watching a millennial button mash a screen that isn’t doing what they expect, or watching a boomer read everything and still hesitate to make a choice to crystallize what isn’t working.

By recording what they were doing we were able to watch not only what they did but listen as they gave feedback throughout the process. This doesn’t have to be fancy, we stood behind them and took video with our mobile phones while we talked them through the process.


Information Architecture

Information Architecture (IA) is all of the stuff you do before design. Doing this step helps you be ready when you do start laying down pixels to make sure you’ve accounted for everything that needs to go into the design. This also gives us a good opportunity to walk through things with the client and make sure everyone is on the same page.

Personas

We started with a set of persona cards. These help distill the customers into groups, but also humanizes them and gives us a shared vocabulary to discuss how to meet various needs. This also helps understand if users are best grouped by age, location, gender or some other demographical piece of information.

Our personas were based on research the client has conducted as well as our own research into the industry and by talking to customers and their end-users. This is a project where it’s easy to guess what the customers might be like—and easy to completely miss who they really are. This valuable step helped drive several decisions, narrow down who we needed in our user testing, and provided a tool for several other projects the client is working on.

There are a dozen total personas, we’ve chosen three to share.

Selected Personas
Selected Personas

Giant 6' Long Actions Map
Giant 6′ Long Actions Map

Current Actions

To fully understand everything we needed to build we worked through the current system, photographing and documenting it. We built this into an overall action map. Unlike websites or apps it’s not possible to dig into the backend code and understand everything, so we had to rely on a front-end approach to this documentation.

Site Map

To fully understand everything we needed to build we worked through the current system, photographing and documenting it. We built this into an overall action map.

Sitemap
Sitemap

User Flows

Using the persona cards, we created a user flow to show which screens each type of customer would use and what option they would probably choose.

User Flows
User Flows


Wireframes

A set of wireframes are created so you can account for all elements on a page and work through conceptual issues.

Wireframe
Wireframe


Design

Once all of the information architecture pieces were approved we jumped into design. Our process was iterative and created a much cleaner user interface. Throughout the process we post our designs online so the client always has access to the latest iteration and can share internally as needed.

Bringing in app designers gave this a more current feel and is just enough on-trend to make this feel modern and still give them 3-5 years runway on the design look.

The new interface looks like this:

Designed Retriever UI
Designed Retriever UI

Results

When you look at this case study it’s interesting to look at how little of it pertains to the actual design of the project—even though this is basically a user interface design project. Projects like this will fail if all you do it make it look good. It has to do so much more, from setting it up right to testing it. The results on this project speak for themselves.

Faster

One of the issues we fixed was how long it was taking users to get going with the system. We introduced a large Quick Start button that takes users to a screen with limited functionality. We reduced the time to complete this task from 30 seconds – 2 minutes down to 3 – 10 seconds. That is a +90% improvement.

Beginning & End Speed Tests
Beginning & End Speed Tests

Debuting Live

About half way through the process we were asked to push the design and UX simulation to an iPad that was hooked to a mock range for a tradeshow booth. Over the next couple of weeks we took a side path and worked with their engineers to get everything up and running. We attended the show and the client debuted the new user interface at the industry’s largest convention—attended by 64,000 people from the more than 100 countries2.

Would you like to see the literal, physical description of going over and above for our clients?

Mock range in a tradeshow booth
Mock range in a tradeshow booth

UX Tests Show Friction

The interface allows users to run a time drill on a turning target. We provided two ways for users to set up a drill—by inputing each value or doing a guided setup. In our first retest half the users missed the Setup button.

When we encouraged them to try the setup button after they finished their test and the response was overwhelmingly positive. We took this feedback and reworked the Time Drill to start with a popup suggesting users use the setup process. This retested favorably and we moved forward with it.

Even though the setup takes the user through 6 screens instead of just one, we saw a rapid increase in time to completion and general enjoyment. This is a good application of the Hick-Hyman Law: increasing the number of choices will increase decision time3. By presenting only one option on each screen the user is able to rapidly and successfully make choices and move through the task.

From The state of UX in 2015 / 2016“People want to do one thing at a time, and they want to be guided through the flow as opposed to being prompted with multiple decision points at every step.”

Original Time Drill page with Setup Button
Original Time Drill page with Setup Button
Time Drill with Automatic Popup to use Setup
Time Drill with Automatic Popup to use Setup

Slippy UX4

In this user interface we want to make everything easy to understand at a glance. In effect, we want the user interface to slip into the background—it does what you need it to but doesn’t demand your attention otherwise. Going back to what I mentioned with the microwave scenario—you don’t want to be frustrated with any user interface, but especially one that you are operating while holding a loaded weapon.

We made sure the new user interface always clearly communicated to the user what was going on with the target, something that was missing from the original version.

Screen provides feedback
Screen provides feedback


Client Feedback

When all is said and done it’s important to not only launch something that completes the goals of the project—but to also have a happy client.

We interviewed our client at the close of the project and this is what they had to say:

sawaya-tinyicon We did a larger user experience (UX) process with this, interviewing stakeholders, doing some benchmark videos and then some follow ups—what about that process did you enjoy?

I loved bringing new ideas to a table, challenging existing status quos and ultimately allowing the end user to decide what they wanted and what worked for them.

It wasn’t about what we wanted, it was about what worked, and what didn’t.  We came out with a very user-friendly interface that was easy for a new shooter to use, but content-rich enough to keep a seasoned shooter coming back.

sawaya-tinyicon Was there anything that surprised you about this project?

There were a few things we thought would be easy to pick up and understand, but during UX testing we found users struggled with them.  By taking the time to do a UX test process we were able to weed out those issues an provide a solid solution.

sawaya-tinyicon We did a lot of work before we ever got to design and a lot of work after—so while this appeared to be a design project, it was actually more of a UX project — how was that helpful to the end result?

One of the biggest benefits that came from this process was a better understanding of what a shooter wanted.  By watching people use the retrievers and by asking what they wanted, we were able to gear the retrievers to meet their needs instead of just redesigning what we already had.

 

***

We want to thank our amazing clients at Action Target for choosing us on this project and for working so closely with us on it. This type of project works best when the client brings their product and industry expertise and we bring our UX and design expertise and we work through things together.


Your Next UI / UX Project

We’re so excited for the opportunity to expand our business beyond websites and mobile apps into user interfaces. We welcome any project where we can help users better interact with the world around them.

What makes us good at UX—besides the research, process and data—it’s that we’re deeply empathetic, impatient, and want everything around us work better. We have high expectations of how the world should work, and are pleased to be able to create projects that matter. We bring our passion and commitment to every project we take on. Learn more about us, see our portfolio, or contact us.

Is your user interface working for your users?

Let us help you find out. From user research to prototype testing we can help improve your user experience.

(801) 931-6554


Project Credits

Special thanks to everyone that worked on the project.

  • Amber Sawaya, Sawaya Consulting
  • Steve Sawaya, Sawaya Consulting
  • Kira Griffin, Sawaya Consulting
  • Jesse Nelson, Action Target
  • Kevin Tomaszewski, Action Target
  • Tim Hakala, Action Target
  • Emily Flinders, Action Target
  • Jason Jewkes, Action Target
  • Philip Smith, ManCom
  • Peter Jennings, ManCom

Special Thanks

We want to call out a special thanks to Amber’s dad, Dean Smith. He was integral to the project from hauling us to the desert for an overview of firearms types and safety, to visiting several ranges with us, to lending us guns and even coming on as a UI tester. We appreciate the time and effort he put into the project.

Sources

  1. How to Cook Thanksgiving Dinner in Your Microwave. (n.d.). Retrieved from http://gizmodo.com/how-to-cook-thanksgiving-dinner-in-your-microwave-1660355134#
  2. 2015 SHOT Show Posts Second Highest Attendance Total Ever. (n.d.). Retrieved from http://www.shotshowblog.com/2015-shot-show-posts-second-highest-attendance-total-ever/
  3. How to Improve Retention With Design: 3 UX Laws to Retain Users—Medium. (n.d.). Retrieved from https://medium.com/@framedio/how-to-improve-retention-with-design-3-ux-laws-to-retain-users-cd92efb8ffed
  4. [Slippy / Sticky UX] The Top UX Predictions for 2015 | UX Magazine. (n.d.). Retrieved from http://uxmag.com/articles/the-top-ux-predictions-for-2015



Back to Case Study Overview