Mockups of OCS website

Office Coffee Solutions

Web Development
I helped optimize a lead-generating website for a Profit 500 coffee company, resulting in 100% increase in web leads and topping search rankings for coffee services in the Greater Toronto Area.
Maggie’s detail-oriented nature and ability to predict needs throughout the design and development process proved to be invaluable assets in our project.

Liam Pelchat, Director, Art & Digital Media

Office Coffee Solutions

My Role
Web developer & responsive debugger

Built mockups into a Jekyll website; performed responsive QA and debugging

TEAM

Liam Pelchat, Director, Art & Digital Media

Office Coffee Solutions
TOOLS
Visual Studio Code, Jekyll (HTML/CSS/Liquid), JavaScript, Sketch, InVision
Office Coffee Solutions was rebranding and needed a new website to accompany their new image. I was hired on contract to develop the Art Director's vision into a fully responsive, cross-platform-optimize website.
Office Coffee Solutions is a Profit 500 coffee and tea distribution company based in Toronto. As one of Toronto's fastest-growing and most sustainable office kitchen service providers, it provides full kitchen solutions to a large fraction of this burgeoning city's advertising, marketing, technology, educational, and entertainment organizations.

Process

Our focus for this project was making the website performant and responsive across platforms. To do this, we built the site using Jekyll and vanilla JavaScript, without heavy libraries that would weigh down page load.

Performant design & development

Since the website contained lots of high resolution images and some videos, its code needed to be efficient to be quick-loading and performant. As a result, we avoided large Javascript libraries, and I coded many interactive elements in simple CSS and vanilla Javascript.

In addition, for better Search Engine Optimization, we used Jekyll and its accompanying Liquid framework to build a site that would compile like a web application but deliver fast, static HTML pages.

A mobile menu for thumbs

One of my primary contributions was the design and development of the mobile menu. The rest of the website had an optimistic, retro-modern feel, afforded by its use of Futura as the primary font, bright bold colours, and quirky tone of voice. To match this perky style, I designed a mobile navigation bar that was rounded in shape, with a large, friendly hamburger menu button. For ease-of-access, the menu bar also includes one-tap contact buttons that would allow the mobile visitor to immediately call or email the company. To save space, the top bar slides up out of view once the user scrolls down, and reappears if they scroll back up.

Javascript forms and lightboxes

To enable fast loading and responsive interactions, the majority of the features on the website eschew JQuery and other weighty Javascript libraries in favour of features written in vanilla Javascript and CSS.

The lightbox design was ultimately chosen as a requisite feature because they allowed users to browse information about specific brewers on the Equipment page without leaving the website and thus breaking the flow of interactions.

View Other Projects

Youth & Philanthropy Initiative
Web Design & Data Visualization
Environmental Certification Platform
UX Design

Want to get in touch?
Drop me a line!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.