Maple B2B Website

Surprisingly, this project started as a low-fidelity wireframe made in Excel. As Canada’s leading telehealth company for the public and private sector, Maple needed to update its B2B website to stand out from its B2C site. A fully fleshed-out prototype created in Figma was the way to achieve this.

Website Design • User Experience

Maple Health B2B Website Desktop Mockup

I created a medium-fidelity wireframe that focused first on impactful typography to highlight key stats and features that businesses would be interested in. Secondly, I implemented a card system that could be used for displaying different forms of content. “Industry cards” are used on the home page so that viewers can quickly find the content that is relevant to their needs.

Maple Health B2B Website ConceptsMaple Health B2B Website Navigation Update
Maple Health B2B Website Architecture Flow Chart
Maple Health B2B Website Medium Fidelity Wireframes

Maple currently has quite a few sites, so the web dev team and I took a thorough look at the overall navigation to keep web pages organized. We iterated a few site architecture possibilities until we landed on what was clearest to our viewers. The B2B navigation is divided into two to reflect the two main partnerships; Business solutions for the private sector and Care Delivery for government institutions.

Maple Health B2B Website Tablet Mockup

Once the wireframes were approved, I collaborated with an Art Director, Jeff Punz, to finalize the designs. He took an editorial approach using engaging photography while I was inspired by pharmaceutical designs such as pills and bottles. Lastly, we created a website design system guide outlining how the B2B site feels part of the Maple website family, while showing our decisions in making a unique experience for its target audience.

View the full website here.

Maple Health B2B Website Design System

Client • Maple Health
Date • May 2021

Art Direction • Jeff Punz
Copywriting • Guillaume Morissette

Maple Health B2B Website Additional PagesMaple Health B2B Website Excel Sheet Wireframe
Lehwatch Fashion Brand Black and White Wordmark Pattern

Next Project

Arrow Right