The Problem
With the company replatforming our Engage product, the VP of Product wanted the UX team to take a look at the existing workflow and find ways to enhance the product. Specifically, we were asked to: 1) find ways to help increase revenue, 2) enhance the experience for advisors with the customers in the service drive, 3) find ways to increase the utilization of Engage with dealerships, and 4) decrease the ramp-up time for new advisors. After discussions with the UX manager, it was decided that myself and another UX designer would be the design leads for the delivery of this project through Q2 and Q3 to get the product to pilot in Q4 of 2018.
The Process
We kicked off the EngageNext initiative in March of 2018. Meeting with both the PM of Engage as well as the VP of product, we all synced on exactly what the overarching scope of this project would be. We focused on the project objectives (listed above) as well as the ability to deliver this project quickly and efficiently. After further clarification on how to achieve this with Product Management, it was decided that the enhancements for the project would come about through smoother workflows and interactions while trying to maintain as many back-end service calls as we could. This would allow engineering more time to focus on learning the new ReactNative platform without the fear of completely changing the way the app would behave in retrieving data.
With these given constraints, the UX group started the project with a feature audit of the existing platform. This would give us a clear idea of all the features that were contained within the product as well as the existing hierarchy that the app actually utilized. We used sticky notes to write down all of the different functionality and pages within the app. Once we completed this, we then organized the pages based on the current hierarachy. When this was laid out, we then started to look and see how we might be able to condense some of the workflow to better enhance the experience further. Once this was complete, we digitized this within LucidChart so we could better reference it in a digital format as we progressed, which can be seen below.
To better understand how the product was actually being utilized, we next dove into the Google Analytics to see which pages/functions were being heavily utilized and which ones were underperforming. Once these were identified, we decided to go out and visit some advisors at different dealerships to better view the product being utilized out in the field. This would give us a better understanding of current pain points within the product as well as allow us to discuss the current product with some actual users. For this initial phase, we decided to visit 5 dealerships. We visited these dealerships in the early morning over the course of a few days to make sure we could watch the product during its most heavily utilized times. Photos from one of these visits can be seen below. Once all of the visits had been completed, we then synced all of our notes together and came up with conclusions/ideas that we could move forward with for the EngageNext initiative.
Once we had gathered as many data points as we could, we then wanted to reconfigure the existing workflow to one that we felt would be a faster and a better user experience. To best showcase this to Product Management, we decided to build out two user journey click-through maps. The first journey map would showcase the current workflow, which would show all of the extra and redundant steps it would take to complete an action. The second map was the new proposed workflow and would be presented alongside the first to show just how much the workflow could be condensed with simple changes and enhancements to the product. Below are a couple of examples of different workflows we targeted and showcased to Product Management. The presentation of these clickthroughs was successful and Product Management signed off on the proposed workflows.
With new workflows now agreed upon by product and UX, we then began the exploration of low-fidelity wireframes. The first step in this exploration was to do a quick survey of existing patterns for different pieces of the UI. After a weeks long exploration, several different ideas and patterns were showcased and decided upon. Utilizing Balsamiq, we then built out an entire low fidelity walk-through of our newly proposed UX design for EngageNext. In doing so, we were then able to showcase these new screens to both internal and external stakeholders to collect feedback and quickly iterate. After several rounds of this feedback and iteration loop, we felt comfortable moving forward with high fidelity mock-ups and patterns.
The Solution
Using Sketch and InVision, we transferred the EngageNext low-fidelity screens into pixel perfect mockups. During this process, we reached out to the Common Experience team at Cox Automotive to make sure we were adhering to the developing UX/UI pattern library they were creating. Once an initial high-fidelity prototype with the new workflows was created, further feedback was sought from internal/external stakeholders, allowing further iteration. The project is now in the process of being delivered to engineering through pixel perfect page creation and spec delivery. Below are a few example pages of the high fidelity screens being delivered for the EngageNext project.