Summary

I provided a design refresh for the Fulcrum CATS Mobility app by reconciling the app's UI with modern Android design guidelines and by optimizing the app's interaction models and patterns.

Side by side comparison of the main menu before and after the visual refresh.

Problem

Our client, Seattle-based Fulcrum Technologies, had an application that companies used to track inventory. The app had been ported to Android based off of an existing design for an older, non-touch Windows Mobile device. As such, the app was not optimized for touch nor aligned with Android design guidelines. On top of that, the app looked very dated. I was tasked with providing a visual design refresh, while at the same time providing interaction improvements when possible (i.e., when the development allowed for changes).

Process

The project began with an initial discovery phase, where I reviewed the app's current style guide and analyzed the app's existing functionality, identifying interaction difficulties. I also studied the official Android design guidelines (Android 4.0+) and identified the app's misalignments with those guidelines.

Based on my findings, I redesigned the interactions of several screens to optimize the flow between similar tasks. For example, the app had three screens with the same exact list, but with each screen for a different action on that list; I optimized this interaction by combining the screens and letting the user choose the action in the context of the list rather than having to back out and switch lists.

Side by side comparison of the separate lists united into a single screen.

Beyond the interaction, I worked with another designer to develop an updated visual design that combined Fulcrum's own branding with the standard Android patterns.

Results

Ultimately, I produced visual designs, as well as a detailed specification document that described both the visual elements and functionality of individual screens.

A sample page from the design documentation showing specifications for font and button deviations from standard Android 4.0 design.A sample page from the design documentation showing the behavior of the main menu.

In addition, I created several graphical assets for use at different screen resolutions, which required my own investigation into the ways that Android handles screen density.

The refreshed application design was dramatically better than the existing implementation, using standard patterns and reflecting Fulcrum's branding.

While the design aspect of the project was familiar to me, creating a detailed document of the behavior was relatively new, so the experience I gained on this project was invaluable.