Joyce Doan / Work / Zeus Living Website
Hospitality & Property Platform · UI/UX Designer

Zeus Living Website

A responsive hospitality platform built for international guests — balancing premium visual identity with intuitive property discovery across all devices.

UI/UX Designer BRANDINGWEB DESIGNWEBFLOWFIGMA
Website
zeusgroup.co ↗
Focus
Responsive UX · Search · Design System
Scope
Full Website
Platform
Webflow
Team
3 Designers
Timeline
1 month
01 — Context

The Challenge

Zeus Living is a Vietnam-based hospitality brand offering premium short-term and long-term property stays. The goal was to build a website that converts international guests browsing from abroad — people making high-stakes booking decisions based almost entirely on what they see on screen.

The brand had premium properties but no website — only a Facebook and Instagram presence. Potential guests had no way to browse the full inventory, understand pricing, or make an inquiry without going through social DMs. Our job was to build that foundation from scratch while keeping the premium feel the brand had established on social.

My Role

I was one of three designers. While two handled screen-level UI execution, I owned the design foundation — information architecture, design system, responsive standards, and quality consistency. I also set up and managed the entire Figma workspace: file structure, page naming, component organization, and handoff-ready layers. My decisions early on shaped everything the team built downstream.

02 — Discovery

Research & Key Insights

Before touching layouts, we mapped how guests actually make property decisions. Four findings shaped every major design choice that followed.

01

Images drive conversion

Property images do 80% of the conversion work. Layout had to prioritize visual real estate over content density.

02

Trust signals come first

International guests scan for professional photography, clear location, and credibility markers before engaging with any CTA.

03

Mobile is the primary device

Touch targets, scroll behavior, and image cropping needed to be designed mobile-first — not adapted after the fact.

04

The site needs to scale

Zeus Living planned to expand their inventory. Any layout decision that only worked for the current state would create design debt immediately.

03 — Design

Key Design Decisions

Decision 01

Search lives in the hero, not the nav

We debated two approaches: embed search in the hero or surface it only through the nav. Hero-embedded search drove faster first interaction and removed the cognitive step of scanning the nav to understand what to do. This anchored the homepage around discovery intent — the primary reason visitors arrive.

Decision 02

Cards over list view

List views are more information-dense. Cards win here because they give property images the breathing room they need — and they match actual browsing behavior. Guests don't filter first, they scroll and react emotionally. Filtering is a second step, not a starting point.

Decision 03

Responsiveness defined at the system level

Most responsive issues come from per-screen decisions instead of a shared spec. I defined breakpoint behavior early — grid compression, typography scale, spacing rules, image cropping logic — so both designers operated from the same system, eliminating rework and keeping dev handoff clean.

04 — Architecture

Site Architecture

The structure was kept deliberately flat to minimize navigation friction. Property discovery and editorial content were separated into distinct top-level sections to prevent a cluttered nav and keep conversion-intent users on a clean path.

Site Map
Home — entry point, search, featured properties
Properties — full browsable inventory
Room Detail — gallery, specs, and inquiry
Blog — destination content for brand trust
Contact — direct inquiry fallback
Primary User Journey
1

Land on Homepage

2

Search or browse properties

3

View property listing

4

Open property detail

5

Send inquiry

05 — Foundation

Design System

I built the system with scalability as the primary constraint — Zeus Living planned to grow their property inventory and the system needed to absorb new content without layout inconsistency. I also set up and owned the entire Figma workspace so the team could collaborate without stepping on each other’s work.

Figma File Structure
Pages
📄Cover
📄Design System
📄Wireframes
📄Desktop — Final
📄Tablet — Final
📄Mobile — Final
📄Handoff & Specs
Layer Conventions
Components prefixed with _ Sections grouped and named by page Auto layout applied to all components Breakpoint frames labeled by viewport Dev-ready: all assets exported & annotated
Foundations
Typography hierarchy Color palette Spacing scale Grid system
Components
Buttons (all states) Property cards Image gallery module Navigation bar Search component Form inputs & footer

Every interactive component was built with all states — default, hover, active, disabled, error — so developers had zero ambiguity at handoff. New pages could be assembled from existing components without designing from scratch.

06 — Outcome

Result

The site launched on schedule within the 1-month timeline. Zeus Living had a website that matched the quality of their properties — premium visual feel, a clear path to property discovery, and consistent experience across desktop, tablet, and mobile. The design system became the operational backbone for ongoing Webflow updates.

Reflection

With more time, I'd push for user testing with actual guests before final handoff — particularly to validate the search behavior and inquiry flow. Internal review catches visual and technical issues; it doesn't surface real usability friction. Even 3–5 sessions with real users would have given us sharper confidence in the decisions we made.

← Previous Rivana Equity Website Next → RinDB Website Design
Get in touch

Have a problem worth designing?

Let's talk