← All workWork / 04 — Thallo BuildingNext case →

CASE 04 · UI/UX & DIGITAL PRODUCT DESIGN

Thallo Building

Selling 2,068 m² of green office space in Larnaca before the building exists.

ROLE
UI/UX Designer
TEAM
Absolute Websites
TIMELINE
3 weeks · 2026
SCOPE
UX · IA · UI · Responsive
TOOLS
Figma · FigJam
LIVE
thallobuilding.com ↗
# Home — Desktop1440 × 900

01 — PROBLEM

Thallo is still under construction, so there is no finished building to show. Companies looking for an office need to picture the space, understand what they can rent and decide if it is worth a viewing — all from renders and plans.

How might we help a company understand the building and the available space in one visit, and make booking a viewing the natural next step?

02 — RESEARCH

04Office developments reviewed
03Audience groups defined
05Journey stages mapped
09Floor areas specified

Main finding: companies choosing an office look for hard facts first — size, location, features, completion date. Clear numbers beat lifestyle text.

03 — AUDIENCE

Who the site is for, what each group needs, and the page that answers it.

GC

Growing companies

“Is there a floor that fits our team?”

NEEDS

Flexible floors they can grow into.

→ Floor specs

RH

Regional HQs

“Can we take all of it?”

NEEDS

The whole building under one lease.

→ FAQs

OM

Office managers

“How will it work day to day?”

NEEDS

Parking, EV charging, climate control.

→ Features

04 — JOURNEY MAP

What a visitor does, thinks and struggles with at each step, and the design decision that answers it.

DiscoverUnderstandPicture itCompareBook
EMOTION
STAGEDiscoverUnderstandPicture itCompareBook
DOINGSees a listing or adScrolls the pageLooks at rendersChecks floors and featuresRequests a viewing
THINKING“What is Thallo?”“Why this building?”“What will it feel like?”“Which floor fits us?”“Can we see it soon?”
PAIN POINTNothing finished to visitLifestyle text instead of factsHard to imagine from plansAreas spread across PDFsLong contact forms
DESIGN RESPONSEClear headline and renderKey facts row with numbersInterior renders in HighlightsFloor tabs: indoor, outdoor, totalFour-field form behind Book a Meeting
  1. 01 Discover

    DOING

    Sees a listing or ad

    THINKING

    “What is Thallo?”

    PAIN POINT

    Nothing finished to visit

    DESIGN RESPONSE

    Clear headline and render

  2. 02 Understand

    DOING

    Scrolls the page

    THINKING

    “Why this building?”

    PAIN POINT

    Lifestyle text instead of facts

    DESIGN RESPONSE

    Key facts row with numbers

  3. 03 Picture it

    DOING

    Looks at renders

    THINKING

    “What will it feel like?”

    PAIN POINT

    Hard to imagine from plans

    DESIGN RESPONSE

    Interior renders in Highlights

  4. 04 Compare

    DOING

    Checks floors and features

    THINKING

    “Which floor fits us?”

    PAIN POINT

    Areas spread across PDFs

    DESIGN RESPONSE

    Floor tabs: indoor, outdoor, total

  5. 05 Book

    DOING

    Requests a viewing

    THINKING

    “Can we see it soon?”

    PAIN POINT

    Long contact forms

    DESIGN RESPONSE

    Four-field form behind Book a Meeting

05 — HYPOTHESES

Five hypotheses, each with its own metric. Drawn as variants of one component: same structure, different bet.

❖ Hypothesis

  1. H1

    “Premium Offices in Larnaca” with a “Book a Meeting” button explains the offer in one screen.

    METRICScroll depth and hero clicks
    High impact
  2. H2

    Six feature cards are easier to scan than long text.

    METRICTime on the features section
    Medium impact
  3. H3

    Floor tabs with indoor, outdoor and total area help companies find the right space.

    METRICFloor tab clicks, then meeting requests
    High impact
  4. H4

    An FAQ answers common questions and reduces simple enquiries.

    METRICFAQ opens, repeated questions
    Medium impact
  5. H5

    A four-field form increases viewing requests.

    METRICForm submissions per 100 visits
    High impact

