Introduction
Canvas is a Graphical User Interface (GUI) used by Verizon for its internal system, Converge Front End Engine (CoFEE) Engineering. Among its many applications was Bonita, which was an open-source business process management (BPM) and low-code development platform. The goal was to migrate Bonita over to another BPM and low-code platform known as Red Hat Process Automation Manager (RHPAM) in which I lead the design.
Network Ordering Human Tasks is an application for creating orders and jobs for Verizon's field engineers. Add Taskset is a part of this application and serves to add any additional tasks as well as keep track of tasks for Verizon's field engineers.
Design Objective
Design a seamless user experience (UX) for all RHPAM project screens so that each one, which was previously put together without any adherence to Design Principles, acts as one unified application as opposed to a collection of individual screens.
The UX Design Process for Verizon
The flowchart for the original version before I did anything.
Empathize
As this was a Business-to-Business (B2B) application, the users were all Verizon employees, specifically engineers. As such, these users were looking for an easy way to view massive amounts of data. On top of that, the original screens lacked many of the basic Design Principles such as consistency, hierarchy, accessibility, etc.
User Interviews were conducted (which included business owners, application owners, and developers as well), with an emphasis on finding Qualitative answers (as opposed to Quantitative answers), meaning that questions were phrased in such a way to determine why certain changes were needed as opposed to what certain changes were needed. Personally, I like to use the Five Whys method in order to determine the root cause problem as well as invoke thoughtful and open ended answers.
Define
After the research for the project has concluded, I begin problem solving for the issues presented. During this phase, I don't begin designing necessarily, but it is the aftermath of gathering notes in which I come up with countermeasures for the answers from the Five Whys method. Note that in many cases, countermeasures may be similar to each other. As a result of this step, I can determine what exactly the problems and pain points are that I am trying to solve and how to solve them. Whether it be developer created screens needing migration or new screens that match the needs of each user (such as eliminating scrolling, providing organized groups of inputs, etc), it is important to know what the situation calls for.
Ideate
Next, I start planning the design(s) for the sites and screens in accordance to each type of employee. I take their issues and pain points to ensure that they can be happy with the design that I come up with. This is where the fun begins, and it requires the most thinking! For this project, I decided to keep consistency among the various screens by utilizing the "Submit" button as well as showing all the inputs at once. This would reduce the need for surprising the user with asking for more inputs. Additionally, I utilized many Design Principles such as eliminating unnecessary white space, including accessibility features (text next to toggles for color blind users), establishing a hierarchy (which can better be seen in the final product), and keeping consistency among the various projects as well as within this project itself.
Prototype
Then, I take those ideas and begin designing! For Verizon in particular, I use Sketch to create the wireframes. I also utilize some of its plugins, Craft in particular, and uploaded to InVision. It's a lot of fun showing the clients a mock-up of what their functioning screen might look like!
The flowchart for the new version that I created.
Test
Finally, I test and retest to see how the employees feel and how they can maneuver through the created screen. If any lingering issues or pain points are still present, or if any new issues or pain points arise, I once again meet with users, as well as occasionally business owners, application owners, and developers, and begin the first part of the process. This continues until everyone is satisfied!
The Final Prototype from InVision