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.
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.
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.
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.
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.
