PROJECT OVERVIEW

This was a Capstone project completed during my UIUX program at General Assembly. My team was matched with LogAware (Now Tarmac AI), an early stage startup focused on B2B technology for supply chain and operations management. Our team worked directly with the founder and lead developer to improve the existing interface design and bring their product vision to life.
‍RESEARCH METHODS: Market Research, Competitive feature analysis, User interviews, User Personas, Empathy Map, User Journey, Service Blueprint, Site Map, User Flow, Feature Prioritization, Design Studio, Prototyping, Usability Testing

MY CONTRIBUTIONS

PROJECT TIMELINE: July - August 2022
‍MY ROLE: I led user interviews and usability testing at various stages throughout the project. I also collaborated with the team through ideation, design, and prototyping of the LogTrack Mobile App and Dashboard.
‍‍

MY TEAM: Pattrick K, Victoria L, Penny Q, Rahim STOOLS: Figma, Miro, Zeplin
‍

The Challenge

‍Supply chain and shipping operations are limited by outdated technology and disjointed systems. A lack of transparency and complications with document hand-offs at multiple touch points contribute to error, delays, and chaotic processes.
‍

The Goal

LogAware is an early stage startup that aims to support operational management efficiency and information transparency through an all-in-one shipment tracking and document sharing system that works across a desktop dashboard and a mobile app. At the start of the project, this product existed as a beta prototype with limited functionality and a minimal interface. Our goal was to work with the founder and lead developer to bring their product vision to life.

Our Redesign

RESEARCh

Contextualizing Our Product
‍
Before delving into design, we wanted to better understand the industry, and gain a better idea of our product and where it stands in the market. We started by researching similar platforms used within the shipping, transport, and supply chain industries. Companies like flexport, XPO logistics, cargomatic and project44 provide solutions such as cargo tracking and logistics management for freight forwarders and supply chain companies. A comparative feature analysis highlighted what sets LogTrack apart from adjacent companies while providing us with a starting point and direction for design improvements.
‍
‍

Understanding Target Users
‍
LogTrack features two interconnected platforms, with two separate user bases. We conducted interviews with people from both user groups, which included shipment transporters and logistics/operations managers.

These interviews helped us better understand users and many of the frustrations and needs within their everyday work.

What People in the Industry Are Saying
‍

Key Findings:‍

Across all interviews, many users expressed frustration about the chaotic and unpredictable nature of the supply chain. They highlighted issues such as lack of communication, human error, and lack of transparency which often cause delays and problems with tracking shipments.

Talking to users also challenged an initial bias within our design approach. Our clients mentioned that truck drivers prefer traditional communication methods and are slow to adopt technology, a bias that influenced our early design considerations. However, our research revealed a different reality – drivers actively use technologies like document scanners and mobile messaging apps to enhance their efficiency and safety. The drivers we spoke to expressed frustrations with manual tasks and were open to solutions streamlining their work. This discovery allowed us to pivot our design approach, ensuring solutions that truly supported truck drivers in their day-to day work.

Let's Meet Our Target Users ...‍

Using new insights about our users, we crafted a pair of user archetypes to represent the target users for the trucker mobile app and the desktop dashboard.
‍

IDEATION

To better understand the current system, our team scheduled a meeting with the developer. We created the following Service Blueprint, which maps out the customer actions, front and backend activity.

(click on image to zoom in)

Design Studio
‍
We invited our client and developer to join in on a Design Studio session, where we engaged in rounds of rapid sketching, critique, and iteration to generate ideas for the basic design and layout of our product. We received feedback from the client and developer which gave us useful insight into how to move forward with our designs.
‍

(click on images to zoom in)

Aligning to our client's vision, we began designing our MVP...
‍

Initial Designs
‍
Following our design studio, we began building the first drafts of our product. We put together our initial designs in the following mid-fidelity prototypes.
‍

(click on images to zoom in)

‍

USABILITY TESTING & IMPROVEMENTS

To ensure our designs were user-friendly, accessible, and efficient, we conducted a series of usability tests. Users provided feedback as they interacted with our prototypes and explored various screens and features. Using their input, we fine-tuned our designs for better usability and efficiency. We measured our progress through specific metrics like task completion time, success rates, and ease-of-use ratings.

In total, we conducted 3 rounds of usability testing across 15 users, and improved usability metrics by an average of 27% before handing off our high-fidelity prototypes for development.
‍

Accepting a New Job

In our initial design, new jobs were initiated through the messaging portal. This was confusing to users, who did not expect new job notifications to appear as a message. We added a new feature so that new jobs notifications now appear on the main "jobs" page.

Uploading An Initial Document

Many users did not easily find the "view/upload documents" link, and clicked into the documents tab to complete the task. We added a clearer call to action on the main "Jobs" page to make the feature more discoverable.

Uploading A Drop-off Document

The initial design involved a distinct task flow for uploading documentations prompted by a geofence notification. We improved the design to prompt document uploads from the "Jobs" page through all points in the journey. Improved learnability and consistency led to increased usability rates.

Clearer Shipment Icons & Cards

Many users failed to identify icons on shipment cards as clickable. We improved the design to include larger and clearer icons for documents, geofencing, and messages.

Improved Geofencing Flow

The original geofencing task flow was unclear, and users struggled to understand and figure out how to use the feature. We improved the design to list out the instructions in 3 clear steps.

DELIVER

Prototype: Features in Action

Create an Account:
‍
New users can register for an account through the initial landing page

Document Viewing/Sharing:
‍
Users can access, download and share documents via the "Documents" icon within each shipment card. All documents uploaded by drivers through the LogTrack mobile app can be accessed here.‍

Setting a Geofence:
‍
The geofencing feature can be accessed through shipment cards, or the "Geofencing" tab. A 3-step process enables users to select shipment(s), set a parameter, and create automatic alerts for when a shipment is nearing a destination or send reminders for drivers to upload documentation upon arrival.

OnBoarding
‍
Features are highlighted through a quick onboarding walkthrough for new users.

Confirm Job & Upload Document
‍
Document uploading can be initiated through the main "Jobs" page within a live shipment timeline, by clicking on the blue CTA. After a document is successfully uploaded, a green confirmation appears on the timeline.

Hand-Off

DESIGN SYSTEM & SPEC DOCUMENTATION

Following our completed prototypes, our team prepared detailed documentation for the developers at LogTrack, which included a specification document containing the service blueprint, hi-fidelity wireflows, and functional annotations.

We also included a complete design system, documenting the colors, typography, a component library, and icons used throughout our designs. This would allow for future designers and collaborators to design with consistency and allow our designs to be scaled efficiently for future development and growth.
‍

Desktop Dashboard

Mobile App

Reflection

‍Despite time constraints, our team learned valuable lessons in prioritization, resourcing, time-management, and collaboration through this 3-week sprint. Collaborating with the client and developer provided valuable insights to ensure our creative vision aligned with the client's as well as practical implementation. Designing for two separate user groups while meeting client expectations challenged us to understand and balance diverse objectives, and in this process, we not only learned to champion user perspectives but identified user-centered improvements that aligned with broader business goals.
‍
Ultimately, our team was proud of the work that we accomplished within a short timeline, and gained valuable experience through navigating the ambiguity of a startup venture. We handed off our completed deliverables, which included annotated high-fidelity prototypes and wireframes, a spec document with a style guide and component library, along with suggestions for API integrations for the development of document scanning and map features. Our future recommendations include more targeted usability testing and building more on features such as messaging, search, and geofencing.