case study
Planning and launching the Fuel Recovery platform
Headway guided Breakthrough with design discovery, web development, and launching Fuel Recovery, the transportation industry's only market-based fuel reimbursement solution.
services
platforms
Web
Noteworthy
Industry
Helping Breakthrough build award-winning products
Breakthrough has been named to Fast Company's prestigious annual list of the World’s Most Innovative Companies for 2021.
Breakthrough ranked at #6 by FreightWaves for the 2024 FreightTech 25 list.
Client Testimonial
"If you are looking for a team of talented product development specialists, Headway will exceed your expectations and help you get your product to market faster and better."
Lisa Knuth
Senior Director Product Development at Breakthrough
Challenges
Breakthrough Fuel has been in the business for the better part of ten years building onto their current system. They kicked off an internal transformation project to discover a way to bring all of their applications together and create new products to serve their market.
Turning complex information architecture into product ideas
Fully understand their specific and difficult logistics fuel recovery program and start to imagine how it could be turned into scalable software.
Design a solution to scale their process
Help dissect and design a new tool that empowered their customer account managers to do strategic work instead of solving minor problems.
Build and launch an MVP that their teams can maintain and grow
Create a new platform that connects their current systems - that way, their internal development team could get out of support roles and into feature and product development.
Collaborating with a large distributed team
This project was accomplished by multiple partnerships and organizations in order to achieve business goals within specific timelines. Between data migrations, design, front-end development, cloud infrastructure, and the system pipeline, the collective team was large and distributed remotely. We were one of the many agencies and independent contractors on the project, along with a large presence from the internal Breakthrough team.
Validating solution concepts together
At Headway, one of our key processes when kicking off a project is going through Expedition. This process allows us to understand the depth of a problem through established frameworks and tools. It helps the team identify risks, opportunities, and create a clear path forward together.
Product and brand alignment
The first area that we identified was transparency. In today's procurement process, there is a lack of transparency between shippers and carriers, which leads to distrust. To be able to build trust, there needs to be transparency between both the shipper expectations and what a carrier is capable of accomplishing, i.e., do they have the right equipment and insurance to carry the load I am offering. If we can create a place where a shipper and carrier can look at each other's organization and see what type of safety ratings, insurance, equipment type, service expectations, accessorials, and collaterals, this helps create transparency into each others organization.
Understanding the scope of work
When we first kicked off the project, we met with the Breakthrough team that was in charge of digital transformation. They had already put in about ten months of work gathering current tools, workflows, and user personas. We took the time to review all of these personas in detail and ask questions to better understand the space.
Identifying the gaps
With the Breakthrough team, we quickly grasped the scope of the new platform. The old platform needed a large development effort to onboard new customers. While not abnormal for many businesses, we began to see how disconnected the current workflow was. They needed multiple apps to solve customer problems or come to investigative conclusions.
Empowering users to solve problems
The older platform was a set of tools only used by the internal team, with communication happening via email and exported spreadsheets when a customer needed details. Going through the extensive and detailed work the team at Breakthrough already completed, we were able to identify how to bring the platform to a modern standard and allow their customers to solve issues.
Serving multiple customer experiences
With multiple customer types needed, we had to consider each user scenario while designing out the solution. Rather than building three different platforms to serve separate users, we planned to build a single platform. Depending on your role and user status, you could do more work, see more data, and have access to more features.
Setting a vision through design
While working our way through creating an application map and personas, our design team gathered key images together to set a vision for the platform.
At the start of the project, we had three designers working through quick wireframes we mocked up. We took those wireframes and created high fidelity mockups to present to the team at Breakthrough. In collaboration with the Breakthrough marketing team, we ended up merging a few of the design elements together to come up with the final look - a dark interface.
At the start of the project, we had three designers working through quick wireframes we mocked up. We took those wireframes and created high fidelity mockups to present to the team at Breakthrough. In collaboration with the Breakthrough marketing team, we ended up merging a few of the design elements together to come up with the final look - a dark interface.
Helping users never lose their place with dynamic navigation
The next phase was to create prototypes for testing out the core actions. One of the largest complaints from the internal team was that they could easily lose the context of where they were in their current toolset.
To address this we created a few key navigation elements to cover this. These "blocked" out prototypes were just black and white blocks with quick interactions so we could do a proof of concept. Through testing with the Breakthrough team, we landed on a panel approach.
To address this we created a few key navigation elements to cover this. These "blocked" out prototypes were just black and white blocks with quick interactions so we could do a proof of concept. Through testing with the Breakthrough team, we landed on a panel approach.
Preparing for production
With the Breakthrough team, we created a full application map and built a high fidelity prototype. With a positive outcome from our prototype validation, we began building the design system and moved toward design and development production on the project.
Scaling design efforts
Breakthrough needed a tool to build a robust design system - one that could have multiple areas and scale across a single product, as well as a family of products. Using Figma, we were able to build a multi-tiered design system using the power of linked libraries.
The design system
We created a multi-tiered UI kit to accommodate the scale of the project. Without it, we ran into file size limitations and we knew we needed to distribute our system across multiple files. The icon kit, core design system, data visualization library, and pattern libraries for specific products all needed to be in their own files. Using linked libraries in Figma, we were able to keep our file sizes small by sharing what we needed.
Efficient UI development with Storybook
When development initially began, our development team relied on Storybook to work closely with Breakthrough and the design team to ensure components came to life, and matched our shared vision. This significantly shortened our feedback loop and let us work in much tighter iterations than we could in the past.
Creating no-code solutions
When customer data comes in the legacy system, it goes through a series of rules to combine the data into a workable format. These rules are unique to each customer, and were originally built by a developer every time a new one was needed.
We brought this rule system to the interface to make it useable for internal users without having to write code.
We brought this rule system to the interface to make it useable for internal users without having to write code.
Omnibox and natural language
We knew one thing - most of the data will hit the default configurations for each customer. Knowing this, we came up with the idea of calling these exceptions. We initially started with a flow chart that allowed users to make simple adjustments off of nodes. As a team, we liked this solution but thought it might be better suited for later in development.
We also looked at things like, If This Then That (IFTT), and other tools with similar functions. We then thought about how the Google search bar worked. If we took the current rules and used some natural language and type ahead, could we develop something that could be replicated? Say, if someone were to just naturally say the exception they wanted to execute.
We worked through a few scenarios and developed out some initial language that felt natural. We also built out a few prototypes and validated them with the development team. We were able to take something that traditionally was lines of code and build out a tool that basically anyone on the team could use. This allowed them to target specific elements of the data and trigger new events.
We also looked at things like, If This Then That (IFTT), and other tools with similar functions. We then thought about how the Google search bar worked. If we took the current rules and used some natural language and type ahead, could we develop something that could be replicated? Say, if someone were to just naturally say the exception they wanted to execute.
We worked through a few scenarios and developed out some initial language that felt natural. We also built out a few prototypes and validated them with the development team. We were able to take something that traditionally was lines of code and build out a tool that basically anyone on the team could use. This allowed them to target specific elements of the data and trigger new events.
Visualizing the load
They needed to visualize what data would look like going through the system. A comprehensive load view was designed to allow users to walk a load from the ingestion all the way through final reporting. This would allow a user to see which configurations were hit, and where.
Configuring for flexibility
The level of configuration needed in the old system was extensive. However, most of it wasn't surfaced to the team that was working directly with customers. We had a challenge to take a process that was normally driven by developers and move it to the user interface. This would allow users to drive these configurations without having to get developers involved.
Extensive configurations and overrides
These complex configurations alone were a large undertaking in order to create a comprehensive experience. The needs of the customers required some additional levels of complexity. We built the omni-box to handle exceptions, but we didn't want all of the outliers to live there.
We worked closely with the pipeline team to design a system of overrides that allowed us to target very specific elements that could be overwritten. These overrides allowed the team to handle most of their customizations instead of using powerful exceptions.
We worked closely with the pipeline team to design a system of overrides that allowed us to target very specific elements that could be overwritten. These overrides allowed the team to handle most of their customizations instead of using powerful exceptions.
Client Testimonial
"Headway has outstanding, talented team members who bring energy, passion, skill and creativity to the effort each and every day!"
Lisa Knuth
Senior Director Product Development at Breakthrough
Securing data
One of Breakthrough's most valuable assets is their customer data - so it was critical to make sure that data was properly secured. Users needed to be able to see data from multiple customers at the same time, but ensure a clean separation between each customer. Users also needed to ease into the platform through their role, using what they were specifically trained on.
Permission and data grants
User profiles need to be granted permissions to various capabilities in the application. Breakthrough needed to be able to control which users had access to what data, at a very nuanced level. On top of the features you had access to, specific data was granted and controlled by the customers. This way, we could control access and data manipulation at a very fine level.
Something unique to the FELIX platform is that users can have different roles associated with different customers, or even data within the same customer. For example, a user may have access to reports across an entire customer, but only be allowed to edit a small portion of that customer's data. This made adopting a traditional approach very difficult - so we built authorization from the ground up to create an extremely flexible system that supports the strength of Breakthrough's business.
Something unique to the FELIX platform is that users can have different roles associated with different customers, or even data within the same customer. For example, a user may have access to reports across an entire customer, but only be allowed to edit a small portion of that customer's data. This made adopting a traditional approach very difficult - so we built authorization from the ground up to create an extremely flexible system that supports the strength of Breakthrough's business.
First customer product launch
One of the first products to launch was a new Fuel Rate Lookup tool, which allowed customers to get price estimates on their lanes. This tool was a great first release out to the customer base, and allowed us to get great feedback. Through that feedback, we were able to improve the single lookup, since we were operating under the assumption that most users were doing batch uploads.
We help solve the complexity of B2B businesses
Building a platform of this scale was, and continues to be, an exciting endeavor for Headway. Transforming a complicated industry through design direction, development support, and an entrepreneurial mindset with a forward-thinking team has been a fulfilling experience. Our collaborative efforts improved their team's workflow and empowered their customers.
Book a call to see how we can help you.
Book a call to see how we can help you.
