As part of Office Coffee Solutions' rebranding initiative, I designed and developed cross-platform menus, modals, and pages, using Jekyll on Ruby to render static HTML templates.
This project required working directly with the company's Art and Digital Media Director, using Git/Microsoft Visual Studio Team Services for version control, and debugging cross-platform issues, and streamlining the site for efficient resource loading.
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.
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.
Skills & Tools
Performant Design & Development
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.
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.
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.
Finally, much of the project was spent discovering browser quirks and modernizing stylesheets to meet the limitations of different platforms, including the most popular generations of mobile and desktop browsers.