Clearly.ca

Web Design — Internship
Summer 2019

A redesign of how Clearly.ca lists brands for eyeglasses and sunglasses. The addition of new brands presented an opportunity for a more visual approach.

Responsibilities
Web Design, Prototyping, Dev Handoff

Tools
Sketch, Zeplin, CodePen

Skills
UX Design, A/B Testing

Since my internship at Clearly was to be a short one (two months), I worked closely with my manager to identify opportunities for me to apply my skillset which were appropriate in scope. One of them was the redesign of the Brands pages on Clearly.ca.

After a debrief from the product managers, and a quick collaborative audit of the original design (above), I determined three factors I wanted to prioritize for the redesign:

• Brand Forward — The page needed more imagery, certainly, but it needed to highlight more recognizable brands as well as the in-house ones to communicate the premium nature of Clearly’s offerings.

• Resilient & Mobile Friendly — The design needed to maintain integrity over time (by being responsive to changes in art direction & brand offerings), and over all devices (by being ...responsive)

• Human & Robot Friendly — This part might look like it’s more relevant to devs or content strategists, but I made sure to collaborate with both teams to ensure that the design can adapt to their needs, from a clean hand-off to collaboratively sketching wireframe layouts.

 

The Answer

At the end of the 5-day sprint, the page was redesigned, the content was created, and we were live. Here’s the page:

Right off the bat, I wanted to highlight some premium brands like Ray-Ban and Oakley, which were recent gets for Clearly at the time.

Clearly provides an all-encompassing experience when it comes to vision care; from retail locations with optometrists, and cutting the lenses to prescription, installing, & shipping, to the virtual try-on on the website. And although addition of any imagery would’ve been a welcome change, it was important to highlight lifestyle images to emphazise the kind of relationship the brand hopes to have with their customers. I led the discussion with the content team regarding this unanimous agreement.

The Lego-brick-like layout of the cards was designed to lend itself seamlessly to a tall, mobile friendly column. In addition, the inclusion of the logo in each card meant that content strategists could be free to choose more adventurous lifestyle images for each brand without sacrificing the communication. It’s a simple solution, but it highlights the brands effectively, while maintaining Clearly’s own brand, however minimal it may be.

The new design made room for links to other pages to optimize search engine performance, of course, but it also gives the customers another page to visit after scrolling to the end of this one. After the new version went live, the pages saw a significant increase in time spent on page as well as a dip in the bounce rate over the next week. 

This was the quickest a project I’ve worked on has gone live (5 days after receiving the brief), and it was of utmost important to me to keep all channels of cross-team communication as open as possible. I believe that the key to crossing the finish line fast and strong was to consistently iterate and validate with the content and dev teams. In addition, having worked in content and development myself in the past certainly helped me maximize the design’s potential from both a UX and SEO perspective.