Radio UI

Touch screen interface for radio used by public safety supervisors and government knowledge workers

Radio Home Screen
Radio UI


The Ask

Design a walkie-talkie app for public safety administrators and government knowledge workers.

Project Description

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.

At a Glance

Radio UI


The goal was to create an app that is efficient and simple to use.

Simple Navigation

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.

Material Design

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.

Radio Home Screen

Packed with Functionality

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.

Fully Documented

Each wireframe is fully annotated to explain the interactions on the page. All functions were thought out and developed.

Radio Home Screen
Radio UI


1. Requirements

Understanding the Needs of the User

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.

Concept Map Sketches
Concept Map

2. Planning

Creating the Design Docs

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.

Task Flow

Once the functions were organized, I created a site map to help figure out the page hierarchy.

App Map

3. Sketching

Initial Ideas

It was important to start drawing out the ideas on paper to sort through the good and bad concepts.


4. Wireframes

Designing the App

The wireframing process involved several rounds of reworking the design to make sure it was as efficient as possible.

Wireframes V1

The first round of wireframes in Sketch.

Wireframes V2

The second round of wireframes in Sketch.

Editing Wireframes

The third round of wireframes had a different navigation structure based on the issues with the first two rounds.

Wireframes V3

The third round of wireframes in Sketch.

Wireframes V4

The fourth round of wireframes in Sketch.

Wireframes V5

The final round of wireframes in Sketch.

The final wireframes were annotated to document the interactions.

Annotated Home Screen
Annotated Home Screen with Scan On
Annotated Scan Lists
Annotated Edit Scan Lists

5. Prototyping

Designing Interactions

The prototype was created in Axure to illustrate how the pages are related to each other and demonstrate the interactions on different pages.

Radio UI


These are the final screens developed for the project.

Radio UI


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