Load Board Internal UXUI Project

In early 2023, I was part of an internal initiative at The Nerdery to test a potential consumer offering for our agency, in which a small team consisting of a product owner, visual (UI) designer, back-end developer, and front-end developer created a happy path coded experience for a fictitious client in a short span of time. The idea was to see if it would be possible to cut much of the extensive discovery period from a product engagement, and instead work quickly as a small team to build a coded prototype that customers could use as an internal promotional tool to gain company buy-in and help diversify the kinds of work our agency can offer.

This engagement lasted a total of two weeks, and was a great example of what a product team can accomplish in a short span of time when working in a more speculative, blue sky style of ideating.

For this project, my team and I created a load board product experience that would allow an independent truck driver to choose and bid on available jobs. While I will share other aspects of the project for context that my Product Lead, Tony Boun, contributed, such as the information architecture and lo-fidelity wireframes, my involvement in the project was largely focused on the creation of the UI style guide and the high fidelity user interface desgin.

Info

Client

The Nerdery

Year

2023

Role

UI Designer

Tools Used

Figma

Process

1. Research

Because of the short length of this engagement, I primarily relied on my Product Lead, Tony, as the subject matter expert for this digital product. Tony has worked on similar projects before for real customers, and as a seasoned UX designer, he was able to clearly outline the "happy path" experience he had in mind.

2. Information Architecture

Tony shared the following lo-fi workflow diagram, which maps out the experience a freelance trucker would take through the interface, first choosing and bidding on jobs, viewing the automated responses to bids, and re-biding if desired.

No items found.

3. Interaction Design

Next, Tony provided me with his lo/mid-fidelity wireframes of the necessary screens. He used design components from the Angular Material Figma library. Our front-end developer Will and I decided that we would use this library as a basis for our project, as Will would be implementing the front-end work in Angular. From there, I explored design inspiration websites like Dribbble and Mobbin for UI style inspiration, and also revisited websites with nice cart and bidding experiences, like Target and Reverb, as our product would feature a bid cart.

No items found.

4. UI Design

I decided upon the typeface Outfit by Google Fonts for this project, as I appreciated the typeface's slightly quirky but refined grotesk style that I felt would aesthetically speak to a digital product in the transportation industry. I chose a color scheme of metallic blue accents on a largely neutral backdrop, evoking "tech-forward", stable, and clear-minded connotations. I also chose the metallic blue with the thought that this color would mesh well with the branding of my agency, Nerdery, as this speculative project was a Nerdery internal initiative.

No items found.

I created a simple login screen, the form field and button components of which I drastically customized fromthe Angular Material styles to fit my envisioned aesthetic with slim strokes and, rounded buttons, and a metallic blue gradient with a subtle button shadow.

No items found.

The next four screens show various states of the main load board screen. designed in a minimal, neutral style that leans on subtle strokes and drop shadows to accentuate the different interface sections, offset with pronounced bursts of color for clickable UI components.

The first screen shows a default table view of available jobs. Here the user can search by origin and destination locations, which would automatically limit the number of loads available. The user can click the refresh button to the right of the search to reset this filter. The user can also theoretically click the column headers on the table to automatically sort results alphabetically by that filter. Having decided upon a desired job, the user can click the "plus" icon CTA at the right of each row to add a job to the Bid Cart, where the user will add a bid amount before submitting the bid.

On the second screen, we see the selected "History" tab view of the load board, which displays a record of all placed bids and the status of the bids.

The third screen shows the Bid Cart as it would look populated with added bids. This bid modules show only the most crucial load information, and includes a form where the user can input a bid amount after considering the suggested bid. The user can also click the "x" in the upper right of each bid module to delete a bid from the cart before the cart is submitted. The Bid Cart features a scroll area that disappears behind a fixed lower summary area to accommodate for use cases in which a user might add several bids to the cart. Adding bids to the cart and inputting bid amounts would cause the subtotal and total to update automatically.

The fourth screen shows an error state, which would appear at the top of the Bid Cart if a user tried to submit the cart before bid amounts were added to all bid modules.

While these screens also display CTAs that suggest map, messaging, and notification functionality, these features were beyond the scope of this project, and were added primarily for verisimilitude.

No items found.

The final two screens show a bid acceptance/decline modal that would pop up automatically when bids are submitted from the cart. The thinking here is that bids would be programmed to only accept bids that fell within a pre-set bid window. With this tabbed modal, the user can quickly and easily see the most necessary details of the bids that were accepted and declined. The user then has the option to place a new bid through the corresponding CTA on the declined bid module. Clicking this CTA would send populate the declined bid in the Bid Cart, allowing the user to easily add a new bid.

No items found.

5. Iteration

If I were to continue fleshing out this excercise, I would focus on building out custom states for all design components with interactions. With the imposed time constraints of this project, our team relied on pre-built Angular Material component states for this exercise, with the addition of our brand colors. Due to the limited scope of the project, we opted to only build a desktop version of this flow, but I would design the other tablet and mobile breakpoints if we were to continue the project further. Beyond that, I would continue to explore other features that were only hinted at in the UI, such as messaging, notifications, profile creation, and a map view.