OSOW provides software and services for the heavy haul freight trucking industry. Oversized items can present logistical challenges with how to transport them, requiring special handling, optimized routing and state permits. OSOW provides a fee-based Permit processing service to streamline this process for drivers. They also offer a free route profit margin calculator tool, which helps drivers decide which loads to bid on.
The client asked us to improve the current design of two web forms for the website: the PERMIT ordering form, and the ASSIST free profit calculator. The current site had the following critical visual pain points the client had identified, which were hindering form completion.
A lot of the business happens over the phone, but our client wanted to drive engagement on the online site because phone calls were more costly and time-consuming. The business was struggling to retain and secure new customers as COVID-19 had challenged the industry.
Many of the client’s users were older, less tech savvy users that were reluctant to use the current site. Using this knowledge, I created a user persona to exemplify OSOW’s typical customer.
I facilitated a gut test in our first client meeting in order to get an understanding of what the client liked and didn’t like. We showed the client existing designs from various industries such as transportation, logistics, and airlines, and asked him to note what he liked or didn’t like about each design. The gut test not only helped Logan understand what our project scope was as UI designers, but also created a comfortable atmosphere for providing visual design feedback going forward.
Logan enjoyed minimal, modern designs that used lots of white space to give the design breathing room. He preferred thick san serif fonts and responded well to blue. He appreciated when designs used icons as visual queues or to accompany text.
To assess the visual decisions made by other companies in the truck and web form space more closely, my teammate and I performed a competitive analysis. Since our client has a lot of required inputs in their forms, our primary concern was understanding how to capture data seamlessly.
I found inspiration in Turbotax, Credit Karma, and Omni Calculator who make extremely tedious processes seem easy and even enjoyable. Here I learned that collapsable sections, icons, and progress bars make information digestible. Different form input field states and loading feedback seemed to be the standard.
I analyzed truck and permitting sites to see what our client was directly competing with. Other truck permit sites attempt to make the information digestible, but still look very outdated. OSOW’s main competitors use the same blue and green as OSOW. I saw this as an opportunity to explore more unique color schemes to stand-out in the domain.
We used our primary research and understanding of client goals to craft three design principles to guide us through the rest of the design process. Not only did this give us a goal with our designs, it provided us something we could test against with users, and ensured we had client buy-in throughout the process.
Show the Path
Our design should guide the user to his goal by eliminating all road blocks and reducing information fatigue.
Group Up Sections
Data elements should be organized by category so the user knows exactly where to get his information.
Keep It Minimal
Users want simple, light designs that load quickly and fulfill the function, because they don't always have the best internet.
I took my learnings from the client gut test and competitive research to create three different visual design directions to test with our users. I made sure to include different types of loading feedback, forms, progress bars, buttons, and icons, since our research proved these things were important to this product.
─ 01Drive In StyleInspired by modern luxury vehicles, this style brings a sleek, classy user experience to a process that may normally not seem glamorous or smooth.
─ 02Truck Dashboard Inspired by the inside of a truck dashboard to transfer the familiar material experience of driving a truck into the online experience.
─ 03Open RoadsInspired by the freedom of open roads which are loved by truck drivers, in order to bring that calmness into the complex permit ordering and route planning experience.
My partner and I conducted user favorability testing on all style tiles to help us each pick the design direction that resonated best with our users. In each interview we first gathered gut reactions on each individual style tile in order to get detailed feedback on elements of each style. At the end, we showed all six directions and asked the user to rank them from most suitable to least suitable in order to see how they compared against each other.
The interviews revealed that users preferred:
• a clean, minimal, straightforward look
• black, white, and blue colors
• small, bite-sized pieces of data alongside a progress bar
I decided to move forward with “Drive in Style” and “Open Roads”, as both tested well amongst our users.
• Professional, sleek, trustworthy feel client wanted to obtain
• Closest users ranked this style as suitable for the heavy truck domain
• Tested highest across the board due to calm colors and open feel
• Lighter color scheme is more suitable for form and chart readability
Now that I was more knowledgeable with the domain and had settled on a design direction, I took the mid-fidelity wireframes provided by the previous UX team and got to work on creating Hi-Fidelity screens. My partner and I conducted two iterations of favorability and usability testing on our two individual design directions. While the design was overall well-received, I noticed the following challenges.
Sign Up Page
Users liked the dark onboarding screens, but the client noted the logo didn’t stand out enough against the dark background.
Assist form
Users noted the lighter background transition for forms was a familiar and made them feel they were ready to work. Users felt the vertical accordion feature would fit better on a mobile application.
We included some questions that were not previously addressed in the current site or wireframes, but that we knew were important considerations for user form completion.
How should we approach form saving?
After hesitation, users mentioned they expect the form to save automatically. We noted, however, that users were more confident the form was saved when there was a “saving” animation or a “save and exit” button.
A saving interaction we tested which built trust amongst users.
How should we approach error handling?
Because our forms had so many inputs, we had the challenge of deciding if we should allow the user to “look forward” in the form without entering all the correct information, or if this would cause confusion. After assessing pros and cons, we decided it would cause more confusion if the user got to the end of the form and realized they had many missing fields and had to repeat the process.
Our users validated that in-line error handling was the most natural way to catch and fix mistakes as they were entered by the users.
After iterating on the interview insights and client feedback, I presented the following high-fidelity screens and final prototype.
Homepage
The home page is a marketing site that presents a professional, appealing solution clearly and encourages new users to sign up.
Dashboard
The dashboard is where the user can keep track of past orders, and can make a new service order.
Permit Applicant Screen
The permit form is divided into six different pages which are navigated with a simple “continue” or “back” button, and tracks to the progress bar up top.
View PrototypeTo establish a clear and consistent visual language I delivered a style guide the client will use for all future products, including their upcoming mobile product. The style guide explains how to handle errors with form fields, icons, colors, and is flexible as the client adds on multiple products.
At the end of our engagement, the client was satisfied with our final recommendations and was particularly impressed by the saving recommendation, progress bar, and separation of information into a multi-step system. We also provided the following future recommendations:
FAQ page
This is a common and low cost way for e-commerce sites to answer users frequently asked questions. FAQ sites are easy to navigate and make the user feel more comfortable with ordering from a site, improving overall brand perception.
Securing full stack developer
The client mentioned he had challenges with his current developer. We recommended securing a developer comfortable with front and back end coding to implement our style guide and allow the coding capabilities for navigation, saving, and form editing, which would make the company more competitive in the industry.
Hiring a Content Strategist
In our interviews, we learned that users were often still confused on what each product’s purpose was. We believe thoughtful copy or explanation across the site would solve this problem best. We suspect the site will get more complex as the client grows its product offerings.
See Next Case Study
Dash To School
