WEB DESIGN | CSS | ART DIRECTIONODD FELLOWS
Oddfellows is a boutique hospitality brand offering a combination of dining, drinking, and accommodation experiences. The goal of this project was to design a visually immersive website that captures the brand’s unique personality while guiding users toward key actions such as bookings and reservations.
I led the new design end to end, and liaised very closely with the site developer. Like the client, my vision was to create a luxury, high end site with a flawless user experience, that would result in a high profile bar and restaurant.
Oddfellows offers multiple distinct experiences (restaurant, bar, rooms), which created a challenge in structuring the website clearly without losing the brand’s expressive and artistic identity.
Key challenges included:
Presenting multiple offerings without overwhelming users
Maintaining a strong, distinctive brand aesthetic while ensuring usability
Helping users quickly navigate to relevant sections (dining, drinks, stays)
Encouraging bookings across different service types
The aim was to design a website that:
Showcases the brand’s personality and atmosphere
Clearly communicates multiple offerings within a single experience
Guides users toward bookings and reservations
Delivers a seamless and engaging journey across devices
The User
The target audience includes:
Guests looking for unique dining or bar experiences
Users planning stays or events
Visitors browsing for inspiration before making a booking
User needs:
Quick understanding of what’s available
Easy navigation between different experiences
Clear pathways to book or enquire
A visually engaging and memorable browsing experience
Strategy & Approach
1. Experience-Led Hero Section
The hero (“Drink | Dine | Dream”) was designed to immediately communicate the breadth of the offering.
Clear segmentation of core experiences
Strong visual storytelling to reflect atmosphere
Immediate orientation for users entering the site
This ensures users quickly understand what the brand offers and where to go next.
2. Structured Navigation for Multiple User Paths
To support different user intents, the experience is divided into clear pathways:
Dining
Drinking
Accommodation
Each pathway is visually distinct but part of a cohesive system, allowing users to quickly access relevant content without friction.
3. Balancing Brand Expression with Usability
A bold, dark visual style was used to reflect the brand’s personality while maintaining clarity:
High-contrast typography for readability
Strategic use of imagery to showcase the experience
Controlled layout structure to prevent visual overload
This ensures the site feels immersive without compromising usability.
4. Conversion-Focused Content Flow
The website is structured to guide users toward action:
Inspiration & atmosphere (hero + imagery)
Exploration of offerings (sections for each experience)
Deeper engagement (details, visuals, supporting content)
Action (booking, reservations, enquiries)
Calls-to-action are integrated throughout the experience to capture intent at multiple points.
5. Modular Layout for Scannability
Given the richness of content, the layout was designed to support quick scanning:
Clearly defined sections for each offering
Visual grouping of related content
Balanced use of imagery and text
This allows users to explore at their own pace without feeling overwhelmed.
6. Responsive Design for On-the-Go Users
The experience was optimised for mobile users, who often browse hospitality options on the go:
Simplified navigation and vertical flow
Prioritised key content and booking actions
Maintained visual impact across smaller screens
This ensures users can easily explore and convert from any device.
The Outcome
The final website delivers an engaging, conversion-focused experience that:
Captures the brand’s unique identity through strong visual storytelling
Simplifies navigation across multiple offerings
Encourages user action through clear pathways and CTAs
Balances immersive design with usability and performance