Bed & Breakfast Homepage Redesign

#WebDesign
#Branding
#UXDesign

Sharpen.Design released a new feature today by adding filters to the challenges given. As someone who is interested in product (UX/UI), I flipped on that filter and got challenged to “Design a homepage for a bed and breakfast”.

See Final Mockups
Initial DirectionResearchChanging DirectionsRebrandSolutionsFinal MockupsTakeaways

Initial Direction

I began ideating on what kind of bed and breakfast this was going to be. I came up with a name and “North Hills Bed and Breakfast” located in the Pacific Northwest. I then came up with a few words that I would want to associate with this place: comfortable, calm, welcoming, hospitable, soft, elegant. I took this direction and started my research on different bed and breakfasts.

Research

As someone who has stayed in a bed and breakfast only once in my life (and I didn’t even book it), I needed to see what kind of content and information was most prevalent when you visit a bed and breakfast website.

User stories

The homepage is a source of information, but it’s also where we want users to take action when they first access it. Based on what the variety of homepages had, I made these assumptions on what stakeholders would want users to do and what users would want to do when they access a bed and breakfast's homepage.

As a user, I want to...

Reserve a room
Contact the bed and breakfast for more information
See what rooms are in the Bed and Breakfast
Make sure the bed and breakfast has good reviews/validation
Reserve the bed and breakfast as an event space (many of the websites advertised themselves as event locations)

Changing Directions

As I continued my research, I came upon an already pre-existing Bed and Breakfast, The Stanley House. After reviewing it, I wanted to tackle a redesign of this bed and breakfast website instead, and so that’s exactly what I did.

Changing the direction did not change too much based on the research I did. If anything, it validated some of the design directions included in the redesign. I knew that there were 5 main points I wanted to address with the new redesign of the website

1
Declutter

Many of the links and information on the current site is very cluttered. With all the noise, it's difficult to know which CTAs are a priority.

2
revamped nagivation

The main navigation navigates to EVERY page you would ever want to access. The redesign needs to reduce and consolidate the navigation.

3
clear call to action

Extending off on the decluttering, the redesign needs to figure out which CTAs are the most important and how to bring attention to them.

4
Highlight accomodations

Accommodations and the location are the key selling factors of the bed and breakfast. The current site does bring attention to their rooms, but the redesign will focus on giving each one more "breathing room".

5
it's an event space too

After looking through the site, The Stanley House can host events, specifically events related to weddings. There is a CTA at the top right for Stanley Weddings, but the homepage does not have a direct entrance/brief introduction to this selling point.

Rebrand

I wanted to convey the “Luxury Inn and Grand Events” aspect of bed and breakfast. I took away the red and made the two primary colors black and yellow. With the darker theme and the yellow that mimics gold, the colors work together to give the redesigned site a sense of luxury.

The typography on the original site is difficult to read because of the script, but I can see it’s their way of adding a form of elegance. I went through a few font pairs but landed on Crimson Text for the headings and Chivo for the body. As a serif font, Crimson Text has a classic feel and elegance that The Stanley House aims to convey. Chivo is a typeface that pairs well with Crimson Text. It is clean, readable, and adds a needed element of modernity to the website.

#1f1f1f
#ffd978

Crimson Text

Hi I'm Chivo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Solutions

information organized

The redesign reduced the navigation and consolidated Guest Rooms and Apartments into "Reservations." Many of the links that were at the top of the page were removed, so the noise of all the CTAs is reduced.

two main call-to-actions

I reduced the CTAs to only two. It focuses on booking a room or booking or booking The Stanley House as an event space, the two main selling points for the bed and breakfast.

all selling points

Like the original website, I kept the "Guest Rooms, Apartments, and Local Attractions" as sections on the homepage. I also added an "Events or Weddings" section because it's also a selling point and it did not get attention on the current site.

Final Mockups

Out of the final mockups, if I had to choose, I would go with either Version 2 or 3. These two versions I believe address the issues, but the aesthetics of 3 lean towards a darker theme. With the lighter sections, there is the ability to see the division between the sections much easier, but the darker theme has a more elegant feeling to it.

See all Mockups

Takeaways

A quick challenge, but fun one too! A lot of the decisions I made were based on what current information is available and what I felt would be more appropriate for the site. A/B testing on the three versions would allow for better understanding of how users perceive each page and if their needs are met. I would also need to consider stakeholder input such as the owners of bed and breakfast, and whether or not they agree on the direction, I went with their website.

The final exploration would be on what direction I would take their current logo. For now, I used the Crimson Text typeface, but based on their logo, would be interesting to see how that could be re-created to follow suit in my brand direction.