06 — PRIORITISATION

Each hypothesis placed by expected impact and the effort to build it. The headline with Book a Meeting and the short form went first; floor tabs were a big bet, as every floor needed checked areas.

QUICK WINS
BIG BETS
NICE TO HAVE
LATER
IMPACT ↑EFFORT →H1“Premium Offices in Larnaca” with a “B…H2Six feature cards are easier to scan t…H3Floor tabs with indoor…H4An FAQ answers common questions and re…H5A four-field form increases viewing re…
  1. H1“Premium Offices in Larnaca” with a “Book a Meeting” button explains the offer in one screen.
  2. H2Six feature cards are easier to scan than long text.
  3. H3Floor tabs with indoor, outdoor and total area help companies find the right space.
  4. H4An FAQ answers common questions and reduces simple enquiries.
  5. H5A four-field form increases viewing requests.

07 — VISITOR FLOW

The main paths through the site, including where visitors split.

Ready to talk?
Hero
Book a meeting
Project value
Features
Floor specs
Viewing form
yesnot yetbook a meeting
Ready to talk?
Hero
Book a meeting
Project value
Features
Floor specs
Viewing form
yesnot yetbook a meeting

08 — SITEMAP

Information architecture agreed with the client before wireframes.

One page
  • Home
    • Book a Meeting
  • Value
    • 4 key facts
  • Features
    • 6 feature cards
  • Highlights
    • 3 stories
  • About Us
  • Specs
    • 9 floor tabs
  • FAQs
    • 6 questions
  • Viewing form
    • 4 fields

09 — WIREFRAMES TO UI

Low-fidelity layout first, agreed with the client, then the final interface.

#  Wireframe
#  Final UI
Thallo Building final UI

10 — SOLUTION

Thallo Building solution screens 1124
Thallo Building solution screens 23
  1. 1

    One-page structure

    The site has one job — viewing requests — so everything sits on one page.

  2. 2

    Key facts row

    Floors, completion, green features and access as short numbers.

  3. 3

    Project highlights

    Three stories with interior renders: premium offices, eco working and raised ceilings.

  4. 4

    Six feature cards

    Smart building, solar, raised floors, efficient HVAC, EV charging, architecture.

  5. 5

    Floor specs

    Nine floor tabs, each with indoor, outdoor and total area.

  6. 6

    Trade-off

    One long page keeps the path short but needs clear section titles.

11 — SCREENS

Key screens on desktop and mobile.

# Home — Desktop1440 × 900
Home — Desktop
# Features — Desktop
Features — Desktop
# Floor specs — Desktop
Floor specs — Desktop
# Mobile — Home
Mobile — Home
# Mobile — Key facts
Mobile — Key facts
# Mobile — Floor specs
Mobile — Floor specs
# Mobile — FAQ
Mobile — FAQ

12 — WHAT WE MEASURE

Each hypothesis is tied to one event on the live site. Targets are set once the first month of data gives a baseline.

STAGEHYP.METRICHOW IT’S TRACKEDTARGET
UnderstandH1Hero clicks and scroll depthClick on Book a Meeting, scroll-depth eventBaseline after launch
ExploreH2Time on the features sectionTime-in-view on the six feature cardsBaseline after launch
CompareH3Floor tab clicks, then meeting requestsClick event on each floor tabBaseline after launch
DecideH4FAQ opens, repeated questionsOpen event per question; questions in enquiriesBaseline after launch
BookH5Form submissions per 100 visitsSubmit event on the viewing formBaseline after launch

13 — RESULTS

Validated before build

Reviewed with the client at wireframe stage and with the agency before development, then checked on desktop, tablet and mobile. After launch, hero clicks, floor tab clicks and form submissions are tracked.

What I would do next

When a building does not exist yet, clear numbers and good renders do most of the selling. Next: interactive floor plans, a construction progress section and a brochure download for an email.

NEXT CASE — 05Pcela Flower