Boris & Horton

Creating a mobile-first solution for a unique dog-centric space to better serve its growing community and support long-term business goals.

Fostering a dog lover community

Boris & Horton was created to provide dog enthusiasts with an amazing café and community space to enjoy alongside their four-legged friends. As the community expanded, Boris & Horton owners realized that optimizing the website was critical to the business’ long-term growth and well-being.

Over a period of 2.5 weeks, I worked alongside 3 other UX Designers to revamp the Boris & Horton website to advance both user and business goals, and to bridge the gap between the Boris & Horton in-person and virtual experiences.

Problem

Based on our research, we found that Boris & Horton website visitors felt overwhelmed by the content and layout of the website. Users need a way to efficiently connect with the cafe's dog community. 

Original Site Homepage

Solution

Through synthesis of data, ideation, and iteration, we developed a mobile-first solution for Boris & Horton's website that includes clear content, intuitive navigation, and visible CTAs.   

Proposed Homepage

Impact

We conducted a usability test of the original site and a second usability test of our website redesign. We used the same tasks for both tests and we saw improvement across tasks.

Users were asked to find a specific event on the website

Users were asked to find information about the co-founders

Understanding User and Business Needs

Stakeholder Priorities

What Are Customers Saying?

Once we understood the business' needs, we set out to understand the users' needs. We conducted 9 user interviews, 5 general dog enthusiasts and 4 loyal customers, to learn what they had to say about Boris & Horton and their dog-related event and/or retail experiences.

From the user interviews we extracted valuable insights which we categorized into common themes to uncover users’ most significant needs, goals, and frustrations.

Meet the Boris & Horton Loyal Customer

After synthesizing our user research, we created a primary persona to keep the team’s design process and decisions focused around the users’ key needs, frustrations, and goals.

We developed a user journey map to better understand Jess' pain points on the Boris & Horton website and how these align with business needs. The journey map chronicles Jess’ journey through the site, while also tracking her emotional journey through the experience.

Although the business itself inspires Jess to start on a high note, when the calendar does not behave as she expects it to, her mood drops. It drops again when the event becomes clunky to share, because it lacks a direct means of doing so.

Examining Website Structure and Features

Original Site

Original Site

To better understand the website structure and reveal areas of user experience improvement, I conducted a Heuristic Analysis.

The analysis revealed that the navigation menu contains too many items and unfamiliar terms which make it harder for people to read through. I also found that links throughout the website vary widely in formatting (buttons, underlined and not underlined words, pictures) and some items that look clickable, are not, which can cause confusion and increase the mis-click rate.

In reaction to the navigation challenges uncovered by the Heuristic Analysis and validated by user research, we leaped into improving the site’s information architecture. Via a card sort exercise, we restructured the information architecture of the website to match the user needs and expectations, reducing the number of items on the navigation bar from 11 to 7.

Defining Our Path Forward

What Are We Solving For?

Jess needs a way to efficiently connect with her community of dog lovers through attending events, and lending her support because it makes her happy.

How might we help Jess easily access Boris & Horton community event information to increase meaningful engagement?

Let’s Hypothesize

We believe that by creating a mobile-first solution of the Boris & Horton site for Jess, she will be able to quickly access desired information and therefore feel more connected to her community of dog enthusiasts.

We will measure success by tracking average mis-clicks and decreasing rates by 10% for each task.

Identifying Possibilities

We held two design studio sessions to explore the team’s ideas and create a shared vision for the Boris & Horton website experience. My team drew out some sketches individually for the website redesign, collaborated on what worked and what didn’t, iterated, and came up with better-defined wireframes.

We also created a design system to build our solution with consistency and in compliance with brand guidelines.

We focused on a mobile first approach because website analytic data pulled from Shopify showed that most website visitors use the Boris & Horton website on their phone, which is also validated by what users said during user interviews.

My notable contributions to the proposed redesign include:

  1. The use of carrousels to neatly display the abundance of imagery

  2. A pop-up window displaying “more info” for each selected event that is easy to leave without interrupting navigation 


Proposed Solution

Assessing Our Proposed Solution

We tested our website redesigns against our hypothesis using the same usability test tasks from the original site’s evaluation. We saw improvement across the tasks.

Test results validated our hypothesis and surpassed our goal to decrease mis-click rates by 10%. Additionally, we saw a sharp reduction in the task average duration time that it took users to complete each task, overall improving the user experience.

Usability Test Results: Find a Specific Event

Usability Test Results: Find Information About The Co-Founders

A Holistic Virtual And In-Person Experience

During the user interview phase, we learned from regular Boris & Horton patrons that the Coffee Club Membership worked around the old school punch card system. User noted that this was inconvenient because they would forget to bring their card with them or lose it.

We also learned that Boris & Horton relies on an Honesty Policy when Coffee Club Members don’t have their punch card, giving out coffee redemptions even if a punch card is not presented and asking customers to have it punched twice next time. Although kind, from a business standpoint, this practice negatively impacts revenue.

As a result, to ease the burden of a physical punch card for users and ensure that Boris & Horton is compensated for its offerings, we developed a digital punch card that allows user to pull this up through their Boris & Horton website. The virtual punch card also provides membership renewal date information and a visual way to track the number of redemptions. Each virtual card has a unique and scannable QR code that makes it easy for B&H employees to track the transaction.

Looking Forward, and Back

Next Steps

If given the opportunity to continue working on this project, I would suggest the following next steps:

  • Revisit the shop page and restructure its navigation.

  • Research Content Management System (CMS) that will accommodate user and business needs such as rewards system and loyalty points.

  • Work to implement our changes to understand limitations and iterate based on these.

Reflection

During this project we had the opportunity to work directly with one of Boris & Horton's co-owners. Working closely with the client helped me rediscover the importance of efficient storytelling to gain buy-in. I was also reminded that active communication with the stakeholder and amongst team members is key to moving smoothly and swiftly through the design sprint. 

I also learned that what the client asks for is not necessarily what the user needs or what will help their product better stand in the market. For example, the client asked us to focus on the shop page, however, via user research we learned that customers visit the website to find events and not to shop for products, a key data point that helped us prioritize where to spend our time.