Fort Point
Beer Co.
An app designed to socialize & modernize beverage distribution
︎ 10 weeks
Role User Research ・ Visual Design
Tools Sketch ・ inVision ・ Google Docs
Collaborators Justin Catalana
︎RESEARCH・︎DEFINE・︎IDEATE・︎ DESIGN
CHALLENGE
Fort Point Beer Company, founded in 2014, prides itself on it’s exceptional fermented beverages, but also its homegrown distribution operation — which footprint serves customers in the greater San Francisco bay area. I was the Director of Logistics, at the time of this project, and we were wanting to create a next generation mobile interface our hard-working teams.
The teams consisted of utility logisticians, drivers, and sales personell.
GOALS
︎ Create a digitally native mobile app that maintains the strong brand identity of Fort Point
︎ Integrate real-time alerts and ease communication between teams
︎ Create on-demand printed receipts
︎ Enhance UI for a job that is highly fast-paced & behind the wheel
︎RESEARCH
IN-PERSON INTERVIEW
USABILITY TESTING
![]()
To gain a better understanding of pain points, potential opportunities, and possible feature sets — I setup a Google Form to collect responses about the current experiences with our responsive website ‘app’ called Camber Drive. I broke out the interview to include responses from drivers, logsitics technicians, and the managers of these teams.
Findings:
Application stability, reducing paperwork, more readily available customer information, and more user-friendly elements were the top requested items that came from these interviews. Managers requested that more accountability and automated calculations were created so that their staff can focus on the task in front of them. The current application is more of a text-based MVP & the next iteration should be more user-focused.
USABILITY TESTING
Although there was some value to designing this app from scratch, we were able to use WorkWave (our routing software) and their internal driver app to determine features that worked well for our operation; and features that did not. We were able to test out the driver app on a few of the more senior drivers.
Findings:
︎ Eagle-eye maps are important for planning future stops and finding ways to save time when looking for parking
︎ More stability with application log-in
︎ Estimated arrival time & predicted service time are important for gauging how you’re doing on your route that day
︎ Easier UI & heuristics when completing check-points during stop
︎DEFINE
To begin finding solutions to address what I found in research findings, I first wanted to breakdown each role that would be affected by any sort of updated solution. This is done to ensure that we are providing a balanced & effective product for any affected role in the distribution process.
ROLE-BASED PERSONA
ROLE-BASED PERSONA
Logistics Technicians (LTs) — Utility warehouse and truck loading staff. They are tasked with managing the inventory from cooler to truck. Their main responsibilities include:
- Making sure that trucks are properly loaded with the correct inventory
- Minimizing mispicks & damage
- Organization of the spatial components of a route — this can include packaged goods, event items, or sales materials.
Drivers — The speedy, yet safe, workforce that powers end-customer deliveries. They take a hands on approach to ensure that our brand is well-represented on a daily basis. Their main responsibilities include:
- Making sure that orders arrive in-full & undamaged
- Being the final face of the value chain of the ordering process
- Arriving to retail customers in a punctual, detail oriented, and customer-focused manner
Sales Representatives — The main contact point for accounts. They are tasked with managing these accounts, finding new retail accounts, and ensuring ultimate customer satisfaction. Their main responsibilities, in the context of distribution, include:
- Being the main intermediary between logistics staff & accounts
- Working alongside drivers to ensure timely, effective deliveries
- Providing contextual explanations if any sort of delay occurs
︎IDEATE
This app primarily sought to address the needs of staff who interact with the digital components of the distribution workflows on a daily basis. These include Logistics Technicians & Drivers.
Below are a few wireframes that served as early ideas for how we might improve the visual design of the front end experience for both roles.
LOW-FIDELITY WIREFRAMES
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
Below are a few wireframes that served as early ideas for how we might improve the visual design of the front end experience for both roles.
LOW-FIDELITY WIREFRAMES
Logistics Technician Interface
These frames were developed with more heads up information displayed at the forefront of the picking process. Each screen’s real estate sought to provide more information that allowed for staff to better understand the task that was before them. A few ideas focus on data visualization and providing the staff more information surrounding the outbound orders + routes. Also, a few of the screens display examples of a more visual way to identify product that needs to be picked.
Driver Interface
The driver workforce is primarily on-the-road & always moving. So a lot of the screens are focused on maximizing location data (maps, account pins) and easy to read breakdowns of order information. This logic is seeking to maximize the amount of information at the fingertips of the drivers and also to avoid any sort of misdelivered product to the end consumer.
Additionally, color status & iconography were installed to maximize adoption and follow the true workflow of these roles.
︎DESIGN
KEY FEATURES
![]()
![]()
HIGH FIDELITY MOCKUPS
![LT - Home]()
![LT - Route Picklist]()
![Driver - Home]()
![Driver - Route List]()
![Driver - Order Detail]()
HIGH FIDELITY PROTOTYPE
︎REFLECTIONS
This project was a special one for me, because I had been working directly with my family of colleagues at Fort Point Beer Co. for over 5 years. I knew that any sort of updates to this interface meant a direct impact & alleviation of stress to people that I had become quite close with over the years.
Furthermore, this was a capstone project that embodied all of what I had learned & baked into our unique distribution model. By going through the process of digitizing our many analog processes, the project gave me an outlet to systematically build out our product roadmap and alleviate a lot of painpoints for the hard-working staff that I worked alongside on a daily basis.
- Summarized & visualized data regarding the day’s pick
-
Prioritized lists that display orders that are large & need more attention
-
Adding features of gamification for both LTs & Drivers — Time stamps, micro-interactions (color-change)
-
Responsibility hand-off between LTs & Drivers (Added transparency for who loaded truck)
- Handheld printing of invoices for drivers and added payment application
- Small nods to official branding to establish a further sense of pride
HIGH FIDELITY MOCKUPS
HIGH FIDELITY PROTOTYPE
Logistics Technician Interface
Driver Interface
Head over to inVision to check out the
live prototype.
live prototype.
︎REFLECTIONS
This project was a special one for me, because I had been working directly with my family of colleagues at Fort Point Beer Co. for over 5 years. I knew that any sort of updates to this interface meant a direct impact & alleviation of stress to people that I had become quite close with over the years.
Furthermore, this was a capstone project that embodied all of what I had learned & baked into our unique distribution model. By going through the process of digitizing our many analog processes, the project gave me an outlet to systematically build out our product roadmap and alleviate a lot of painpoints for the hard-working staff that I worked alongside on a daily basis.
