christine forni
ux + UI design
Project Overview
Vixxo’s largest client wanted to create a data model to predict when assets would need service, in order to reduce downtime in stores. To get the data needed for the model, I had to craft a new data capture flow within the VixxoLink technician workflow, without significantly increasing time spent filling out work orders. The primary focus was on capturing PCR: Problem - what part created the problem that was called in, Cause - why is the part failing, Resolution - how was the part fixed.
Goals
Capture relevant data points, avoid significant impact to user workflow, ensure data accuracy
Challenges
Conflict of need between user and client, complex data entry workflow with dependencies
Methods
User interviews, field studies, heuristic evaluation, journey mapping, iterative design,
A/B testing
Results
Successfully launched according to timeline, with a 92% improvement in data accuracy
Project Overview
Vixxo’s largest client wanted to create a data model to predict when assets would need service, in order to reduce downtime in stores. To get the data needed for the model, I had to craft a new data capture flow within the VixxoLink technician workflow, without significantly increasing time spent filling out work orders. The primary focus was on capturing PCR: Problem - what part created the problem that was called in, Cause - why is the part failing, Resolution - how was the part fixed.
Goals
Capture relevant data points, avoid significant impact to user workflow, ensure data accuracy
Challenges
Conflict of need between user and client, complex data entry workflow with dependencies
Methods
User interviews, field studies, heuristic evaluation, journey mapping, iterative design,
A/B testing
Results
Successfully launched according to timeline, with a 92% improvement in data accuracy
Initial Research
Because this was such a large project, we made sure to budget time for pre-design research to make sure we had a clear picture of the existing state of product, what areas of the front and back end would be impacted, and how we could design for future growth. We utilized a variety of research methods to accomplish this.
To assess the current product state I conducted a heuristic evaluation of the existing legacy workflow. I evaluated the existing model on design pattern consistency, error prevention and recovery, learnability, and efficiency. What I discovered was troubling - major design inconsistencies, difficult user controls and very little freedom to adjust responses, unclear and unnavigable data dependencies and workflow branches, lack of system status or feedback, and a long time to complete the data capture workflow. There was a lot of opportunity for improvement in the new feature.
Having seen for myself the current state of the product, I wanted to hear from the users how they were currently navigating the workflow and what their specific pain points and points of success were. I sent out a survey to 20 technicians to gather feedback without taking too much time from them. The survey was kept short with ranking the product on usability statistics, and two open ended fields to detail what the technicians found effective and ineffective about the workflow. I wanted to be able to ask the same questions of the new workflow so we could compare before and after user impressions. Additionally I conducted four field studies with service technicians where I tagged along on their active service requests, observing and asking questions while they interacted with the product in its actual context of use.
Heuristic Evalutation
Evaluated the current product state on ease of use, design pattern consistency, and data entry accuracy
Surveys
Collected survey feedback from users to determine user impression of usability and major pain points
Field Studies
Went out with technicians to watch users interact with product naturally, to understand context of use
Design Workshops
Conducted design workshops with client and business to identify feature requirements, scope, and future feature integrations
From the surveys and field studies I was able to verify my own findings from the heuristic evaluation, as well as gain a better understanding of what the users needed from the product - efficiency and guard rails. I was also surprised to see how the users had adapted to getting through the workflow and the workarounds they were utilizing.
The final step before moving into the design phase was conducting design workshops with the client and key internal collaborators. We wanted to make sure the client felt heard, and make sure we collectively agreed on what the feature needed to have. We also needed to make sure that we didn't promise anything we would be unable to deliver on, so we collaborated with our head developers and software engineers, as well as our technician leads to provide additional insight on the users.
I lead two design workshops with the director of UX, where we focused heavily on establishing the user and their needs using all the research so far, working through issues with the workflow and data dependencies, prioritizing feature requirements, determining project scope, and developing a strategy for feature development. We also encouraged creative problem solving from everyone to diversify ideas, and gather ideal/"dream" state goals for us to work towards. During the workshops we conducted postups, affinity diagramming, forced ranking, journey mapping, and impact/effort mapping.
Design Phase
After the preliminary research and design workshops we had the list of requirements the design needed to address. From here we worked on the data capture workflow. The data had a lot of dependencies so it was important to figure out the best order and hierarchy of questions. We continued to go back and forth with the client, as we discovered new data dependencies, and continued to narrow which points were 100% required and which were nice to have. It was important to distinguish between the two as I wanted the workflow to respect the users' time and limit mental fatigue. The director of UX and I had numerous whiteboard sessions where we worked through the data dependencies and ideated on user flows. Once we had two viable user flows, I worked on creating mockups and calling out what inputs we would use to capture the data points.
The major considerations for the design were:
-
clear separation of required/optional fields
-
clear data hierarchy
-
learnability
-
user freedom
-
error prevention
-
system feedback
I wanted the design to be learnable and match user expectations, so I took other workflows in app into account and tried to match existing design patterns while adapting appropriately for the complexities of this specific flow, and addressing the inconsistencies discovered in the research phase. I also tried to match commonly used data collection patterns, like indicating required fields with a red asterisk, and choosing the appropriate field formats based on the type of question being asked (binary or singular answers with radio selections, multiple choice check boxes, short answer vs long answer). I used nested lists to allow users to visualize the hierarchy of the data and how points defined one another. To allow the user to move and edit throughout the hierarchical nesting workflow, I created clear navigation using bread crumbs so that the user knew where they were in the workflow, and how it related to previous selections. I also broke up the data entry into four groups to help with user fatigue, so that users could feel they were progressing through smaller segments rather than tackling one long data entry flow, and knew what portions they had completed and what remained. I kept the segment titles on the generic side, to allow for system growth if additional questions needed to be added later.
Once we were happy with the mockups, I created some low fidelity prototypes so we could get a feel for the data entry flow and the time it would take to complete it. We still had two leading flows, and felt there were pros and cons for both, so we decided to A/B test them. Using Axure I was able to import our real parts data so that technicians didn't get stuck on imaginary parts and were able to understand how the flow would be used in real life.
Testing
I wrote out the tasks and scenarios that would help compare the efficacy of the two designs, and coordinated with our technician supervisors and set up around 6 sessions for each design. Sessions were slated for an hour and were conducted virtually with the director of UX and I taking turns administering and taking notes. However, after five sessions it became apparent that there was a major issue impacting both designs that needed to be addressed before continuing. We paused user testing to fix the design flaw, and answer additional questions that came out of the first round. Users were having a hard time understanding what was being asked in a portion of the flow, and there were dependencies that were a bit unclear. We took these back to the client to get clarification before reiterating the designs. To make the question clearer, I added additional subheadings that provided helper text, and reordered the order in which the questions were presented.
After re-iterating the workflows, and gaining some additional insight from the initial tests, I narrowed the two designs down to one, and set up a second round of testing. The second round concluded with an extremely high success rate and increased data accuracy from the first. I collected the findings and presented them to both our internal business and the client. After getting approval from both, I was able to move forward into implementation.
.png)
Implementation & Outcome
This was a huge project that touched a lot of back end databases, so to start with implementation we set up discovery meetings with the data and software teams to walk through the design and break down the workflow. I helped field questions from the engineers and explain the data structure and the client's goals. Once the back end needs were established, I worked with the product owner and agile front end development teams to break the feature into smaller deliverable parts. I created high fidelity prototypes using Material Design components. I also created design documentation calling out design details like fonts, sizing, padding, interactions, and feedback. I worked closely with the developers throughout development, answering questions and adapting the designs as needed where implementation was tricky. I also audited sprint work for design fidelity.
For rollout I partnered with our communications and technician leads to create documentation and step by step guides introducing the new workflow. I also used Pendo to create an in-app walk through and link to additional resources. Once we went live and started collecting data, we saw a much higher level of detail captured than previously, as the client wanted. We also saw higher percentage of workflow completion - previously users would quit the workflow partway through, due to the cognitive load, difficulty following the workflow, and issues with performance. Overall the client was happy with the end result and able to move towards their predictive modeling goals, and our users were minimally impacted and had a more favorable perception of the new feature than its predecessor, despite the increase in data capture. I gained a lot of perspective on long term projects and how to work cross functionally with a variety of teams, as well as experience leading a large scale project end to end.
