Website Redesign for the European at the Warwick Hotel

Teaser Image 4.jpg

The Challenge

The European, lounge and bar of Warwick Hotel in San Francisco needed to redesign its website to provide a bold, enticing feel that matched the sophisticated and intimate feel of the bar itself.

The site would continue to be hosted on Squarespace with the existing template and the updated design was to appeal primarily to an audience of young professionals.

Context

I provided design services to Warwick Hotels to improve the visual design and user experience of The European’s website including:

  • Updating the site’s color, typography, and imagery to convey an upscale feel

  • Redesigning page layouts to improve usability and improve clarity and consistency

  • Creating a strong, refined impression and more relevant and organized content for users

 

Role/Services

Visual Design
User Experience
Website Design
Information Architecture
Mockups
Content Strategy
Photography

Time Frame

May–June, 2018


 
 
 

Content Review & Information Architecture

The existing site featured navigation sections for “Menu,” “Happy Hour,” “Bar Food,” “Gallery,” “About,” and “Contact.” I determined that the menu information could be more intuitively organized into sections for the regular and happy hour menus that incorporated subsections for food and drink instead of having an extra bar food section. With the original design, it was not clear whether the “Bar Food” items were part of the regular or happy hour menus. The client wanted to direct people to the European’s sister restaurant, Bota, and Warwick Hotel in a prominent way, so I incorporated them into the main navigation, and I suggested a connection to Yelp. I rearranged the navigation items in order of relevance to users that began with the “About” section and ended with the two outbound links. The redesigned navigation featured sections for “About,” “Menu,” “Happy Hour,” “Gallery,” “Contact,” “Warwick Hotel,” and “Bota.”

 
 
IA Before and After.jpg
 
 

Bold, Sophisticated First Impression

The original homepage featured a slideshow of four photos that automatically advanced in two-second intervals. To create a bold, sophisticated first impression, I chose one, strongest image to feature, both in terms of composition and subject, that could convey what the European offers and entice users to explore further. Because the purpose of the website is not to have users dwell on the homepage by watching a slideshow, one image would allow users to see one powerful, focused visual and move on to other parts of the site. I chose the photo of menu and spirits for its interesting depth of field, beautiful composition, and subjects that hinted at the European’s offerings.

 
 
Homepage Before and After.jpg
 
 

Updated Typography and Color

I visited the European to get a feel for the ambience, printed materials, and interior design. It felt stylish but comfortable, with a refined cozy feel. To better convey the warm, intimate feeling of the lounge on the website, I updated the color and typography. I chose a deep brown background color to provide a warmth that referenced the European’s leather menus and furniture and chose a gold highlight color to match the existing logo.

For typography, I selected Goldenbook and Oswald to convey an upscale, modern feel that also complements the logo. Goldenbook’s fine strokes feel elegant and Oswald’s efficient letters mirror the efficiency of the logo’s font. I isolated the logo from its background to more elegantly display it on the site.

 
 
Color and Typography.jpg
 
 

Enhanced About Page and Contact Page

Imagery and Layout

For the “About” page, I redesigned the layout to break up the text into more readable columns and feature a photo that illustrates the craft of making cocktails to provide relevant visual interest.

 
 
About Page Before and After.jpg
 
 

To enhance the “Contact” page, I separated the contents into sections and refined the hierarchy with the new typefaces. I incorporated photos to provide relevant visual interest and changed the map interface theme to complement the new dark color scheme.

 
 
Contact Page Before and After.jpg
 
 

Streamlined Menus

As part of the content review and information architecture improvement, I streamlined the menus from “Menu,” “Happy Hour,” and “Bar Food,” into “Menu” and “Happy Hour,” incorporating both food and drink as subsections within each section to eliminate redundant information and provide unambiguous categories.

 
 
Menus Before and After.jpg
 
 

Improved Gallery and Instagram Feature  

I redesigned the “Gallery” section to give users a clear idea of what they might expect to experience when visiting the European; this included not only imagery of the drink and food but also of the space and decor. While visiting the European, I took photos with the intention of using them to depict the space on the website; they are included in the mockups. Instead of waiting through a slideshow without knowing how many photos there are, users could see immediately a grid of pictures that shows a variety of details that together provide a comprehensive portrayal of the European. The client wanted to include the European’s Instagram feed, so I incorporated it into this section as supporting, timely content.

 
 
Gallery Before and After.jpg
 
 

Summary & Outcomes

I redesigned the website for the hotel bar and lounge, the European, to the client’s satisfaction. Publication of the site was delayed due to internal matters.

I updated the site’s color, typography, and imagery to convey an elegant look and feel that complemented the European’s physical experience. I redesigned page layouts to improve usability, deliver a strong, refined impression, and provide more relevant and organized content for users. I also took photos of the bar to include on the website to show potential visitors what the bar feels like and reorganized the menu content for clarity and consistency.

 
 
About Page.jpg