Rui Albasini Portfolio

HABIT3

WEBSITE REDESIGN

A redesign for a real estate website in Portugal, created to improve clarity, structure, and appeal for the target audience.

Desktop Prototype

Open Website

Moradia T3 nova, com piscina em Salir do Porto

Leiria>Caldas da Rainha>Salir do porto

venda

498 000 €

150 m2

9:41

Role & Skills:

I was responsible for the full design of the project.
I handled the entire redesign process, including research, ideation, visuals, and prototyping.
That included:

End-to-End Product Design

Ux research & Audit
Visual design & Prototyping
Junior Designer mentorship

THE TECH I USED:

TEAM:

Senio Product Designer

Junior UI Designer

Stakeholder

TIMELINE:

2024

4 Months

ABOUT THE PROJECT

Habit3 is a real estate company in Portugalserving buyers across the Minho region of Portugal. Their website was an important touchpoint for the business, but the previous version was outdated, had serious layout and structure problems that made the experience feel confusing and outdated,.

Key Challanges

My goal was to redesign the website into something more usable, visually appealing, and better aligned with the needs of its end users and f

or that i needed to:

My goal was to redesign the website into something more usable, visually appealing, and better aligned with the needs of its end users and f

or that i needed to:

Designing powerful yet simple filters

Designing powerful yet simple filters

Showcase properties with stunning visuals

Showcase properties with stunning visuals

Reflect Portugal Real Estate essence throughout engaging design

Reflect Portugal Real Estate essence throughout engaging design

Decrease Time to Find a Property and how easy and quickly users filter to a relevant listing.

Decrease Time to Find a Property and how easy and quickly users filter to a relevant listing.

Protecting user data (contact forms, payments) and follow GDPR, data security compliance.

Protecting user data (contact forms, payments) and follow GDPR, data security compliance.

Search Property

The best options

😟

PROBLEMS

The existing website had major issues in how content was structured and presented. Important information was harder to scan, the layout lacked consistency, and the overall experience did not reflect the quality or trust that a real estate company should communicate.

Time Consuming search process:

Searching through multiple websites and listings for relevant is inefficient and tiring.

Inadequate User Experience:

Many real estate websites are difficult to navigate, making it frustrating for users to find relevant properties quickly.

Time Consuming search process:

Many real estate websites are difficult to navigate, making it frustrating for users to find relevant properties quickly.

😍

SOLUTIONS

Finding the perfect home or investment can be overwhelming. I wanted the final product to feel clearer, more modern, and more aligned with the expectations of potential buyers.

Advanced and personalized Search and filtering features:

By addding a more advanced search and filtering tools based on preferences like location, price range, amenities and property type, makes the search process faster and more efficient

Transparent Listings:

Detailed information on properties, including price history, neighborhood insights,potential investments returns, ensures users make informed decisions.

User Friendly design:

With an intuitive UI/UX Design, i can make browsing , searching and booking properties simple and more intuitive, ensuring a hassle-free experience for both buyers and renters.

THE PROCESS

How i approached the redesign

A structured four-phase process. from diagnosis to delivery with junior designer mentorship woven throughout.

Research

Audit & Research

I reviewed every page of the existing site, catalogued usability issues, and mapped the decision journey of a typical property buyer in Portugal. This grounded every design decision that followed.

Wireframing

Ideation & Wireframing

Working with a junior designer, I led rapid wireframing sessions to explore structural alternatives. We tested several navigation models before settling on the one that best reduced time-to-find.

Visuals

Visual Design & System

I built the full design system from scratch — colour tokens, typography scale, spacing, icon set, and component library — before composing the final screens. Consistency was non-negotiable.

prototyping

Prototyping & Usability Testing

High-fidelity prototypes were tested with 20 participants from the target demographic in the Minho area. Feedback directly informed three rounds of iteration before final handoff.

User research

Understanding who was actually using this

Before drawing a single frame, I needed to understand the people using the site.

I ran a combination of stakeholder interviews, user surveys, and behavioural analysis using session recordings from Hotjar to build a picture of real usage, not assumed usage.

METHOD 1

Stakeholder interviews

3 sessions with the founder and sales team to understand business goals, key user types, and friction points they observed daily.

METHOD 3

User surveys

24 responses from past visitors and current leads focused on what brought them to the site and what stopped them making contact.

METHOD 3

Session recordings

Reviewed 40+ Hotjar sessions to identify rage clicks, dead zones, and drop-off points in the property browsing flow.

METHOD 4

Competitor analysis

Reviewed 6 competitor real estate sites in the Portuguese market, documenting patterns that worked and conventions users had already learned.

Key research findings

Expected a search bar on the homepage

62%

Couldn't easily find what they came for

70%

Left without making contact

80%

Browsed on mobile first

75%

Wanted to see price before contacting

92%

Valued photos over written descriptions

83%

User personas

Joao, 38

First-time buyer, Porto

"I need to compare options before I talk to anyone. I want to see the price upfront and don't need it to make me call to find out."

Goals

· Browse listings independently

· Filter by budget and size

· Shortlist before contacting

Frustrations

· Hidden prices

· Outdated listings

· Complex contact forms

· No mobile-friendly layout

Maria, 52

Real Estate Investor, Braga

