So Bar is an independent cocktail bar in the heart of Richmond serving fresh fruit cocktails, well made classics and charcuterie style food made to share and enjoy. Providing table service for their guests, this cozy venue also offers a main bar and function room for events.
I used to work at this bar and had often thought to redesign its website, so I've decided to follow through and get it done!
For this case study I will be reviewing the current website and deciding what can be done to improve its user experience.
The first step was to work out the business goals and to understand what people do when on bar/restaurant websites.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
Unordered list
Bold text
Emphasis
Superscript
Subscript
Reviewing the sections of the site I found that all but one of the user needs had been addressed. Users looking for customer reviews would have to visit their social media pages which, although not a major headache, still takes them away from the website.
I rearranged the order of the sections to give booking a table and checking out the menu the highest priorities. I also changed the names of 'Kitchen' to 'Menu' and 'Events & Offers' to 'Events & Promotions' as I believed these new titles would make more sense to users.
I decided to keep the site to one page based on the amount of content I had available, and thought a slider would be an ideal way of navigating through each section.
I chose to give each section apart from the contact info its own database as this had mostly static content. A consistent yet flexible structure could be defined for the rest of the dynamic content. They could have a variety of the following:
I also included the option to choose from a selection of unique card designs to suit different types of content.
With the dynamic content defined I began to see how they could be translated into design components.
I knew straight away that I was going for a slider experience based on the simplicity of the current site and thought the challenge was making the content on each section fit within each slide. I used cards to contain the content and aligned them within columns and rows to give a number of different layout styles depending on the amount of information on each section. I created low-fidelity wireframes to flesh out the design concept and convey how the design would translate to mobile, and then produced high-fidelity designs to highlight the finer details and how the real thing would look. I also annotated the high-fidelity designs to show the main interactions and content states.
I then jumped on to Webflow to create collections for my databases, translate the designs and incorporate a third-party slider to achieve the desired functionality.
Because of the simple structure and great content available I was confident I could improve the overall experience. I was happy with the result and a few things stood out to me:
As much as I know of the business and its customers, I am missing the opportunities and insights gained from doing the relevant research before making design decisions. I’m also not validating the design to prove the solution is effective. The main exercises I could of done to improve the project were:
After presenting this website to the owner and receiving positive feedback, I'd like to make more of a business case as to how this website and CMS could help him engage with his customers and reach a larger audience.
