PROJECT

Eyes on Eyes Optical

a web solution that allows users to book eye exam appointments online.

More Information
Project Timeline

September 2020 - February 2021

Tools

Adobe XD, Illustrator, WordPress,
Google Analytics, Google Ads

My role

Lead Product Designer - from concept to delivery

REsponsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, iterating on designs, search engine optimization, and search engine marketing.

the Problem

Eyes on Eyes Optical is an independently owned high-end optical store located in the heart of Vaughan with a large selection of designer eyewear. In addition to their collection of lenses and glasses, they offer a variety of eye care services. During the pandemic, the store lost a large number of walk-in clients, and could only book appointments through phone calls. The manual process took a large portion of their time during the day and lead to them losing clients as customers were not able to reach the store.

A design challenge emerged...

Designing a web solution focused on mobile experience with an online booking system.

the Solution

We designed a brand new website for the store focused on the mobile experience. We implemented a booking system that the store owner could control using a user-friendly interface, and the clients had the option to change or cancel their appointments. Through this process, we were able to increase their website traffic by 200% while reducing their monthly SEM budget by 50%.

But how did it all happen?

the Process

Effective user experience is only possible with a good understanding of the users. Not only do you want to know who they are, but you want to dive deeper into understanding their motivations, mentality, and behaviour. This deep insight into the users helps keep the product focused on delivering a great experience. For this project, I used a series of excercises to learn more about about artists and their needs.

  • User Research
  • Personas
  • Problem Statment
  • User Journey Maps
  • Competitive Analysis


A summary of the results can be found here:

Understanding the Users
Starting the Design

Once you have a clear idea of what the users need, I created a series of storyboards to identify the primary functionalities that the application requires to help users reach their goals. I then used a series of techniques to explore different solutions quickly, leading to a final low-fidelity prototype that can be used for a usability study.

  • Paper Wireframes
  • Digital Wireframes
  • Low-fidelity Prototype
  • Usability Study


A summary of the results can be found here:

After the Usability Study, the findings were converted into actionable insights and used as the basis for another round of iteration. Once the team was happy with the result, the design was updated using the gallery's brand identity guidelines to create mockups for each application page. A High-fidelity Prototype was made and delivered to the gallery for further testing. Based on the final version, a series of Accessibility Considerations were given to the customer to consider for the next steps of the application.

  • Mockups
  • High-fidelity Prototype


A summary of the results can be found here:

Refining the Design
Implementation Phase

After the Usability Study, the findings were converted into actionable insights and used as the basis for another round of iteration. Once the team was happy with the result, the design was updated using the gallery's brand identity guidelines to create mockups for each application page. A High-fidelity Prototype was made and delivered to the gallery for further testing. Based on the final version, a series of Accessibility Considerations were given to the customer to consider for the next steps of the application.

Takeaways

Impact

I was able to not only increase the natural traffic of their website by 200%, but at the same time, managed to reduce their monthly SEM budget by 50%.

Reflection

To get the client’s buy-in, I had to ensure that the customer felt involved in the discover and define stage and could see for themselves where they had gone wrong in their current product. By showing them the user study and market research findings, they could understand how and why their competitors were so ahead of them. Through this process, I was able to build trust with them that helped me make certain decisions that they might not have been entirely comfortable with, but also use their expertise in their field and understanding of their customers to generate ideas on how to tailor-make their product for their desired customer.

How did I get the client's buy-in
Number One

During the discover and define stage, I Involved the client in the research process and showed them the competitive analysis findings so they understood how their competitors were ahead of them.

Number Two

I walked them through their customer journey and the touchpoints that were causing customer dissatisfaction to help them prioritize features that would create the highest return on investment and eliminate tools that are not creating business value.

Number Three

During the design and prototype stage, I created mockups to get their feedback while testing and validating our assumptions which were inputs into the final website that I developed from scratch.

Scroll back up