Motorola Innovation Design Group
My Role - In-House, Lead Interaction Designer
Core Team - Lead IxD, Lead Visual Designer
Output - UX Strategy, UI Design, Prototypes, Production Front End,  Development Quality Assurance  


The Problem

The police and fire departments of today have been empowered significantly by advances in technology. Software and hardware innovations have enabled them to respond quicker to incidents and help save more lives. 

However, a major problem with software in the public safety sector is usability. The same standards used in desktop web apps do not carry over into app’s meant to be used in vehicles or on foot. On the flip side, modern UX standards exemplified by consumer apps have not found their way into Public Safety solutions. Another major issue facing this type of software is interoperability. There have been few advances in standardizing API’s between different types of communication, location, collaboration and documentation solutions. 

 

The Solution

Now enter Motorola Solutions, who specializes in creating streamlined applications with a focus on the user and their unique needs. Over the course of an intensive design and development program, Motorola Solutions would aim to solve these two problems with a collaborative map application.

Design Brief:

  • Show the location of human and physical assets on a map (Esri maps)
  • Filter large amounts of location data quickly and easily
  • Track, share and collaborate with fellow users
  • Replay incidents to see minute to minute developments
  • Pivot between high level map information and low level details fluidly
  • Consolidate quick-actions from disparate applications such as "Call Radio", "Get Directions" and "Contact Info"
  • Adhere to Motorola Solutions' visual design for accessibility standards (i.e. high contrast colors etc)
 
 

Agile Product Development

As the project was kicked off,  time constraints quickly limited the amount of background research and experimentation the design team was allowed. This resulted in an overlap of the engineering and design teams' schedules, so as a solution, it was agreed that both teams would adopt an agile development model. Together, the team would build an MVP quickly and get customer feedback as opposed to a drawn out waterfall process.

To kick things off, the interaction design team undertook a common Agile UX activity in which users’ goals, activities and subtasks where outlined in a storyboard fashion. The team then established the scope of the MVP by "lassoing" only the most important goals, activities and subtasks.

In true agile form, the design and development of features were chunked into sprints. Adopting agile produced a workable product quicker and made small design changes easier to manage down the line.

After just a few weeks of design and development we had a working prototype. The product manager took this MVP on the road and showed it off to various public safety departments for feedback. Customer requests were worked back into the development cycle and prioritized against pole star features identified by the UX and Product teams. 

 

The Devil Is In The (UX) Details

A major issue facing the design of the product was effectively managing information overload. The map associated with the product could be quickly filled with massive amounts of location icons. Users needed an easy way of establishing views, or groups of layers similar to how Photoshop handles layer comps.  The designers solved this issue by building in the “Views” tab which manipulated the entire UI in a top down manner.

Secondly, tablet applications often fall prey to the same issues with screen-area focus as desktop applications. In IDP the designers recognized this problem when pivoting between on map interactions and content in the sidebar. Using bounce effects on icon fly-outs, emphasizing and shrinking active and non active elements, the user’s eye is drawn to what is most important at that given time.

In addition to creating a compelling user interface, Motorola visual designers took on the daunting task of standardizing icons for various types of human and physical assets. These icons needed to follow Motorola’s design standards for accessibility and must “pop” on both light and dark interfaces.

Using a combination of InVision, Flinto and AfterEffects prototypes, the team isolated and tested key interactions through informal usability studies with fellow teammates and extended members of the team.

 

Front-End Developers Bat For The Design Team

Rather than handing off specs and mockups to the development team for this project, the Design team hired a front-end contractor so that the fidelity of the markup was lock step with design. This opened up the predominantly back-end focused Motorola engineering team to focus on enabling new requests coming from customer trials.

 

The Results

In the end, IDP made a huge splash among prospective Police, Ambulance and Fire customers. Demos wowed even seasoned veterans of the force. Many of these officers had experienced first hand what it was like to not know where key physical and human assets were during high-pressure situations.

Eventually requests to build out a handheld experience reached critical mass and a new version was designed and implemented by simply adding responsive code to the CSS. Beyond a scaled version for handhelds, IDP was then recognized by various other business units within Motorola as an ideal candidate for expansion. Pending a heavy UX strategy initiative, other Motorola products could be conceivably “bolted on” to IDP’s UI framework.