Project Overview

Design a website for fictional company, with the concept of a bed and breakfast theme, for the intended target audience of the bed and breakfast. Prior to this project, I was unaware of what a Bed and Breakfast was, I did not know it was a hospitality service. By using various research methods I constructed a fictional Bed and Breakfast company and designed their logo and website.

This project was completed around late 2024 and has been updated this year.

Roles and Responsibility

I, Tereza Garcia, took on these roles for the project:

  • Researcher
  • Designer
  • Tester

Problem Statement

Create and design a bed and breakfast website. From creating a new logo, wireframes, and low and high-fidelity prototypes. Conduct research to design the bed and breakfast website for the intended target audience.

Research

For this design I chose a few methods for researching. I did a competitive audit and developed Personas to identify what the user journey is for someone looking to book at a Bed and Breakfast website.

Competitive Audit

bed&breakfast competativeaudit

More information provided in PDF of competitor’s audit.

Personas

bed&breakfast personas

More information provided in PDF.

Design

With the results from the research, I developed a sitemap to get a visualization for the wireframes. Please click on the wireframe image to view the rest of pages.

bed&breakfastsitemap
Sitemap for Teddy’s Bed and Breakfast.
bed&breakfastwireframes
Wireframe of the home page.

I designed the logo as well for the fictional company.

garcia sitelogov2
Logo for Teddy’s Bed and Breakfast.

Usability Testing

For my test, I did a run of my Low-Fidelity prototype and asked my tester to book a room from the options available. My first test went well and had compliments of good layout and needed to fix the flows to navigate around the rest of the pages. This feedback was then applied to next iteration and the comments I received were more detailed.

The logo needed to be aligned, the navigation looked too empty, or the text placeholder need to be replaced. At this point of the design process, I still had not replaced the placeholder text and I got a lot of comments for that. The critiques were heavy but necessary to apply to the final design of the website.

High-Fidelity Prototype

bbhomepage

Takeaways

This was my first time making a website design for a desktop. My only experience was making applications so this was new territory for me. This was a difficult transition but, I applied the same research process to create the design that was finalized. The logo design was also new to me because I only had some experience with Adobe illustrator. I had to learn how to make the logo shrink and keep the quality as high as possible. Overall I am happy with how it came out but I would like to come back to this design and create a new flow for the design.