Role:
Designer / Developer
Branded UX/UI and multi-tenant CMS website redesign custom built in Webflow.
A modular collection of websites redesign then systemized to unify brand presence while giving each location control over its own style and content.
Context

Overview

Brand, UX/UI design, and multi-tenant website CMS system built in Webflow

A modular website system designed to unify brand presence across locations while enabling each to manage its own content independently.
The project focused on translating an existing brand into a scalable digital system —— balancing consistency with flexibility. Multiple locations operate from a shared foundation, while maintaining control over their menus, updates, and local content.
  • Multi-tenant CMS architecture: Centralized system supporting multiple locations with independent content control
  • Unified brand system: Consistent design language applied across all sites and touchpoints
  • Modular content structure: Reusable components enabling efficient updates and long-term scalability
Screenshots of the disjointed experience of The Green Olive catering.
Before and after images of The Green Olive Catering.
Approach

Strategy

An adaptive shared visual language with a contextual content management sytem (CMS).
I approached the project through a system application, establishing a general stylesheet that was transformed contextually based on location. This created a liquid but stable visual structure that could scale across locations and teams —— changing based on location, managed locally, maintained globally.
Multi-tenant schema diagram.
Initial wireframes of the main The Green Olive Catering website.
Core The Green Olive Catering userflow.
Visual design of the The Green Olive Catering main website.
Brand

Contextual Identity

Visual identity switches based on environment.
Using a combination of modes and variables, the content and components change style based on the the location. In this way they stay different but unified.
Figma variable mode sheets.
Webflow variable mode sheets.
Applied variable mode sheets.
Example of the same brand elements adapting to context.
Paired with prompts like: "mediterranean vegetarian feast on a light, slightly marbled surface; it is illuminated by interrupted sunlight; there are only vegetarian dishes such as dolmas, rice, pita and yogurt; the view is top-down." branded content can be generated.
An image of kebob, salad, and Mediterranean sides generated based on brand.
Conclusion

Outcome

A scalable system designed to evolve with the business
The final platform unified multiple catering locations within a shared digital system while preserving local flexibility and operational independence. Built through a modular CMS structure and reusable UX/UI patterns, the project established a stable foundation for ongoing growth —— scalable across teams, locations, and future content needs.
Contact Me

Have an organization that could benefit form a liquid distribution of design?

Use my form, send me an email at hello@johnhansen.design or schedule a call.
Thanks - your message was sent. I'll get back to you.
Something went wrong while submitting the form.