RANGE UI + UX PROCESS
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.
- 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
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.
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.
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.
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 (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.
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.
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.
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.
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.
A set of wireframes are created so you can account for all elements on a page and work through conceptual issues.
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:
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.
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.
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.
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.”
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.
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:
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.
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.
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.
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
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.
- How to Cook Thanksgiving Dinner in Your Microwave. (n.d.). Retrieved from http://gizmodo.com/how-to-cook-thanksgiving-dinner-in-your-microwave-1660355134#
- 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/
- 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
- [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