Watertown Coffee and Saloon
- Client: Watertown Coffee and Saloon
- Role: Web design, HTML&CSS, photography, copy
Goal: To have an online presence consistent with Watertown's existing style and brand that will entice potential customers to visit.
I designed and hand-coded the HTML and CSS, took and edited all photos and wrote all of the copy with the exception of the cocktail and food descriptions.
I designed this site with the Seattle University students in mind. Given this audience, I opted for textures and depth, PDF-free menus, and easily digested navigation.
Visit Watertown Coffee and Salon Protosite
Design ProcessDesign Process
Information Architecture
Watertown was a coffee shop by day, bar by night. Using my own experiences as an example, the following is a list of the information customers are seeking when visiting any coffee shop/bar website.
- Location
- Happy hour specials
- Menu
- Atmosphere
- Calendar of events
- Hours of operation
Based on this list, the information was easily segmented into conventional categories.
Back to Top
Wireframes
Homepage Presentation of Important Information
All the information that customers are seeking (based on the list above) is prominently displayed on the homepage: Current and daily happy hour specials, address, hours of operation, links to menus and more are clearly displayed to the customer.
Conventional Navigation and URL List Layout
The main navigation is based on what information the customer is seeking assuming that they are viewing the site from left to right. The sub-navigation is consistent within each sub-page. These two things help the customer focus on the content and not navigation.
Visual Hierarchy of Information
There is a clear visual hierarchy of information that reinforces the strategy and thinking behind why customers are visiting the website. It starts with the main advertisement of the current happy hour specials and ends with the header and footer information, which pertains to location, hours of operation, and contact information.Back to Top
Design Comps/Style Guide
Aesthetics
The initial designs focused on coffee-themed illustrations and color. Texture was added to later designs for depth. The goal of these designs was to attract the Seattle University students across the street. This was the only coffee shop on 12th Avenue besides Starbucks that served great coffee, food, and cocktails. The palette and type choices were based off of the existing logo, which was playful in my mind because of the wave-form liquid in the glasses. Watertown had high ceilings and an open layout, which they filled with the sounds of unique records and a 12-foot-wide painting of an almost nude Burt Reynolds above their large bar.Back to Top