Background: Chuck's Hop Shop
Chuck's Hop Shop is a beer bar/bottle shop with two top-rated locations in Seattle. It's a straightforward place--you go there to try new and exciting kinds of beer, hang out with friends, and, if you are hungry, grab some food from a local food truck parked out front. The website is also straightforward. While it is not glossy or up-to-date with current website trends, it gets the job done. You can see what's on tap, look at the food truck schedule, and check for special events and promotions. You can even purchase Chuck's branded apparel, gift cards, and kegs. I reached out to Chuck and offered to help him redesign his websites. He accepted!
Getting Started
From conducting user research on about 30 people, I inferred that while Chuck's Hop Shop website could be more exciting and exciting, most users think it works just fine. Many even prefer its stripped-down appearance to that of other bar websites that try much harder to look modern. I started by conducting competitive analysis, interviewing stakeholders, and meeting with Chuck to discuss his ideas. We decided early on to leave the Chuck's Hop Shop websites alone for now. If it's not broken, don't fix it! Instead, we focused on his new restaurant, BarbecueSmith.
BarbecueSmith Redesign
The original site design is on the left. Below are some reasons why it was problematic.
If the user has previous experience, what they are looking at is clear.
The image next to the logo must be of better quality and relevant to the user.
The placement of elements seems entirely random.
The menu, beer list, and contact sections must be clarified/unclear.
The quality of the blog and most other site content could be better.
The logo is stretched out and appears in too many places on the front page.
The URL is a WordPress address, which makes the user think the site needs more attention. If the site is not given much attention, the user is left to believe that the real-life restaurant experience may also be problematic.
The blog and Facebook feed are prominently featured but need an overall cohesive tone.
Wireframing a better site
After reviewing the site, I created a persona and user journey from my initial research to better understand how to reprioritize the site elements. I also talked with Chuck about what he wanted from his site during this process. We looked at a few barbecue restaurant websites together, and I took notes on incorporating his ideas into my final designs. After completing some competitive analysis and developing a better understanding of what I was trying to create, I began sketching and wireframing some possible ideas. I decided to build out the wireframe to the left. Here is why:
The best restaurant sites I saw all had great photography and testimonials.
The navigation on great restaurant sites was always straightforward, intuitive, and at the top of the page.
The hours and location are always accessible on every page of great sites, so I knew I wanted this featured.
I'm deemphasizing the importance of the blog. Blogging can be done on social profiles, making the site cleaner and more straightforward.
The social buttons on the bottom are meant to connect users to the other sites quickly and easily if they want more information on the business.
I included only things in this wireframe that were utterly essential to the business and the site. I also wanted to ensure that all pages were accessible from the navigation.
Final designs
On the left are the pages for the new BarbecueSmith site, which are in the form of a neat .gif file.