Blueline Application Home Screen

BlueLine

BlueLine transforms the standard public safety radio into a radio application for a touchscreen Android device. This application was designed as a tool for police supervisors. BlueLine allows supervisors more control over their radio, giving them the option to playback radio transmissions, change channels, view channel information, change zones, create scan lists, edit radio scan lists as well as send and receive emergency alerts.

Goal

Transform a standard police radio into a touchscreen application

Role

User experience designer, user interface designer

Team

This was an individual project

Goal

Transform a standard police radio into a touchscreen application


Role

User experience designer, user interface designer


Team

This was an individual project


Sketched Concept Map

Process

To create this application, I first conducted primary and secondary research. This provided me with insight on what features would benefit police supervisors. After gathering information about public safety radios, I began to brainstorm ideas for how the application should function. I started this process by creating a concept map, writing down the features I planned to include in the application and then grouping them together. With a better understanding of the related features, I began to contemplate how different tasks would be accomplished within the application. Creating task flows assisted me in this process. While creating task flows helped me decide how singular tasks should be completed, building a sitemap allowed me to view the application as a whole and make sure nothing was missing. With a clear idea in mind, I began sketching wireframes with pen and paper. When I was comfortable with my sketches, I began digitizing them with Sketch and then annotating them with PowerPoint. After my wireframes were complete, I began designing the application in Sketch. The final step in my process was creating a prototype with InVision.

Annotated Wireframes With Notes

Research

Having never utilized a public safety radio myself, I began my process by researching how a radio works. I started my research online, reading articles and learning about different radios. I quickly learned, while seemingly simple, a radio is an essential part of an emergency responder’s work. While reading information online helped me understand the functionality of a radio, I felt I was still missing key information. I decided to talk to some of the people who use a radio every day. After preparing some questions, I interviewed a police officer and former EMT. Discussing how they use a radio made me realize it would be a challenge to replace physical buttons with a touchscreen device. Reading information online gave me insight on difficulties such as using a touchscreen with gloves or substances covering your hands. Talking with a police officer taught me the importance of being able to quickly silence a device and discreetly send out an alert if backup is needed. While a police supervisor is not always in the field, he or she may be in situations when they would need to utilize these features. This information gave me clarity on how the device should work.

Notes Taken During Interviews

Concept Map

Creating a concept map allowed me to begin writing down features of the device. Viewing all my ideas on paper helped me group together features and remove ones that over complicated the device. Grouping the different features assisted me in visualizing how the application should be structured.

Printed Digital Concept Map

Task Flows

With an idea of the application’s structure in mind, I began to analyze how different tasks might be accomplished. I wanted to make sure nothing was complicated to access, allowing police supervisors to quickly accomplish their goals and continue with their work.

Sketch of a Task Flow for the Application
Digital Version of a Task Flow For the Application

Sitemap

Creating a sitemap solidified my plan and allowed me to view the structure of the application as a whole. This helped me ensure nothing was left out of the application.

Sketched Version of the Application's Sitemap
Digital Version of the Application's Site Map

Sketches

Sketching ideas, I was able to quickly generate multiple concepts detailing potential layouts for the application’s pages. Creating quick sketches with pen and paper was an effective way to view ideas and rule out things that only made sense in my head.

Sketched wireframes of the Application
Sketched Wireframes of the Application

Wireframes

From my sketches, I chose which wireframes would be most effective and began recreating them in Sketch. Because the application would be used on an Android device, I followed material design principles when creating the application’s pages. When the wireframes were complete I annotated them in PowerPoint. Annotating allowed me to think through the functionality of each element and explain how they would interact with users.

BlueLine Digital Wireframe of the Application's Home Screen
BlueLine Digital Wireframe of the Radio Details Page
BlueLine Digital Wireframe of the Scan Details Page
BlueLine Digital Wireframe of the Playback Page
BlueLine Digital Wireframe of the Scan Lists Page
BlueLine Digital Wireframe of the Edit scan Lists Page

