McKeil Marine is a shipping company operating across the Great Lakes, St. Lawrence Seaway, east coast and Canadian Arctic since 1956.
McKeil Marine brought me onboard, via Toptal, to design and develop an internal web application used to track and record McKeil’s shipping fleet.
Create an internal application to replace the current mediums of spreadsheets and email, streamline trip management process and gather data to increase efficiency.
Bryce Kirk: UI design, development / Sean Wu: SQL development / Tim Livingston @ McKeil Marine: Project management, SQL development
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.
The Perfect Environment
Application 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.
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.
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.
“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