CREATING a user portal for

BACKGROUND

ABOUT THE COMPANY

Hook & Go Logistics is a safety and compliance company that helps professionals start and maintain a trucking company. It’s the only one-stop-shop for purchasing an active trucking authority and maintaining compliance

ABOUT THE PROJECT

Objective: Create a user-friendly portal for clients to view, manage, and upkeep compliance deadlines

Problem: Hook and Go Logistics did not have a user portal that existed for their clients

Target Audience: Trucking entrepreneurs and drivers

Constraints: The timeline was tight - there were only about 3.5 months until the launch date

ABOUT ME

As the UX and Product Designer, I was responsible for planning the initial research, designing an efficient user workflow, and creating a minimalist user interface. I collaborated closely with Jared Woods (CEO) and Omkar Moghe (Software Engineering Lead) to execute Jared’s vision.

DESIGN PROCESS

RESEARCH

I made sure to pursue an extensive research process due to my lack of experience in the trucking field. For research, I conducted four user interviews and thorough independent research to assist with executing the client’s design and business goals.

User Interviews

I interviewed three existing clients that H&G had and the CEO who also owns a trucking company, each interview lasted between 20-25 minutes. I asked the following questions:

  1. Describe your typical day as a trucking company owner.

  2. What are some challenges you face owning a trucking company?

  3. What are the general goals you’re trying to solve with our user portal?

  4. Think of a user portal you enjoy using. Tell me about it.

Independent Research

Additionally, I conducted independent research regarding what components keep trucking companies in compliance. I was able to learn a lot of the information I was looking for on the FMCSA (Federal Motor Carrier Safety Association) website. I also discovered the different online tools that many trucking companies use to assist with different parts of their company’s safety and compliance (Motive, AscendTMS, Transport Pro, etc.).

Online trucking tools and resources

Takeaways from my user research:

  • Owners of a trucking company are booked and busy

  • Trucking safety and compliance require juggling many deadlines and fee payments

  • Storing and submitting documents is a crucial part of compliance upkeep

In conclusion, the target audience of H&G needs a user portal that has a straightforward user flow, a minimalist user interface, and features that will effortlessly blend organization into their trucking compliance process.

IDEATE

The next step was to formulate the information architecture and wireframes. Jared had a list of design preferences and also requested integrations with specific softwares he was already using for his business (Square and Motive). It was great to start the design process with a foundational style that was also familiar to trucking professionals.

Layout examples of the design preferences that Jared had, these screenshots are from Motive and Ascend TMS

I reviewed the information gathered from the user research, Jared’s design preferences, and the features Motive and AscendTMS had on their user portals. From there, I was able to sketch out my information structure and wireframes to get the ball rolling. I conducted several meetings with Jared and Omkar to thoroughly discuss the proposed infrastructure. We brainstormed the most on the following topics and features:

  • Assets tab (What the view should look like if it’s the user is editing it v. viewing it, how to structure the CRUD, how much information each asset needs to hold, export and import capabilities, and user options for customization)

  • Two-factor authentication

  • Possible integrations for the Accidents tab

  • What should be displayed on the Dashboard

  • How we should display the alerts (Calendar v. List)

  • To create or not create the Audit and Testing tabs

  • How to opt in/opt out of alerts

  • Structure of the FAQ’s page

Information Architecture Sketch

Wireframe sketches

DESIGN

Once the basis of logic and functionality was defined for the user portal, I was able to start designing. I used the wireframe sketches and information structure to bring H&G’s first user portal to life with Figma. The UI followed all brand visual guidelines that Jared requested. The following was discussed and changed during the design process:

  • Implementing thinner lines and borders for a more minimalistic and sleek view

  • Replace rounded outlines with a slightly rounded rectangle

  • Adding icons to each tab and actions

  • What color coding system should we use to display the different statuses in the IFTA tab

  • How to differentiate the edit v. view display across the user portal

  • Changing fonts

  • Placement of the profile, alerts, and FAQ’s icons

FINAL SCREENS (NEW USER & EXISTING USER)

DASHBOARD BREAKDOWN

OTHER NOTABLE FEATURES

The table views offer an organized and spacious interface for CRUD actions, which creates efficiency within the target audience’s interactions.

The drag-and-drop option for downloading documents was included to improve the speed at which a user would upload a document. They also have the option of browsing their computer to import files.

The star of the show is the alerts tab. This feature makes H&G extremely unique because they are the only service that also offers an alert tracking system (that the client can opt in and out of) to assist with tracking all compliance deadlines.

PROTOTYPE

The prototype is currently being built by Omkar and will be tested, revamped, and featured here by the end of Spring 2024. Stay tuned!

REFLECTION

CHALLENGES

  • Micro-challenges: Time difference between the West and East Coast, scheduling conflicts, and limited availability of the CEO

  • The short timeline: Because of the short timeline to execute this project there were a few integrations and features that we were not able to create because of the limited amount of time we had until the launch date. We had to remove the Motive integration, Testing tab, and Audit tab

TAKEAWAYS

  • Content - Throughout my process, I was reminded how design and content truly go hand in hand. If the design doesn’t go with the content, the user will be confused about how to use the product

  • Adaptability - I learned how to adapt to the client’s time and schedule constraints. Our team is still right on schedule for the launch

  • Communication - While I was pitching my ideas and presenting my deliverables to the client, I saw the value and importance of informative communication in design

  • Active Listening - While taking user interviews, I strengthened the muscles of active listening. I took the time to analyze each response, deferred my own biases, and requested clarification on responses I needed more information about

  • Little Details - The little details always matter. Whether that’s using a specific font, filling an icon, or changing the color of a word; a product that’s easily understood by users will lead to a smoother experience

CONCLUSION

In this short amount of time, we conducted user research, created and tested prototypes, and are scheduled to release H&G’s first user portal on time. This product is a testament to the whole team’s dedication, resilience, and efficiency throughout our creation process. I’m truly grateful that I was a part of such an incredible project, bringing Jared’s innovative vision to life was hands down the best part of this experience. Thank you Hook & Go Logistics!