Design brief
For this project I was working on redesigning a product that my company offers that lets telecommunications companies fulfill the orders they receive for digital products and services like cable TV and cell phone service. The order fulfillment process is largely automatic, but in any complex series of events, sometimes a little hitch is encountered and needs to be investigated. This product let the order fulfillment team see which orders are having trouble and take steps to resolve them.
The product team wanted to do a full UX revamp of the user interface for the product and I was assigned as the lead designer.
Timeline
Process
The first thing I did was learn about how the product works and who the main personas would be. I interviewed the product owner as well as the lead engineers and representatives from customer success who had worked with customers on setting up their environments.
As I learned, I made the following diagrams that I could use to verify that what I was understanding was correct. These diagrams were also helpful for quickly explaining the project & product to my other team members who weren't working on this with me.
As I learned about the user and what the user needed to do, in comparing it to what I saw in the existing interface, there was absolutely no correlation between how the interface presented the information and what actually needed to be done with it. That's because the interface was borrowed from a general-purpose database management solution that simply presented records and a way to search for records and let the user figure the rest out.
Solution
I now had enough information to create a simple step-by-step process for the user to follow.
First, find the orders experiencing the same issue and gather them up.
The user can see clusters of orders with similar issues using the charts and graphs in the dashboard and narrow down to find them using the search functionality. The "issues" are usually a piece of software failing to run, which can be resolved by asking it to run again. When the user clicks the checkmark next to an order, it's sent to the Bulk Orders screen where the user will be able to take one action to resolve several orders at once.
Then, be able to see the details relating to these orders in one place.
On this screen the user sees on the left the orders that they selected to work on, and on the right information about what these orders have in common. Then, the user can click "Take an action" to select which action they would like to take on this group of orders.
Finally, be able to take a single action to resolve all of the orders at the same time.
In additon to plotting out about 2 dozen individual modal screens, I made the following diagram to organize my understanding of what the possible actions were.
Newly designed visualizations for understanding an issue
I worked with the visual designer assigned to the project to invent brand new visualizations to present information about each order for the user to be able to diagnose and resolve issues.
Outcome
While this project was never built for reasons outside my control, I did introduce this team to the importance and value of user-centered design as well as the process.