Design

With finalized digital wireframes I began to explore color. Working with an online color contrast checker I made sure all the content would be easy to read and understand. Considering the importance of quickly accessing information from the device, I created a color pallet for both nighttime and daytime. Deciding on suitable color palettes, I began to add color to the application. While the application is simplistic in design, I adjusted my wireframes and icons to be more aesthetically appealing.

BlueLine Design of the Application's Home Page
BlueLine Design of the Application's Radio Details Page
BlueLine Design of the Scan Details Page
BlueLine Design of the Scan Collapsed Page
BlueLine Design of the Playback Page
BlueLine Design of the Menu
BlueLine Design of the View Scan Lists Page
BlueLine Design of the Create New Scan List Page
BlueLine Design of the Add Channels to Scan List Page

Prototype

The final step in my process was creating a prototype using InVision. Prototyping the application allowed me to ensure the application was complete and could function properly.


View Additional Projects

Blueline Project Icon

View Project

Blueline transforms the standard public safety radio into a radio application for police supervisors.

Sunnyside Reporting Project icon

View Project

Sunnyside Reporting is an online dashboard and reporting tool for nursing home administrators.

Civen Project Icon

View Project

Civen assists emergency responders and civilians in flood situations.

Coral Restoration Project Icon

View Project

Learn about the impact of climate change on corals and coral restoration.

On A High Note Project Icon

View Project

On a High Note is an interactive experience merging music, neuroscience and technology.

Feed the Fish Game Icon

View Project

Feed the Fish is an online game created with JavaScript.

U Compute Project Icon

View Project

UCompute provides users with easily accessible tutorials and resources.

Park Pass Project Icon

View Project

Park Pass simplifies the process of purchasing tickets for amusement parks online.

Weather Forecast Project Icon

View Project

The Homework Forecast assists users deciding when they should complete their homework.

 

Blueline Project Icon

View Project

Blueline transforms the standard public safety radio into a radio application for police supervisors.

Sunnyside Reporting Project icon

View Project

Sunnyside Reporting is an online dashboard and reporting tool for nursing home administrators.

Civen Project Icon

View Project

Civen assists emergency responders and civilians in flood situations.

Coral Restoration Project Icon

View Project

Learn about the impact of climate change on corals and coral restoration.

On A High Note Project Icon

View Project

On a High Note is an interactive experience merging music, neuroscience and technology.

Feed the Fish Game Icon

View Project

Feed the Fish is an online game created with JavaScript.

U Compute Project Icon

View Project

UCompute provides users with easily accessible tutorials and resources related to coding, data and computer science.

Park Pass Project Icon

View Project

Park Pass simplifies the process of purchasing tickets for amusement parks online.

Weather Forecast Project Icon

View Project

The Homework Forecast assists users deciding when they should complete their homework.

 

Blueline

BlueLine transforms the standard public safety radio into a radio application for a touchscreen Android device. This application was created as a tool for police supervisors.

 

Sunnyside Reporting

Sunnyside Reporting is an online dashboard and reporting tool for nursing home administrators.

 

Civen

Civen is a mobile application created to assist emergency responders and civilians in a flood situation. hrough the application civilians can quickly report non-emergency situations

 

Coral Restoration

This is a project created for the University of Miami Rosenstiel School of Marine and Atmospheric Science. The purpose of this project was to create an interactive website sharing information about the impact of climate change on corals and coral restoration.

 

On a High Note

On a High Note is an interactive experience that would take place at the Frost Science Museum. Merging music, neuroscience and technology, the experience explains how the brain perceives music.

 

Feed The Fish

Feed the Fish is an online game created with JavaScript.

 

UCompute provides users with easily accessible tutorials and resources related to coding, data and computer science.

 

Park Pass is a mobile application created to simplify the process of purchasing tickets for amusement parks online.

 

Homework Forecast

The Homework Forecast assists users deciding when they should complete their homework.