Case Study


Work bi petro

The Challenge

With over 50 years of experience, Bi-Petro, Inc. purchases, sells, and transports crude oil from wells located in the Illinois Basin, a large crude oil deposit that covers most of Illinois, southwestern Indiana, and into western Kentucky.

Bi-Petro had a very outdated website that needed a facelift. Our challenge was to design and build Bi-Petro, a new, custom responsive website with a content management system.

The Solution

We wanted Bi-Petro's new website to highlight their dedication to customer service, and create a more user-friendly, interactive interface for customers to view oil prices. We also added the following new features:

  • Careers page (Mainly hiring truck drivers) listing available positions
  • Employee bios and photos
  • Company timeline with 10-15 highlights of history

    In order to design a website that would be optimally designed with the end-users in mind, we needed to understand Bi-Petro's core business model and audiences. To begin the project, we researched and drafted an extensive report outlining the key objectives, challenges, and audience personas, and micro-moments for Bi-Petro's website.

    Comprehesive report outlining the key objectives, challenges, and audience personas, and micro-moments for Bi-Petro's website

    Comprehesive report outlining the key objectives, challenges, and audience personas, and micro-moments for Bi-Petro's website

    Next, we designed the information architecture in Whimsical to plan out how content on the site would be structured and organized.

    Information Architecture outlined in Whimsical

    Information Architecture outlined in Whimsical

    Once we had established the architecture for the site, we moved on to wireframing and design using Figma. We explored a variety of color palettes and created mood boards to compare combinations of fonts and styles for our design.

    Work bipetro figma exploration

    In the meantime, sketching out the structure of each page in grayscale helped us to focus on a content first approach.

    Work bipetro figma wireframes

    After wireframing and selecting the best color, font, and style combinations, we transformed our sketches into high fidelity designs, before handing them off to our development team to begin coding.

    Bipetro designs homepage mobile

    Bipetro design history

    Moving into development, we carefully planned out our Craft CMS structure to ensure an optimal author experience before beginning front end development using Tailwind.

    A Dynamic Duo: Chart.js and Sprig

    A particularly fun challenge on this site was coding the Oil Pricing page. The new page would allow a user to input a date range and do the following:

    1. Get all the oil prices for the entire range output to the screen
    2. See a graph of the oil prices in the range
    3. Download a CSV (comma separated value) file of all the oil prices in the range

      While the page on Bi-Petro’s old site technically worked, the technology behind the page was 10 years old and painfully slow.

      In our mind, this was a perfect use case for Chart.js. An open source community maintained project, Chart.js was an easy way to generate animated, interactive graphs through HTML5 based JavaScript. With such a vibrant community and a codebase that started in 2013 it's a wonder that it wasn’t used on this site in the first place, but we jumped at the chance to remedy that.

      On the old Oil Pricing page, the page came up empty and required user input to show what it could do. With our new iteration, we wanted the page to show it's worth on first sight. Setting appropriate default values and loading the prices and graph right away now shows the user everything the page has to offer at first glance and entices them to interact with the product.

      Knowing that this particular page would have high engagement, we felt it was especially important for it to be extremely reactive and highly performant. Having the page refresh after every input change would take the user away from interaction and be a more jarring experience, risking abandonment and less time spent on page.

      To avoid this, we leveraged Sprig, a free Craft CMS plugin created by PutYourLightsOn. In their own words:

      "Sprig allows you to create reactive components from Twig templates and/​or PHP classes. These components can re-render themselves on user-triggered events (clicks, changes to input fields, form submissions, etc.) using AJAX requests, without requiring you to write a single line of JavaScript."

      Sprig enabled us to create the feel of an SPA (single page application) to our dynamic Oil Pricing page. With great documentation, and videos and articles for support, Sprig is a delight to work with.

      A Custom Craft Plugin for Easy CSV Exporting

      Happy with how the page looked, felt and ran, we simply needed to allow the user to export the data that they had created to a CSV file. On the Bi-Petro site, we were dealing with oil prices and the math behind that to deliver information. Early on we decided that we should build out a custom plugin so that our templates could simply call a function and return a value when necessary, offloading the math and processing to the server side php. What that looks like in code is calling this variable function in twig, and getting back a number (float) to use on the front end.

                                      {% set currentPriceChange = craft.bipetroExtrasModule.getDailyPriceChange(newestOilPrice) %}

      Since we already had a plugin, leveraging it in order to create a csv file made a lot of sense. Creating a CSV file in PHP is very efficient. The function in our custom plugin can be called from a form in our twig template that looks like this:

                                      <form class="mt-8" action="{{ actionUrl('bi-petro-extras-module/default/download-file') }}">
          {{ hiddenInput('startParam', startDate|atom) }}
          {{ hiddenInput('endParam', endDate|atom) }}
          <input type="submit" class="primary-button cursor-pointer" value="CSV Export">

      Once clicked, it feels as though the download is instantaneous.

      With that part of the equation figured out, we were finally satisfied with the Oil Pricing page. The end result is a beautifully designed set of data and great user experience.

      Work bipetro oil pricing

      Ready to get started?

      Every day we help companies like yours create and maintain websites and web-based applications of all shapes and sizes. On time and on budget.

      Get Started

      More Case Studies

      We work with our clients everyday to create digital projects that require exceptional strategy, design, and development solutions.

      Out of the Shadows

      Out of the Shadows

      Web Development with Craft CMS, Data Visualization

      Read Case Study

      Piccolo Buco by Cooper's Hawk

      Piccolo Buco by Cooper's Hawk Winery & Restaurants

      Web Development with Craft CMS

      Read Case Study

      Esquire by Cooper's Hawk

      Esquire by Cooper's Hawk Winery & Restaurants

      Web Development with Craft CMS

      Read Case Study

      Finally, stress-free web development.

      Ready to partner with a team as interested in your success as you are? Reach out today for a no-pressure consultation.

      Get Started

      I highly recommend working with Clearfire if you are in need of a new website (or if you are revamping a current one). The talented Clearfire team spent a lot of time at the beginning of the process listening to our challenges. They then presented us with thoughtful solutions. They are prompt to respond to any questions and are just delightful to work with all around."

      The Clearfire team is timely, professional, and extremely creative. We discovered them during a critical time soon after our global website launched, and when our previous agency had abandoned the project. Clearfire was there to our rescue and immediately settled into the project efficiently and productively, as if they had been working on the site from the beginning. They have not only corrected a lot of oversights but have taken the aesthetics and functionality of the site to the next level. Lastly, and most importantly, they are extremely pleasant to work with and take a collaborative, very personal approach to every project – big or small."

      © Copyright Clearfire, Inc. Springfield, Illinois | Privacy Policy | | (217) 953-0321