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:
Describe your typical day as a trucking company owner.
What are some challenges you face owning a trucking company?
What are the general goals you’re trying to solve with our user portal?
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!