Design a walkie-talkie app for public safety administrators and government knowledge workers.
In just the last 10 years we have seen cell phones evolve from a brick-like device with a small screen and number buttons to slick touch-screen devices. Yet, radios have generally maintained the same look in that time. The goal of this project was to bring radios used by public safety supervisors and government workers into the 21st century.
While developing a touchscreen UI for a radio, it was important to keep users mental models in mind, but find ways to update this legacy technology. Radios are mission critical for police, firefighters, and many other government entities, so the UI needed to be simple and straight-forward. For example, it was important to keep in mind that this user group doesn't have time to go through five screens to perform a simple task.
The process began with concept maps and user flows to understand how the product needed to work. Sketches of different ideas were produced to get as many ideas on paper as possible. Then annotated wireframes were developed to lay out pages and explain the behaviors across all screens.
Aug - Oct 2016
The goal was to create an app that is efficient and simple to use.
The user is never more than 2 clicks away from the home screen. The main functions are found under tabs on the home screen. This eliminated the need for a menu.
The application was designed following material design guidelines. This created a cohesive design that is easy to follow. Icons are used to reduce the amount of text needed.
The app has all of the primary functions that public safety supervisors would need to do their job and a lot more. Includes scan features, personal messaging, contact lists, and so on.
Each wireframe is fully annotated to explain the interactions on the page. All functions were thought out and developed.
Designing this application came with many challenges because radios are very technical and government workers have a long history of using them. It was important to make sure the functions were well thought out and organized. I created a concept map that broke down the major functions and displays based on page types.
After the initial planning and understanding of the functions were complete, I created task flows to figure out how a user would move through the application.
Once the functions were organized, I created a site map to help figure out the page hierarchy.
It was important to start drawing out the ideas on paper to sort through the good and bad concepts.
The wireframing process involved several rounds of reworking the design to make sure it was as efficient as possible.
These are the final screens developed for the project.
Shared styles in sketch can greatly increase refactoring speed
Concept maps are a great tool for breaking down a complicated problem into its part and making it more manageable