"If the website looks messy, I assume the company is too. Trust is everything when you're spending this kind of money."

Goals

· Find a smaller family home

· Understand the process

· Speak to a real person quickly

Frustrations

· Visual clutter

· Jargon-heavy copy

· No clear next step

· Lack of trust signals

Thomas, 44

Expat buyer, USA

"I'm buying remotely so I need to feel confident before booking a visit. Photos, location, and clear specs are everything."

Goals

· Research thoroughly online

· Evaluate location & neighbourhood

· Book a virtual viewing

Frustrations

· Low-res images

· No map integration

· Hard to assess area remotely

· Language barriers

WHY THE ORIGINAL DESIGN NEEDED A RETHINK

Crowded Dropdown Section:

The dropdown fields in the "Procurar um imóvel?" section are cramped, making it visually overwhelming and hard to focus on individual elements.

Low contrast Buttons

The dropdown fields in the "Procurar um imóvel?" section are cramped, making it visually overwhelming and hard to focus on individual elements.

Inefficient Use of Space:

The dropdown fields in the "Procurar um imóvel?" section are cramped, making it visually overwhelming and hard to focus on individual elements.

Uneven Image Scaling:

Property thumbnails in the "Imóveis em Destaque" section seem inconsistent in terms of size and cropping.

4 different fonts are beeing used:

using this amount of fonts can make a website look cluttered and inconsistent, reducing readability and visual harmony. It can also slow down load times due to additional font files.

Overwhelming Dropdown Options

Requiring users to interact with six dropdowns in the "Procurar um imóvel?" section may feel tedious and overwhelming.

Failing contrast ratios

Primary CTAs measured at 2.1:1 contrast far below the WCAG AA requirement of 4.5:1 for normal text.

Four typefaces in use

Uncontrolled type choices destroyed brand consistency and added 380KB of unnecessary font loading on every page load.

No location awareness

No active states, no breadcrumbs, no section headings matching nav labels. Users had no way to know where they were.

Inconsistent thumbnails

Property cards used four different image dimensions. Uneven cropping prevented meaningful comparison and looked unfinished.

Invisible primary action

The contact button measured 1.8:1 contrast against its background. Users literally could not see the most important action.

STYLEGUIDE FOUNDATIONS

Colors

Typography

Iconography

Spacing

Grid System

Main Color

#FF3C9A

Primary Green (#45A770) is a lively, medium green with a slightly cool undertone.

The color evokes a sense of balance, freshness, and reliability. It sits between a deep forest green and a bright mint, making it both vibrant and professional conveying a sense of eco-friendliness and sustainability, appealing to buyers interested in green living and Creating a welcoming and trustworthy feel, which can encourage user engagement.

Color Tokens

:root {

/*colors */

--color-bg-light: #F5F5F5

--color-primary: #45A770 100%

--color-primary-50: #FAE7F0 50%

--color-primary-20: #9F47E0 20%

--color-text-title: #292D32

--color-text-text: #292D32

--color-text-info: #D38E13

--color-info-danger: #FF5A4F

--color-info-Warning: #FFD596

--color-info-Success: #32C997

}

UI Colors

Background Light

#F5F5F5

Primary Color

#45A770

Primary 50%

#45A770

Primary 20%

#45A770

Font Colors

Title Color

#0F1112

Text Color

#151A21

Categorical Colors

Disabled

#FF5A4F

Danger

#EB5757

warning

#F2C94C

Success

#43B27F

REDESIGN

EXPLAINED

Smart progressive search

One input, intelligent suggestions, filters that appear only as needed. The core search task "find a 3-bed under €400k in Braga" now takes 4 interactions instead of 10.

Standardised listing cards

Fixed 16:9 image ratios, consistent spec layout, price always in the same position. Users can scan 12 listings and extract meaningful comparisons in under 10 seconds.

Improved Search Experience

The property search bar was streamlined with clear filters and larger inputs, helping users refine results more efficiently.

Persistent enquiry CTA

The contact action follows the user through the listing page. It doesn't interrupt, but it's always present removing the need to hunt for the form after a long scroll.

Modern Card Layouts

Property listings now feature larger photos, clear pricing, and key highlights at a glance, improving scannability.

GDPR-compliant contact flows

Clear consent language, plain-English privacy summary, explicit data handling. Compliance was designed in from the beginning and not retrofitted at the end.

VALIDATION & USABILITY TESTING

Design is only as good as its usability and what users can actually do with it.

The feedback was overwhelmingly positive. Users noted that the new layout felt "natural" and that finding specific property details was significantly faster than on the previous site. The visual appeal was also highlighted as a key factor in building trust with the brand.

Participants consistently described the redesign as feeling "natural" and found specific property details significantly faster than on the original site. Trust in the brand also improved meaningfully.

20/20

Users Approved the Redesign

"Finding a property felt completely natural. I knew exactly where to look for!"

Usability test participant

THE OUTCOME

By restructuring how users interact with listings, we shortened the property discovery cycle and improved conversion at every stage of the funnel.

+31%

Task completion rate on property search flow

-42%

Time on task the users found relevant listings faster

20/20

Test participants approved the new experience

Want to work on your next UI/UX PROJECT?

I take on selected projects. If your product needs clarity, structure, or a complete rethink, let's talk!

Book a Quick Call