The Data: ZBC Designer is all about forklift batteries and battery chargers. This platform pulls in hundreds of data points about the efficiency and value of various battery/charger combos. It then graphs the performance of those combos based on user-entered scenarios.
The Users: Forklift battery salesmen and their customers
The Design Challenge: Making sense of too many use cases. Forklift battery salesmen were using the platform in many different ways, for many different reasons. Attempting to meet ALL their needs, the client had added tons of new features ad-hoc over the years, resulting in a bloated and confusing platform that nobody wanted to use.
I collaborated on this project with Katie Falkenberg of Good, Good Work.
Research Phase: Clarifying the user's natural workflow
We conducted extensive user interviews to collect pain points, impact points, and to understand the vast array of scenarios the salesmen are working within. We created the User journey diagram below to clarify the steps that most salesmen take before, during, and after using the software. We significantly changed the organization of the software based on these insights in order to better accommodate the salesmens’ natural workflow.
Research Phase: Uncovering other user pain points
The image below is an excerpt from a research deliverable detailing additional ways to improve usability.
Design Phase: Wireframes
The images below show high-fidelity wireframes of a data visualization page that allows users to choose different battery types and compare their efficiency and performance.
Design Phase: Wireframes
The images below show high-fidelity wireframes of the project dashboard page, along with details from a 4-step "wizard" data entry modal that allows users to set up new projects.
Creating designs that work means understanding the data in every field and every drop-down menu. I often create detail illustrations like the ones shown below to illustrate specific dependencies in data entry - how the user's selection in one field will affect the options available in subsequent fields.
Visual Designs: Library of Projects
After working out all the details in black-and-white wireframes, I move on the "skinning" the wireframes. This involves pulling out key screens and adding graphic finesse, colors, typography, and pixel-perfect consideration of every element.
Visual Designs: Project Dashboard
Visual Designs: Data entry modal
This is an excerpt from the 4-step "wizard" data entry modal shown in black and white wireframe version above.
Visual Designs: Battery Comparison Data Visualization Page
Visual Designs: Battery Spec Editor
Often near the end of a project I'll create style guides and spec documents that define a consistent visual language. This helps your developers apply well-defined visual rules across a wide variety of screens and interactions.