01 / Cresco / Neon Wood

From Architectural Plans
to a Clearer Booking Experience

Connecting architectural understanding with UI/UX thinking to make buildings, floors and apartment layouts easier to understand during selection.

My contribution: Plan interpretation, graphic simplification and digital visual assets
Context: Apartment-booking website renewal · Team collaboration
Tools / approach: Figma · Architectural understanding · UI/UX thinking

Two plan-based building visuals arranged around a courtyard, with street names and building labels retained — Building overview · Static Figma design export, cropped to the spatial visual. Interface labels provide team context.

01 / Challenge

Making architectural information useful during apartment selection.

A technical plan can explain a building in detail, but still be difficult for a prospective resident to read. The booking experience needed spatial visuals that help people understand the relationship between a property, a floor and an individual apartment.

02 / My Contribution

Reading the architecture. Preparing the visual assets.

I interpreted architectural plans and transformed them into simplified building and floor visuals using Figma. My architectural education helped me read the spatial structure; UI/UX thinking guided how to prepare that information for apartment selection.

I contributed the architectural interpretation, graphic simplification and digital visual assets within a wider website renewal team.

01
Interpret
Read the architectural source material and identify the spatial relationships relevant to selection.
02
Translate
Prepare simplified digital representations with a clear visual hierarchy in Figma.
03
Apply
Prepare building and floor assets for use within the booking website by the wider team.

03 / Design Decisions

Two scales, one spatial language.

The selected exports show the clearest connection between architectural understanding and digital visual communication: a building overview followed by a closer floor view.

Original source drawings are not included in the supplied exports. These are two selection scales, rather than a before-and-after comparison. Each plan can be enlarged for closer inspection.

Static building-selection design with Building A and Building B, surrounding streets, courtyard, floor labels and a compass — 01 / Property overview · Static Figma export. Floor controls and availability labels are interface context.

Building scale

Understand the property as a whole.

Keep orientation visible: The courtyard, surrounding streets and compass anchor the plans in their setting.
Separate the buildings: Pale blue and mint fills distinguish the building footprints while the architectural linework remains visible.

Purpose in selection: help a resident understand which building they are considering and where it sits.

Static floor-selection design showing rooms, corridors, stairs and shared spaces around a courtyard — 02 / Floor detail · Static Figma layout, cropped to the plan. Apartment card and controls are team context.

Floor scale

Locate a room within the floor.

Retain useful spatial detail: Walls, door openings, stairs and circulation show how rooms connect to the rest of the building.
Make room boundaries legible: Colour-filled apartments sit against neutral shared areas, giving the plan a clearer visual hierarchy.

Purpose in selection: help a resident relate an apartment to its access, neighbouring rooms and shared spaces.

04 / Website Application

Spatial assets within the finished booking experience.

The supplied website screenshots show building and apartment selection in context. They show a separate property example from the Figma exports above.

The interface, development, booking functionality and implementation were handled by the wider project team. The images here document static design layouts and supplied website screenshots.

Visit Neon Wood’s booking website (opens in a new tab)

Supplied screenshot of the implemented Neon Wood building-selection website, showing five building plans — 01 / Building selection · Supplied screenshot of the finished Neon Wood booking website. Plan visuals within the wider team’s interface.

Supplied screenshot of the implemented Neon Wood apartment-selection website, with a floor plan and apartment status markers — 02 / Apartment selection · Supplied website screenshot. Floor-plan visuals within the wider team’s interface.

05 / Deliverables

Architecture translated into digital visual assets.

Plan-based building visuals for the property-selection overview
Floor visuals showing apartments within their spatial context
Website-ready visual assets prepared in Figma

The visual approach is intended to make spatial information easier to understand during apartment selection.

Next project / 02PSI Software

Supporting a Brand Transition Across Web and Marketing

Read case study

From Architectural Plans
to a Clearer Booking Experience

Making architectural information useful during apartment selection.

Reading the architecture. Preparing the visual assets.

Interpret

Translate

Apply

Two scales, one spatial language.

Understand the property as a whole.

Locate a room within the floor.

Spatial assets within the finished booking experience.

Architecture translated into digital visual assets.

Supporting a Brand Transition Across Web and Marketing

Let’s make
something clear.

Project image

From Architectural Plansto a Clearer Booking Experience

Making architectural information useful during apartment selection.

Reading the architecture. Preparing the visual assets.

Interpret

Translate

Apply

Two scales, one spatial language.

Understand the property as a whole.

Locate a room within the floor.

Spatial assets within the finished booking experience.

Architecture translated into digital visual assets.

Supporting a Brand Transition Across Web and Marketing

Let’s makesomething clear.

From Architectural Plans
to a Clearer Booking Experience

Let’s make
something clear.