PROJECT
Common Toolbar Design
Creating a more consistent user experience across multiple applications
My role: Project Lead & UX Designer/User Researcher
My contribution: I led the creation of Intermec's first visual design language for a more consistent look and feel across a group of applications that are often used in conjunction with one another.
​
Introduction:
The initial ask was to update three individual Windows Mobile applications: Terminal Emulator, HTML5 Browser, and Launcher. So I began by interviewing the Product Marketing and Engineering Leads to learn how these applications were being used. They clarified how users would switch between the three applications during the course of their work. Once I learned that, I pushed for a more consistent user experience across all three applications. This would allow users to leverage a common layout and interaction design across the applications to increase their efficiency. Overall, this project went very well and was well received.
Preliminary Wireframes
First, I captured screens from the working applications and created wireframes of the current workflows. This allowed me to better understand how the applications currently worked, and to map out which interactions were consistent across the applications and which weren't. The lack of consistency between the different applications was very evident as you can see here in the wireframes.
First Draft Wireframes
Next I took those preliminary wireframes and began iterating on the workflows to drive for a more consistent and simpler user experience. We also iterated on the visual design at the same time, and began incorporating those changes into the wireframes. We had internal users that I used to review design changes with and to periodically collect user feedback.
​
Layout & Visual Design
It took multiple iterations to sort out a layout that worked across all three applications. We also had to define different grid layouts for different resolutions and screen sizes.
​
Black was chosen as our theme due to its neutrality. We went through a number of icon design iterations to develop a consistent design that worked across all three applications.
Final Wireframes
After working through the workflows, layout, and visual design, I created the final wireframes that I used to communicate the design to Engineering and Product Marketing, along with some basic redlines to show proper spacing and button sizes.
​
Results
The end results were very ground breaking for Intermec and provided a more consistent user experience for their customers. I wrote separate User Interface Specifications for each of the three redesigned software applications. I also wrote a basic Design Language Document to communicate the overall Common Toolbar Design so that it could be leveraged in the future.
