LUKE MANIMALA
// design
The Client observed that some users, who were predominantly middle aged truck drivers, were having problems adopting the automated system. Many users even preferred to call the telephone number and submit the permit information orally rather than inputting it on the website. To incentivise and attract users to the product platform, the client built a free cost and profit calculator so drivers could analyze their operating margins on a job.
Our challenge was to identify the pain points that were causing many users to drop off or file paperwork over the phone or fax. Additionally, the client requested a visual refresh for the brand and product UI.
Because the product’s primary user experience is a data entry and form completion task, we hypothesized that we could gather insights through user interviews where users would compare the existing product to industry leading form completion solutions. We also inquired about demographic and product usage practices and gained the following insights.
From this first round of usability interview, we drafted a set of design principles that we checked back to throughout the remaining product design.
Long forms, arrays of data, and other elements should be organized by category.
Our users want simple, light designs that load quickly and fulfill the function.
Our design should make the process obvious for our users.
Since our users expressed correlation between smaller input asks and form simplicity, we moved to paginate the existing form to multiple pages. Much of the key information being asked of users was industry specific and unique to the problem space, so we sat down with the client and began grouping the input fields into smaller more manageable collections.
We developed a number of alternate form designs that we could present to users to determine the ideal form flow. We first tested vertical form flow against horizontal form flow, and vertical pagination like an accordian, versus horizontal pagination.
We started this effort by presenting the client with 10 inspiration slides, including product snips from a variety of industries. Some design consultants call this a "20-second gut check" workshop.
Taking these insights from the client, we developed a total of 6 UI Style Tiles, 3 from each team member. We tested those style tiles for favorability amongst users.
I found that of the three I designed, users preferred the Clarity style, because it felt "peaceful", "chill", and "professional". These descriptors served as a confirmation to the mood board from which the style was generated.
The solution we provided was a high fidelity prototype and reusable design system for use as a development template. The improvements included in this solution were beneficial for both the user experience and the organization’s effort of updating the product to a more modern aesthetic.
In addition to delivering a prototype and design system, we also provided annotated screens regarding UI states and properties. The solution included a more usable form entry flow, a progress bar nav, a strong aesthetic direction, and library of updated UI elements.
To ensure that developers could quickly and accurately take measurements from the prototype, I provided an HTML inspectable file that allows the devs to inspect each UI or text element in the browser. This HTML was of greater value than a Zeplin link, as we could guarantee Zeplin hosting until project development is complete.
The client team was very satisfied with the design work and a development plan targeting 2021 product release was laid out. We provided the following recommendations for the continued success of OSOW.io
Update the current OSOW.io marketing site to include the design system provided by our team, and implement a content and marketing strategy for the OSOW.io products.
Implement form analytics on the site to determine pain points for the users at scale. The benefits to seeing user progress or abandonment would be valuable for continued iteration.
.webp)
