Bed & Breakfast Association of Calgary

The Bed and Breakfast Association of Calgary (BBAC) is a collective organization that advocates for and supports the diverse bed and breakfast establishments across the city. Serving as a vital platform for proprietors to connect, share insights, and cultivate a community spirit within Calgary's hospitality landscape, the association plays a pivotal role in enhancing the overall tourism experience in the vibrant city. With the collaboration of a friend, I focused on the redesigning of the website while he handled the implementation.

My Role

Paper and digital wireframing, high-fidelity prototyping, accounting for accessibility, iterating on designs

Timeline

December 2023 to January 2024

Tools Used

  • Figma

  • Google Doc

Overview

Problem

The current website for the BBAC is outdated in both design and content. The association is looking to redesign the website and would like to add missing features.

Goal

To redesign the website, update content, and add new features.

o1

Specifications

Our first meeting with our clients allowed us to gauge their insights on the existing website and identify areas for improvement. The overarching goal was to create a more current, modern look for the site, with a particular emphasis on scalability for mobile devices. However, we pinpointed two key areas for enhancement:

B&B Listings

  • Display all B&Bs with their descriptions in two ways— in a list view as well as a map view

  • Allow users to filter B&Bs based on tags such as ‘pet-friendly’ or ‘# of bedrooms’

  • Display up to 6-10 photos of each B&B

  • Add a ‘Contact B&B Host’ button

  • Add a ‘Book Now’ button that will link to the B&B site

Adding New B&Bs

  • Allow B&B hosts to apply to join the Bed and Breakfast Association

  • Once these applications are approved, allow B&B hosts to log in with their assigned credentials to list their B&B on the website

  • Hosts should be able to update information whenever they need

02

Designs

Paper Wireframes

Guided by our project objectives, I began creating wireframes as a foundational step in crafting the website design. While the primary focus was on enhancing functionality, there was much opportunity to optimize content organization. Sketching paper wireframes enabled me to envision an improved user flow, specifically through the reorganizing of the navigation bar and overall page structure.

Digital Wireframes

I digitally recreated the wireframes to visually assess and outline the changes in the progression from one page to another. This allowed for a clear assessment of design modifications and ensured a smooth and intuitive navigation experience.

First Iteration of High-Fidelity Prototype and Feedback

With a good general feel for the website layout in mind, an initial high-fidelity prototype was made by integrating content from the current site alongside the requested modifications. This involved incorporating existing text and images, complemented by placeholder text and free online images to ensure a polished representation.

While our clients were generally satisfied with the enhanced functionality and redesigned layout of the website after reviewing this prototype, further discussions led to additional desired changes. These included:

  • Incorporating a dedicated page for an 'About' section

  • Eliminating the listed tours

  • Removing the association membership form—opting instead for hosts to contact them directly

  • Adding a ‘Get Started’ page for B&B hosts after they’ve logged in.

03

Outcome

Style guide

Given the absence of specific color, typography, or theme preferences from our clients, I opted for a subdued shade of blue, ensuring a visually appealing and comfortable experience for users instead of the bright blue used throughout the original website. I also chose simple typography for simple readability knowing most users would be in older age groups.

Final Design

Incorporating the latest requested changes, a final high-fidelity prototype was meticulously created to provide users with an intuitive platform for B&B searches and facilitate seamless onboarding for new hosts joining the association. Ultimately, the goal was to ensure that the newly designed website reflect the essence of the BBAC as a collective organization, making it effortlessly accessible for individuals seeking more information about the association and about all the amazing features Calgary as a city offers to tourists in general.

Original Website

Final Design

Takeaways

Redesigning a website demands considerable effort and dedication, yet witnessing the refined end product is just as rewarding as it is satisfying. Enhancing the workflow, layout, and overall aesthetics of the site can provide a new voice to the BBAC, extending a warm welcome to users eager to look for B&Bs to stay at and offer a glimpse into the vibrant offerings of Calgary as a city. This opportunity taught me a lot about collaborating with others, incorporating feedback, and the general process of start-to-end website design.

Choose Another Adventure

  • Data Intelligence For Health - ML Platform

    Designed and developed the frontend of a machine learning application aimed at making ML methods accessible to users of all experience levels — with no coding required.

    View Details

  • Truffle Time Inc.

    Developed a childcare business application that streamlines the booking process, ultimately making childcare services more accessible and user-friendly.

    View Details

  • Calgary Animal Shelter

    Created a compelling case study on an app designed for a Calgary animal shelter as part of the Google UX Design Certificate, showcasing user-centric solutions.

    View Case Study