Exit
LUKE MANIMALA
// design

Improving A Product’s Form UX & Visual Design

context
I was on a team of two working on a Bootcamp Client Project. Prototypes were designed individually but research was conducted and analyzed together.
tools
Sketch, InVision, Illustrator, Zoom, Forms, Hangouts, Miro, Trello
timeline
4 Weeks
No items found.

I worked on the product UX and visual design for a client within the transportation space. The product automates the permit application process for XL shipments.

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.

Existing Solution

No items found.
The existing OSOW.io dashboard, first, and permit application, second.

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.

We began with a one week product discovery sprint

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.

  • We learned that users unanimously believed that smaller forms were simpler and less daunting to use.
  • We learned that this demographic preferred simple websites, stressing the importance that the product load quickly on low band width between cities.
  • We learned that users responded positively when they were given clear directions and visual cues about their progress.

From this first round of usability interview, we drafted a set of design principles that we checked back to throughout the remaining product design.

Product Design Principles

Group up Sections

Long forms, arrays of data, and other elements should be organized by category.

Keep Designs Minimal

Our users want simple, light designs that load quickly and fulfill the function.

Show the Path

Our design should make the process obvious for our users.

No items found.
From user interview, we learned that users preferred to flow vertically through form fields and horizontally across to new pages

Our next main effort was to iterate on the product usability through our first design principle, group up sections.

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.

Form Pagination Workshop

A gif of many sticky notes being organized into smaller related clusters.

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.

Alternate Form Field and Page Flow Configurations Tested

No items found.
From user interview, we learned that users preferred to flow vertically through form fields and horizontally across to new pages

We then moved into the final challenge which was to develop and apply an updated visual language.

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.

Style tiles go across screen as client rates them good or bad.
Through general observation and suitability score, we learned that the client preferred a modern and more corporate aesthetic

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.

Style Tile suitability testing with 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.

"Clarity" Style Tile and Mood Board

No items found.
Users preferred the Clarity style for the calming characteristic and mood it embodied

Applying the visual layer to our solution

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.

A black windows laptop with a plant next to it and the OSOW.io dashboard displayed on the screen.
The final design version of the OSOW.io dashboard

Explaining the solution

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.

A screenshot of the clarity design solution with numbered annotations that correspond to specific interface elements. These numbers appear on the right hand side of the screenshot where a description of the element and reasoning behind the decision is written.
Annotated screens communicate many of the UX and UI improvements for the Clarity design.

HTML inspectable design system

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.

And inspection HTML file.

Outcome

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

Future Recommendations

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.

No items found.
The existing OSOW.io dashboard, first, and permit application, second.

More case studies