Different breakpoints design next to a pool with view of a city background

Overview

meeSera web app offers exciting opportunities to users by tackling the complexities of the real estate domain and contributing to user-friendly solutions. Preliminarily, I envision emphasizing a clean and user-centric interface, prioritizing efficient property searches and an engaging user experience to enhance the overall property exploration process. This case study reflects my enthusiasm about combining my UX/UI design expertise with the intricacies of the real estate industry to create a compelling and user-oriented digital solution.

My Role

  • UI/UX Designer

Tools

  • Figma
  • Pen & Paper

Timeline

  • 1 month

Objective & Context

A responsive web app that provides property buyers with information on properties of interest. Real estate investment is an increasingly popular way for individuals to achieve financial security. It is an exciting and emotional experience, but often complicated.

While there are plenty of blogs and agencies providing information, often, buyers new to the market may struggle to get started without professional guidance and waste time viewing properties out of their range. This web app will provide them with the expertise needed to get started efficiently.

THE DESIGN PROCESS

  • User Persona
  • User Flow
Ideate
  • Wireframes
  • Breakpoints Design
Design
  • Mid-Fidelity Design
  • Mood Board
  • Animation
  • Style Guide
  • High-Fidelity Design
  • Prototype

DEFINE

Persona

Rachel is an IT consultant for a growing tech company, she is frequently on the go. She lives with her family in a city on the east coast, and spends most weekends in the countryside. She is a tech savvy who uses online tools regularly to help schedule her work, social life, and communicate with friends, family, clients, and colleagues.

A woman behind laptop using the app

“I want to provide my family with financial security. I’ve been considering buying property for a while, and am looking for a tool that can help me find what I’m looking for, quickly!”

Goals

Rachel is new to real estate, so she needs a tool that will help her:

  • Search for properties, inputting criteria relevant to what she’s looking for.
  • Easily view and return to listings she’s interested in.
  • Receive relevant and comprehensive information about properties.

User Flow

Based on user persona goals and need provided above, I created user flows to meet the user needs and project requirements.

A real estate agent in a meeting using the web app

IDEATE

Wireframes

User Flow 1
meeSera mobile low-fidelity wireframes task 2

Breakpoints Design

meeSera breakpoints layout and grid
tablet and desktop paper wireframes

DESIGN

Mid-Fidelity Design

Figma mobile mid-fidelity wireframes
tablet and desktop mid-fidelity screens

Mood Board

meeSera mood board

This mood board aims to communicate trust, sophistication, and an elevated real estate experience, catering specifically to a discerning audience with an appreciation for timeless joy, safety, and comfort.

The steel blue, contributes a touch of professionalism, while the secondary color, powder blue, introduces a subtle yet effective contrast, creating a harmonious palette. Light green as the tertiary color injects a sense of vitality.
The Limelight font, with its elegant cursive style, adds a distinctive and sophisticated typographic identity to the design. Accompanied by striking imagery featuring modern villas and interiors, the mood board aims to inspire and underscore the aspirational nature of the real estate offerings.

Play Animation!

Style Guide

meeSera color palette
meeSera Typography
meeSera UI Elements
meeSera Imagery

High-Fidelity Design

Mobile High-fidelity screens
tablet and desktop high-fidelity screens
A man wearing suit in the office using desktop web app
A woman using tablet web app in front of a house

Try it!

What I learned

  • Delved into UI design principles, encompassing color theory, typography, layout, and responsiveness.
  • Explored common UI design patterns and honed their effective application.
  • Acknowledge the need for ongoing learning and exploration to stay updated with industry trends.
different breakpoint responsive app design

Thank you!
Would you like to see more?

arrow down

Other Projects

welhub mockup

UX/UI Design

WelHub

A health and wellbeing mobile app

LVEB hero image

UX/UI Design

La vie est Bella

A dog daycare responsive web app

Let's work together!

Get in touch and drop me a line.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top