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">
      </form>
                                  

      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

      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

      We trust Clearfire to help guide our busy marketing team in website design, customer journey, and development strategies. They take the time to listen and understand the challenges we’re facing to provide both design and revenue growth deliverables. As a result, our website goes to work for our business and gives us positive measurable results."

      Jill Carpenter, Cirrus Insight

      Our statewide organization was in a tremendous need of an updated website. Clearfire took the time to understand the coalition's unique needs and developed a site that benefits our member centers and also provides critical information to the general public. Our site is significantly easier to maintain now, allowing us to reach our members more efficiently and provide them with greater resources. Clearfire was great to work with and we look forward to working with them again in the future."

      Sean Black, Illinois Coalition Against Sexual Assault

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