The Bar Website

Overview

The design and build of an attractive mobile-first website that allows customers to book for a range of events, easily find the establishment's location and develop the site’s SEO strategy so it appears in users’ searches.

Role: Lead web designer

Timeframe: 3 weeks

Goals

Design a mobile first website
Integrate an effective booking system for users
Create and employ the website’s SEO strategy

Process

Discovery

Define requirements

Gathered website requirements through a initial client call and with the creation of a stakeholder statement.

User stories

Defined the who, what and the why of the website’s user.

User flow charts

Defined a high-level flow diagram for the website. Defined the solution before building to reduce risk.

Client call

User flow charts

Wireframing, prototyping and user testing

Wireframing & Usability Testing

Sketched designs to reduce ambiguity, allow for validation and reduce risk. Then collaborated with the design team to choose the best design solution.

Wireframes

Hi-fi Prototype & Usability Testing

The designs were iterated based on user and stakeholder feedback. The high fidelity designs were created with the final UI and user tested again.

Prototype iterations

Accessibility

Designed and organised asset and interactive component guides to WCAG 2.1. Accessibility standards.

Accessibility standard check

Results

Build

Constructed the site on Wordpress to the prototype’s design, using html and CSS to edit and create custom elements where necessary.

CSS Customisation

SEO

Submitted the sitemap to Google Search Console, correctly structured the site’s heading tags and created the page titles and meta data. Collaborated with the content creator on ideal blog post subjects.

Google Analytics

Final Design

Takeaways

Key learnings

Importance of a detailed brief for an agile process.
Importance of correctly constructing the site as you build with correct headings, alt-text and tags for SEO and accessibility purposes.
Importance of co-ordinated SEO campaign with scheduled blog posts and social media action to ensure the site is visible post-launch.