From 6 Hours To Ten Minutes
Redesigning a complex interaction to dramatically decrease time on task
Interaction Design, Information Architecture, Process Diagrams, Wireframing.
Old Design One of the screens I had to redesign. The old design was tedious, time consuming, and difficult to understand. It took users a working day to use this screen and finish their task.
The data analytics team must build detailed charts on safety, sales, and security metrics. These charts aid managers and executives in making decisions regarding global safety.
- In the previous design, chart building involved tedious manual editing of over 600 data points.
- Users in the analytics team were wasting enormous amounts of time with the chart-building tool and were desperate for help in reducing their workload
- I was tasked with redesigning the entire application to address these concerns (though this case study will focus on one interaction within the larger app)
- Research users to find pain points and focus redesign efforts
- Provide some immediate value to a highly frustrated group of users
- Reduce time on task through workflow redesign and interaction design best practice
- Verify design direction with usability testing
- Create detailed design specifications and oversee implementation
Re-design With a more streamlined worflow, easier to understand visuals, and simpler interactions, the new design let's the users complete the task in minutes instead of hours.
Finding where to focus
I began with an extensive push to learn about current users and their workflows. The users of this product were particularly frustrated with it, and I focused my efforts on building empathy and understanding where the biggest pain points were.
Through many interviews and sessions of contextual inquiry I was able to find two key directions in which to take the redesign that would result in the most value for lowest cost in resources.
- The original workflow was tedious and required the users to keep track of the configurations outside of the tool.
- Important relevant information was not placed in proximity, but instead spread across multiple screens, meaning the users had to engage in unnecessary interaction to find data they needed to edit.
- Finally, there was no easy way to make mass edits. Each feature had to be handled individually, which was very tedious and time consuming. I was able to recognize patterns in the way users linked different features and redesign to one edit for multiple features.
Mapping Interaction Issues
- The mapping process itself was tedious and counter-intuitive. It required the users to create additional instances of each feature before it allowed them to link them. This caused a lot of confusion and meant the users had to be aware of how one change affected data on other screens.
- There was no easy way to glance at the mappings and understand how it was configured
Old Worflow The old workflow had too many manual steps and required the users to keep track of configurations outside of the tool
Eliminating unnecessary steps
In the previous design the mapping workflow was splintered across several different pages. To complete the task, the user would often have to jump back and forth between these pages and remember what they had done on screens they could no longer see.
I was able to create a mapping interaction closer to the user mental model that condensed this interaction down to one page and allowed the users to directly see everything at once without becoming overwhelmed.
(click to enlarge images)
Mode switching takes the users workflow and makes it into a sequence that allows the users to quickly change the mode to see additional information without changing the primary context.
Build Mode (left): This screen helps the user set up the basic structure
Mapping Mode (middle): The user defines the relationships
Pricing Mode (right): The user adjusts and defines how the system calculates the prices
Patterns and Automation
Through my research (Workflow evaluation), I found quite a few places where the actions of the user was predictable with a very high degree of confidence. For instance, certain data sets were mapped identically every time but still required a lengthy and tedious mappings to establish relationships. Even when they were not identical, there were patterns in the way mapping was done that would prove to be the intended workflow a vast majority of the time users did the task.
As a result, I designed the mapping page to automatically create links for identical data sets, and to follow the common patterns associated with mapping. The result would then be displayed to the user for them to confirm, rather than requiring them to create the same mappings over and over. This change alone drastically reduced the amount of time required for mapping tasks
(Click to Enlarge)The new build controls automate the most common actions. Instead of manually defining every single realtionship, the user can select one of these pre-defined controls to automatically set the mapping. On top of that, the new designs make it easier to visually see the mappings at a glance.
1-1 (left): About 80% of the mappings are 1-1, the new design makes it completely automatic.
Combined (middle): A setting used when 2 historic data sets are merged to form a new one.
Split (right): This is used when a historic data is split into multiple new ones.
By Reducing the number of steps, and automating the major mappings, the users can now focus on the really complex mappings. The combined effect drastically reduces task on time, and improves overall accuracy (less chance for error).
Re-designed Workflow The new workflow is simpler and reduces the overall number of steps the user has to take
Not every mapping could be automated and the manual process was still slow and tedious. For example, creating a one-to-many mapping meant making separate “instances” of the feature had to be created. This made it tedious and difficult to understand.
Old Design The old interaction needed too many steps, and the user had to understand "virtual mapping"
I fixed this in the new design by creating an interaction for one-to-many links that was visualized more like the mental model of the users. Instead of multiple instances of the one, in one-to-many, instead they could draw multiple lines from a single one to each of the links.
The Re-design An easier way to map 1-many mappings