Mobile Application Enhancements
UX Design
Context
Within the Shamrock mobile application, customers can reach out to their select representatives based on what services they have with the company. The three main options are a Fuel Rep, Factoring Rep, and Technical Support Rep. The client can either call the phone number provided or send out a message and wait for a reply at a later point in time.
The Problem
The issue with the previous interface was that each form had its own UI to each individual form, making it a very inconsistent look and feel. Along with that issue, it was discovered through our Power BI reports and our session tracking software that there were parts of the form that were not ever being used.
Project Goals
The goal of this project was to make the contact forms unified across multiple services. While doing this, look for patterns that may lead to removing unnecessary elements of the current iteration in order to speed up the workflow.
My Role
UX Design
Research
Testing
Research & Wireframing
As I mentioned before, I spent a significant portion of my time compiling data to see what portions of the contact form were not being used, as well as where people were getting tripped up during the workflow. After analyzing my findings I was able to conclude that the inconsistency of the current state was leading to initial problems for users when they landed on each screen. A moment would pass where you could see confusion taps, and then recognition would finally set in. Using Power BI reports, I was able to weed out a section of questions that did not add any value to our clients- as they never filled it out. Removing unneeded bloat was a large goal of mine at the beginning of the project.
Wireframing these new mockups was insightful to how a simple and clean look can reduce large amounts of confusion. When testing these simple wireframes on test users, the rate of confusion clicks dropped significantly, and the time to complete the form also dropped. This showed me that my original goals were being met.
Final Designs
When I came up with the final designs for this contact form, I wanted to break the mold a bit from our current UI. Within our brand style guides, I decided to add a small gradient, as well as an icon in the middle of the header to display clearly which form the user was in. That way a user with multiple services with us could easily recognize if a mistake was made. Unifying the drop-down reasons was also a good portion of this project in the final stages. I had already connected with team leads from each of these respected groups to determine which reasons they most commonly have people reach out to them about. With that information, I was able to craft unique dropdowns that satisfied each main request that clients usually reach out with.
The final designs were able to accomplish the goals that I had determined at the beginning of the project and have led to a decrease in navigational errors.
