For inquiries, please contact
info@brycekirk.com

Case Study

McKeil Marine

McKeil Marine is a shipping company operating across the Great Lakes, St. Lawrence Seaway, east coast and Canadian Arctic since 1956.

McKeil Marine - Huron Spirit

Photograph courtesy of mckeil.com

McKeil Marine logo

The Project

Details

McKeil Marine brought me onboard, via Toptal, to design and develop an internal web application used to track and record McKeil’s shipping fleet.

Key Requirements

Create an internal application to replace the current mediums of spreadsheets and email, streamline trip management process and gather data to increase efficiency.

Team

Bryce Kirk: UI design, development / Sean Wu: SQL development / Tim Livingston @ McKeil Marine: Project management, SQL development

The Execution

Don't Reinvent the Wheel

I selected Google’s Material UI because of its modern look, large number of available web components and active developer support. No library is going to cover absolutely everything, but Material was a good place to start. From here I built out additional components and made extensive customizations to ensure the app had a cohesive look and every action felt native to the UI.

McKeil Marine - New Trip McKeil Marine - Variance Reports McKeil Marine - Trip Log

The Perfect Environment

Ensuring my environment took advantage of the latest and greatest in web development meant sourcing the best tools out there. That included Git for repo management, Node.js for package management, Webpack and Babel for Javascript compiling and modular SCSS stylesheets.

Node.js
Webpack
Git
Babel

Application Data Flow

SQL stored procedures manage most of the data processing, but I still needed an efficient way to communicate with them. To do this, I set up a number of asynchronous javascript functions that listen for changes in the UI. As soon as a change occurs, the appropriate arguments are sent to a PHP handler which calls the database and returns formatted JSON back to the frontend, where it’s parsed, sorted, looped and displayed on the UI. Easy-peasy, right?

McKeil Marine - App Data Flow

Lightning-Fast and Asynchronous

Database calls occur upon most app actions, which means a lot of asynchronous activity going on. Thankfully, Babel compiling allows confident use of ES6 promises. These were used extensively to keep the UI functioning as data is being processed in the background.

McKeil Marine - Lightning-Fast and Asynchronous

Modular Development

With well over 10,000 lines of code, intuitive project structure is more than a nice-to-have; it’s a requirement. I took full advantage of ES6 imports and exports, building a structure of component functions and templates. BEM naming convention was used for HTML and SCSS, and in select cases JSON files were used to dynamically generate entire pages for easy updating in the future.

McKeil Marine - Code Promise McKeil Marine - Code Structure

The Finished Product

Intuitive, Efficient and Downright Pretty

The finished product is easy to use, lightning-fast and beautiful to look at at on any device. With their new application, McKeil Marine’s vessel and shore staff are now able to seamlessly manage the entire trip process from one location.

Modern web tools develop at a break-neck pace, and if I had to build this from scratch again, I would do a few things differently. But that’s the beauty of web development; it’s always evolving, and so am I.

McKeil Marine - Website Mock
Tim Livingston

“In mid-2019, McKeil set out to build a web-based internal data capture tool, named WhiteCap, across our entire fleet of transportation ships, tugs, and barges. A key piece of the puzzle was to have the user interface be extremely intuitive for the crew on board our vessels, while maintaining very specific and complex functionality. We interviewed several front-end developers for this crucial role, and Bryce immediately stood out with his upbeat attitude and impressive portfolio.

From day one, Bryce was an outstanding member of the WhiteCap team. He asked thoughtful questions in our kick-off meeting, and his initial prototypes for key pages of the data tool blew us away with their clean look and easy-to-use interface. Bryce was always responsive to emails and calls, asked great proactive questions, and was always game to take on and nail a new technical challenge.

We completed the WhiteCap project right on schedule and with more functionality than our initial design document. Everyone at McKeil, from our vessel-based crew right through to our President is very happy and impressed with the work that Bryce did. It was a true pleasure to work with Bryce and I wholeheartedly recommend hiring him – it will be one of the best decisions you make for your next project.”

— Tim Livingston, Former Director of Analytics, McKeil Marine

Let's Build Something

Consulting, design, and development. Whatever your requirements are, I can help you find the right solution. It all starts with a conversation.

Get in Touch