Client: The Keg Steakhouse Bar and Grill
My Role: Art Direction; UI Designer
The Keg restaurant and Bar website was a very exciting project to work on. It was an opportunity to work with a very progressive client who was open to change and didn’t have many pre-existing ideas on how the website should be structured. Our task was to redesign the Keg website to reflect the new visual approach of the brand and ensure the design was responsive to allow easy access on most devices.
There were two key areas of the website which needed some deeper thinking.
Deep Diving Navigation System
There are 2 areas on The Keg website where a user is required to drill down through 4 levels of navigation in order to get to the content they are trying to access.
The original design used drop-down menus to achieve to get users to their desired location. This solution was very cumbersome for the user, especially on mobile. One of the major headaches of this system was an extra click required between choices. Visually speaking, housing up to 4 drop down menus to get to a single piece of content was not the most elegant of solutions.
In order to clean up that process we decided to go with an accordion style navigation system that required only a single click to move forward or backwards through the sets of choices.
As the user dives deeper into a navigation set, the previous selections are listed at the top of the list. A single click allows the user to drill back up a number of levels just as easy as it is to drill further down into the set.
We used this solution in the Location Finder, as well as the Menu section of the website.
Rethinking the News Section
The Keg has a very active presence in the media for their generous charity work through The Keg Foundation, as well as for being a culinary staple in the Canadian market. Because of this exposure they wanted an area on the website where they could post video clips and news articles highlighting these aspects of their brand.
However, when we looked at the page views for the news section of the old website, we realized that people coming to the The Keg site were not interested in veering off into the news section.
Something we did notice was that The Keg was already posting all of these news stories on their social channels. And with over 200K likes on Facebook and 33K followers on Twitter, we decided to leverage The Keg’s activity on social media and create a news section using the content already being engaged with by their customers.
We designed a card system on The Keg homepage that pulled in posts from The Keg’s Facebook, Twitter and Instagram accounts. So now whenever The Keg posted on their social network, a card for that post would be created and displayed for users coming to The Keg homepage to see.
This automated the process of keeping the content of the homepage up-to-date, as well as a way to bring awareness of the Keg’s social content to users who would normally be unfamiliar with the Keg’s social presence.
We wanted our users to engage with the content in the social timeline without having to leave the website. Whenever possible, we decided to make the cards as functional as possible. If a user was already signed in to their social accounts, they had the ability interact with the social posts (like, comment etc) on the Keg homepage without having to leave the site.
When a user clicked on one of the cards on the timeline, that card would expand to a lightbox and reveal engagement options for the user to interact with.