Designing delightful and powerful supply chain management software

UX Designer - 2018 to 2019

Web Client Demo

Kinaxis was moving from a native java client to a mobile browser based client. They used demos to help with their onboarding process of new features for their supply chain management product RapidResponse. It also helped to promote their product to new users. To increase usage, I was tasked with starting the process to get the new mobile client up to date with some of the demo material, so that it could be used instead of the native client.

Strategy

The first thing I needed to do was review and document the current demo flow. I went through each step of the demo, and created a story around it with various existing personas, user goals, and screenshots of each step. I then attempted to recreate the flow with the new mobile client, and took note of each feature and artifact that was missing. After creating a detailed list of all missing components, I looked for areas of opportunity and growth to improve the mobile client. There were advantages of using the mobile client over the native client, and this was a perfect opportunity to showcase that.

Process

There were many missing features, but one of the key features we were lacking was cell editing and saving. We were missing the capability to edit strings and numeric values in cells and ranges, as well as inserting new records. We also couldn’t save those data changes once made. I initially looked at what we currently had in the native application, and what we could do to improve upon that experience. I saw an opportunity to improve our saving paradigm; in the native app, users could only save before changes were made to a specific scenario, which acted like a save file.

Taking this information, I attempted to change the save paradigm to one that users were more familiar with - save and save as a new file after changes are made. Our user base is very familiar with Microsoft Excel, and other spreadsheet applications. They most likely were more familiar with the typical file ‘save/save as’. As such, I attempted to design a new flow that would combine our scenario save with the ‘save/save as’ method. When users saved, they would update and commit their current scenario. If they wanted to save to a new scenario, they could select ‘save as’ and create a new scenario after making data changes.

A second feature that was missing was a treemap visualization. Our native application had treemaps, but users found them confusing and difficult to use. Our demo team had to consistently explain what they were, and how to use them. Treemaps are a data visualization tool where users can explore hierarchical information along two measures; one for size, the other for colour along a scale. User difficulty indicated that this was an opportunity to improve the experience. Using our new visualization UI, we created the framework for treemaps in the mobile client. I then looked at what treemap feature is standard across other business intelligence tools that we were lacking. Our native app users couldn’t fully explore a data hierarchy in full, unless the treemap was specifically adjusted and created for that purpose. As such, we included a way for users to step up and down the hierarchy tree within the treemap. I needed to create two actions that were similar but distinct - stepping up/down a hierarchy, and drilling to a new resource from the treemap. Since this was a web application, it needed to support desktop as well as touch devices. After multiple iterations, we created a tooltip and drill list hybrid for a single tap, and stepping down the hierarchy on a second tap.

Reflection

For cell editing, the permissions and errors we needed to design for were varied and complex. We were able to get development involved in creating a list of all potential situations a user might be in, and prepared for each case. During tests, there was a very shallow learning curve for users to understand how to use the new paradigm. While they were used to our old save method, they quickly were able to identify what save and save as did as actions.

Users immediately found the treemap visualization more intuitive. They could easily explore product hierarchies, and understood what the visualization was showing them. However, we discovered that a consistent sticking point was the general visualization UI we had for all of our mobile charts. It wasn’t as intuitive and understandable as we initially believed. The treemap was a great test of this UI, and helped to identify areas of improvement in our design.