About the Project

Client

The American is a bar, games room, and mixed-use event space located in the Strathcona area of Vancouver's East side.

Goal

To create a responsive website showcasing the diverse offerings of a multi-use event space.

Functional Requirements

  • Home Screen

  • Events Listings (Monthly/Weekly)

  • Partnerships Page

  • Food & Beverage Menus

  • About Us

  • Photo Gallery

  • Contact Page

  • Fully responsive for mobile use

Target Audience

The target audience for theamerican.ca is 19-50. The mindset of our primary user is one who needs access to business information with ease, with the goal of staying informed on community events and promotions. A substantial amount of the site's primary audience will be viewing via mobile device, so it's imperative to ensure the site is responsive across various platforms, and easy to navigate for user tasks such as locating hours of operation, location, events, and menus.

Challenge

The owners of the establishment also own several other bars and event spaces, and originally maintained one website (thecobalt.ca), with all information for their various establishments located in this singular space. However, as each business began to grow, so too did the individual needs and desired online presence for each business begin to outgrow the one website. In order to create a website that would centre its focus solely on The American, there will be a need for parsing through the current site in order to extract content that was relevant only to the one business. Also, as this business has multiple stakeholders in the form of ownership, an in-house photographer, and event promoters, ensuring that all assets and desired content is current, accurate, and in-line with the overall goals of the business, maintaining open channels of communication through the build would be crucial.

My Role

Researcher, UX/UI Designer, Programmer, Content Writer

Tools

CSS3, HTML5, Javascript, jQuery, Bootstrap, CSS Animation, Balsamiq, Pen & Sketchbook

Understanding the Problem

Patrons of The American need a space to easily access information regarding upcoming and ongoing events, food and beverage offerings, and access community-related materials.

The Solution

A well-structured and fully responsive website that showcases the business's multi-faceted offerings.

theamerican.ca

A Process of Collaboration

As the business-owners contracted their own in-house photographer for events and other promotional needs, my goal was to produce a site that leveraged a wealth of already-existing visual imagery in order to tell the story of this very unique space. I kept this aspect of the design at the forefront of my design choices early on, and approached the information architecture of the site as a close relationship between the visual and the textual. Once creating some low-fidelity drafts of the layout, I moved onto the wireframing phase, with the focus on a design that's driven largely by its visual imagery, as well as textual content.

Wireframes

Staying On-Brand

Stepping through the doors of The American it quickly becomes apparent that it is unlike most bars. The room exudes fun. In the centre of the wide-open space are long communal tables, ideal for group interaction. Around the perimeter of the space are pinball machines, pool table, foosball, and a DJ booth for the numerous events the space hosts. The challenge early on was in finding a way to create a digital space that mirrored The American in mood, as well as visual aesthetic. The American itself is a cocktail bar, craft beer bar, games room that broadcasts sporting events, daytime cafe, and often an impromptu dance space, so establishing a navigation system that represented the bar by its selling features was the first order of business.

UI Design
theamerican.ca Home Page (tablet view)

theamerican.ca Home Page (tablet view)

UI Design Overview

As the intention was to allow photography to tell much of the story of the space, I chose to use a very subdued colour palette in order to allow the images and copy to take centre stage and not distract. I implemented CSS animations for page headers and icon illustrations to bring a sense of playfulness, parallax section headers for some visual dynamism, and made use of a masonry-style image gallery for a clean look on both desktop and mobile, as well as ease of use of the addition of future content.

theamerican.ca

Colour Palette

I chose more muted selections for a black and light grey, so as to reduce contrast for the user and reduce the intensity of the content in terms of readability. In order to add an element of visual appeal, I added in a cool green for hover states in site navigation.

Photography

Through collaboration with Wild Hearts Collective, the business's contracted photographer, I selected the images that best told the story of the space for each section; events, food, drinks, and image gallery, in order to bring the user into an immersive visual experience that mirrored that of visiting The American.

Results

What I've learned

  • Communication in collaboration is key. Focusing on keeping open channels of communication with all stakeholders and fellow contributors early on will pay dividends throughout the life cycle of the project. We need to understand exactly what the client's needs are, and to do this we must be as specific as possible in addressing all aspects of the project with the client; from budgetary constraints, goals and expectations, and metrics for evaluating success. With fellow contributors to the project, establishing clear roles, duties, and timelines for completion is vital in keeping the project on track.

  • Frameworks are valuable tools for rapid development. At the outset of the project, I began by hand-coding every line of HTML and CSS with an aim of maintaining full control over every aspect of the project's visual design, layout, and functionality. However, as I explored possible alternatives, I discovered how the versatility and overall ease of use of responsive frameworks such as Bootstrap could be a powerful tool in the developmental phase. Taking the time to find the framework and components that best suit the project's goals can leverage the foundational aspects that these frameworks have already in place, and can be tailored to fit the needs of the project. Once these foundational aspects are in place, we no longer need to spend time (and the client's budget) on work that is unnecessary, allowing us to focus on adaptation of the components, content, and visual design.

Please experience theamerican.ca:

Demo theamerican.ca