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.
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:
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
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
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.
In the meantime, sketching out the structure of each page in grayscale helped us to focus on a content first approach.
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.
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:
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.
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.
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.
We work with our clients everyday to create digital projects that require exceptional strategy, design, and development solutions.
Ready to partner with a team as interested in your success as you are? Reach out today for a no-pressure consultation.
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."
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 | hello@clearfirestudios.com | (217) 953-0321
