Fleetral
Designing an End-to-End Fleet Management Solution
2020–2021, Freelance, Web App
2020–2021, Freelance, Web App
2 Project Managers
2 Product Designers
3 Developers
May 2020 - Mar 2021
11 Months
Figma
User Research, Design System, Wireframing, Mockups, Prototyping, User Testing
Team — 2 Project Managers, 2 Product Designers, 3 Developers
Timeline — May 2020 - Mar 2021, 11 Months
Tools — Figma
My Role — User Research, Design System, Wireframing, Mockups, Prototyping, User Testing
Fleetral was originally conceived as fleet management software to help companies track carbon emissions and go carbon neutral. For the first release of the app we worked together with our first customer Roulston's Pharmacy to design and deliver the core functionalities like creating and scheduling orders.
I was responsible for leading all facets of design for the MVP of this product. We successfully shipped Fleetral 1.0 to our customer that allowed dispatchers to schedule orders for delivery to their drivers. The app is currently still in production.
In May of 2020 I teamed up with two entrepreneurs from the company ReadyBloom to design a fleet management product for one of their customers, Roulston’s Pharmacy. We started this project in the early months of the pandemic when many elderly residents were in lockdown and couldn’t pick up their medication from the pharmacy. Our challenge was to design a straightforward delivery management solution that could get these residents their medicine when they needed it.
We also wanted to design the product in a way that in the future, we could expanded upon the mvp to include tracking carbon emissions for their drivers.
I was responsible for overseeing the entire design process from initial concepts through to implementation.
We worked together with a key stakeholder from Roulston’s pharmacy in Simcoe responsible for creating the delivery schedules for their drivers. This was a critical step in our design process as it gave us insights into the needs of both the scheduling manager as well as the drivers themselves. We worked together with this stakeholder to develop a list of core functionalities that we would need to create a minimum viable product we could put into production.
A brief overview of the key functionality that we agreed on with Roulston’s to meet the requirements for a minimum viable product.
Schedule Deliveries
This first step in the delivery process is scheduling the orders. Managers need a solution that lets them easily assign orders to their drivers. There will likely be additional functionality that is key during this step such as importing orders.
Dispatching
After the orders have been assigned they are organized into routes and sent to the drivers. Route optimization is something we should consider. However, many drivers prefer not to use optimization and as such this feature should be optional.
Track Analytics
Finally managers need a way to track analytics for their fleet to plan for the future. This is key for measuring driver capacities and performance. Carbon emission tracking should be considered a stretch goal.
The first design deliverable I worked on was developing a visual brand for the product. The core messaging and idea behind the brand revolved around helping companies work towards making their fleets' carbon neutral as this was the direction we wanted to eventually grow the company. Fleetral was the name I was provided with, a combination of the words fleet and neutral. Building off this idea I developed brand around the idea sustainability and the helping the environment.
I experimented with different versions for the login screen. I used the design of this screen to test out initial ui components as well as to establish the look and feel for the product.
Most of the user actions on the platform I tried to keep as simple as possible. The core user actions are achievable through straightforward modals.
Navigation is another area where I explored a few ideas. I ended up opting for a sidebar that would expand or collapse on hover.
We conducted usability testing with our partners at Roulston’s responsible for scheduling and sending orders to their drivers. We attempted to chose the most important flows in the product to try and validate our design solutions as best as we could. Below I’ve listed some of the key user flows we tested for. Overall our testing was a massive success, only requiring minor design changes to assigning a driver to an order.
– Creating an order
– Assigning a driver
– Importing / Exporting
– Creating a route
– Sending a route
– Filtering
Creating and scheduling orders is the core functionality of the product, and as such I wanted the experience to be as straightforward as possible for managers. I opted for a layout that uses a table displaying all active orders that can easily be sorted and filtered by key data points like driver or order status.
Creating or deleting an order is as simple as clicking a button. Closed orders can also be viewed on this screen by clicking the tab at the top.
Dispatching orders to drivers for most companies is not a linear process. Some organizations schedule drivers first and then organize their orders into routes, where others will create the routes first and then assign drivers to them.
It is for this reason that we decided to add the map screen, separate from the orders screen, where managers can organize either assigned or unassigned orders into routes and even reassign them if necessary. Routes can then easily be sent to drivers. Both the orders screen and the map screen are accessible at any time throughout the scheduling process.
To help create a sense of consistency across the product, I designed the analytics page to keep the same basic structure as the orders page. This dashboard is primarily used by managers to get an overview of performance as well as to plan for the future. Managers can view metrics for the entire organization or filter by specific driver. This provides users with a more holistic understanding of their delivery fleet.
In addition to leading the design for the product, I also helped to design a landing page for the company. When we designed the product, we had only established very rudimentary design elements for the brand like the logo and color palette. When it came to designing the website, I had to expand on this a bit and think more about additional design elements we needed such as imagery and graphic assets. I used the same approach for this as I did for establishing the initial brand, by using the idea of sustainability as the guiding principle.
After the design was complete, the decision was made to hold of on implementing a marketing website for the time being, and instead use the development resources on the product itself. As such, the design for this website remains a proof of concept.
We deployed the first version of fleetral to Roulston’s systems in March of 2021 and it has remained in production since. As a company fleetral is actively pursuing other customers and investors based off the mvp product that we created.
Overall I found this to be an incredibly rewarding project to work on. While this was a side project I took on in addition to my day job, I ended up gaining valuable insight into the product development process. This was my first time leading all facets of design on a digital product, as well as my first time creating a design system from scratch, both of which were invaluable experiences.
