What is Etera?

Etera is an AI-powered travel super app that brings Hotels, Experiences, Dining, and Flights into a single, conversational interface. The product combines 8,500+ curated experiences and 85,000+ restaurant listings with an AI concierge layer that lets users book anything through natural language — no filters, no friction.

Travel planning today is broken. Users juggle four to five different apps to plan a single trip one for flights, another for hotels, a third for restaurants, a separate one for activities. Each platform has its own search logic, its own account, its own checkout. The result is a fragmented, exhausting experience that turns what should be exciting into something that feels like admin.

Etera was built to fix that. The ambition was to make travel planning feel like talking to a knowledgeable local friend who can also take action on your behalf one conversation, one app, everything handled.

My Role

The Challenge

Building Etera meant solving three interlocking problems simultaneously — with no prior design system, no established AI interaction patterns to follow, and a product scope that spanned five distinct verticals from day one.

• No system, no foundation. Etera had no existing design language. Every component, token, pattern, and interaction needed to be defined from scratch — while the product was actively being built. The design system had to grow in parallel with the product, not before it.
  
  

• Designing AI interactions without a playbook. Conversational UI for travel booking is a largely unsolved problem. There were no established patterns for how to handle ambiguous natural language input, build user trust in AI suggestions, or gracefully recover when the AI misunderstands intent. Everything had to be designed from first principles.
  
  

• Five verticals, one coherent product. Experiences, Flights, Restaurants, Hotels, and Lists each have their own booking logic, information hierarchy, and user expectations. The challenge was designing five distinct vertical experiences that still felt like one unified product consistent enough to build confidence, flexible enough to serve the unique needs of each domain.

Design System

Before designing any screens, I established the foundation. The Etera design system was built from the ground up using atomic design principles starting with primitives and scaling up to complex, reusable patterns.

• Tokens first. I defined 106 Figma variables covering colour, typography, spacing, radius, and elevation all structured to support both light and dark theming from day one. Token naming followed a semantic model, so values carried meaning rather than just appearance.
  
  

• 50+ components. Atoms became molecules, molecules became organisms. Each component was built for composability designed to work in isolation and in combination across all five verticals. Every component shipped with documented states (default, hover, active, disabled, error) and was spec'd for developer handoff.
  
  

• Cross-vertical consistency. The system had to flex. A search bar in Flights needed to behave differently from one in Restaurants but both needed to feel unmistakably Etera. I used the token and component architecture to allow contextual variation without visual fragmentation.
  
  

Five Verticals

• Experiences (Activities & Entertainment) Designing for discovery at scale — 8,500+ experiences needed a browsing and filtering architecture that surfaced the right options without overwhelming the user. The challenge was making serendipitous discovery feel intentional.
  
  

• Flights Flights introduced the highest information density of any vertical route options, layovers, price variations, fare classes, and seat selection all in a mobile context. The design challenge was progressive disclosure: showing enough to decide, hiding enough to stay calm.
  
  

• Restaurants With 85,000+ listings, Restaurants was primarily a curation and trust problem. The design focused on signals that build confidence photos, reviews, cuisine tags, and availability combined with a booking flow that required minimal friction to complete.
  
  

• Hotels Hotels sits at the intersection of aspiration and logistics. The vertical needed to balance rich imagery and editorial feel (to inspire) with clear, structured comparison (to decide). I designed a system that shifted registers depending on where the user was in their journey.
  
  

• Lists Lists is the super app's memory a space for users to save, organise, and revisit places across all verticals. The design challenge was creating a pattern that felt native to each vertical type while remaining structurally consistent as a collection tool.
  
  

  

Design Engineering

Custom Figma Plugin As the team scaled and the file complexity grew, manual layer management became a bottleneck. Layer names were inconsistent, font usage was hard to audit, and handoff prep was eating design time. I built a custom Figma plugin using Cursor that automated two of the most repetitive tasks: layer renaming (enforcing a consistent naming convention across components) and font auditing (scanning the file for non-system fonts and flagging deviations from the token library). The plugin eliminated a manual process that had been costing the team hours per sprint.

Claude + Figma MCP I integrated Claude with the Figma MCP (Model Context Protocol) to explore AI-assisted design system operations automating file management tasks, running component audits, and testing prompts for design system generation. This wasn't just about personal efficiency; it was an experiment in what AI-assisted design workflows could look like at a product team level, and it directly informed how I approached the AI concierge design from a user perspective.

Design QA

Good design doesn't survive a bad build review process. At Etera, we established a structured Design vs Build review methodology that ran on a regular cadence across both iOS and Android build cycles.

Each review compared the live build against the Figma spec across four dimensions: visual fidelity (spacing, colour, type), interaction behaviour (transitions, states, gestures), edge cases (empty states, error states, long content) and component consistency (correct component usage, no one-off implementations).

Issues were logged with severity ratings and reproduced in shared documentation accessible to the full engineering team. The goal wasn't to police it was to close the feedback loop fast enough that implementation drift didn't compound across sprints.

Key Outcomes

What I learned

Designing for AI: Working on conversational UX taught me that AI-first products demand a different design vocabulary clarity, trust, and structure take precedence over visual polish.

Systems thinking: As the sole designer, investing in the system early felt like a constraint — but it became the foundation that made shipping across 5 verticals possible at all

Breadth at scale: Owning multiple verticals simultaneously pushed me to design systems and patterns that could flex across contexts without losing consistency

Domain fluency:Flights, hotels, restaurants, and experiences each have their own mental models and user expectations getting up to speed on each domain quickly was as critical as the design work itself