3 Months
November - January 24

Est8 Web App

A responsive web app designed for new, small-scale property investors. It aims to simplify the complex journey of real estate investment by offering comprehensive, easy-to-understand information about various properties.
iPhone mockup

Role

As a UX/UI Designer, my role in the Est8 project was UI-centric with a mobile-first approach, ensuring accessibility and ease of use on smaller screens. Collaborating and incorporating regular feedback from my mentor, I refined the design emphasising functionality melded with clean aesthetics to optimise the user experience.

Target Audience

Est8 is specifically crafted for budding investors in the property market. It provides a user-friendly gateway for those seeking a straightforward path to real estate investment, addressing their need for accessible and reliable property information.

The Tools Used In This Project

Est8 responsive design
Empathise

Persona

Rashida, our persona, is an IT consultant with a keen interest in technology. She represents Est8's ideal user – someone who values efficiency and intuitive tech solutions. Rashida's goal is to quickly identify lucrative real estate opportunities that align with her lifestyle and investment ambitions.
Empathise

User Flows

This User Flow outlines the step-by-step process that users, like Rashida, will navigate through in the Est8 app. From initial property exploration to detailed comparisons, each interaction is designed for efficiency and ease, ensuring a seamless journey towards finding the perfect investment property.

User Story 1

"As a user, I want to create a profile containing all my property criteria, so that I am recommended results most relevant to me."

User Story 2

"As a user, I want to be able to save or mark properties I am interested in, so that I can easily revisit them."

User Story 3

"As a user, I want to see how well a property meets my criteria or compares to other properties, so that I can refine my options."
Est8 project - user flow 3
Define

Problem Statement and Solutions

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.

Problem Statement 1

Rashida could be overwhelmed by the sheer volume of information available across various platforms, leading to difficulty in discerning relevant data for her investment decisions.
Proposed Solution
The app can offer a personalised dashboard that filters out the noise, providing Rashida with curated content relevant to her investment interests and criteria.
Focus Area

Problem Statement 2

Without professional guidance, Rashida might find it challenging to understand market trends and identify properties that match her financial goals and investment level.
Proposed Solution
The app can serve as a centralised repository of information, where Rashida can access all relevant property details, market analysis, and investment tips in one place.

Problem Statement 3

Given her busy lifestyle, Rashida may not have the luxury of time to visit numerous properties, some of which may not even align with her investment criteria.
Proposed Solution
Develop a comparison screen allowing Rashida to swiftly evaluate multiple properties side by side, making it effortless to identify the most promising options.
Two smartphones showcasing the Est8 app’s login screen and mortgage calculator, placed side by side.
Ideate

Low Fidelity Wireframes

These Low Fidelity Wireframes present an initial sketch of the Est8 app's user interface. They are designed to outline the fundamental structure and flow of the app, focusing on the layout of elements and user interaction points.
GIF showing the filter screen on the Est8 mobile app in low-fidelity wireframe format.

Landing Page

The landing page employs a clean and minimal design with a prominent call-to-action, ensuring that new users are guided smoothly into the registration or login process while also engaging them with featured properties.
Ideate

Mood Board

This mood board distills 'Est8's' essence, where clear design meets user needs. The visuals reflect an intuitive layout; each detail is purposeful, aiding quick comprehension and decision-making for property investors.

Informative

Concise, targeted information empowers users, making complex data accessible and understandable.

Functional

The design prioritises usability, ensuring essential features are at the forefront, delivering a seamless and productive experience.

Harmonious

A cohesive design language with intentional colour use and consistent typography guides users fluidly through their journey.
Moodboard showcasing a collection of visual inspirations, including colour palettes, textures, and design elements for the Est8 project.
Idate

Style Guide

The visual identity of Est8 is anchored in a modern, welcoming aesthetic. Our style guide prioritises trust and professionalism, using a carefully selected colour palette and typography that enhance readability and user engagement.
Primary brandmark of Est8, presented in the project’s signature colors.

The Logo

The primary logo stands out with bold typography, ensuring visibility and recognisability in light mode for impactful branding.
Learn more
Alternative logo variations for the Est8 project, showcasing different layout options.Est8 brandmark displayed on both dark and light backgrounds, demonstrating its versatility and clarity.
If the logo is going to be used next to other graphic elements, make sure there is enough space around it to let it breathe. Minimum of 40px.

The primary logo stands out with bold typography, ensuring visibility and recognisability in light mode for impactful branding.

If the logo is going to be used next to other graphic elements, make sure there is enough space around it to let it breathe. Minimum of 40px.
Button styles and variations designed for the Est8 project, showcasing different states and colour options.

Buttons & Iconography

The vibrant accent colour orange (#FF8165) draws attention to key information, enhancing the app’s informative aspect.
Learn more
Icons designed for the Est8 project displayed on a dark background, showing clear contrast and visibility.Icons designed for the Est8 project displayed on a light background, highlighting their adaptability to various background colors.
The icons feature a sleek outline style with rounded edges and are consistently sized at 24px by 24px. They're rendered in a muted shade of the Dark Grey (#3C3C43) with a transparency setting of 60%, giving them a subtle presence in the overall layout.
Colour palette used for the Est8 project, including primary, secondary, and accent colours.

Brand Colours

The vibrant accent colour orange (#FF8165) draws attention to key information, enhancing the app’s informative aspect.
Learn more
The clear distinction between the black (#080808) and white (#FFFFFF) elements promotes functionality through high readability, and balance is achieved with the secondary colour, soft grey (#F2EFEF), creating a visually pleasing and accessible interface that engages users without overwhelming them.
Est8 app screens displayed on smartphones lying flat on an orange surface, emphasising the user interface design.
Prototype

Mobile User Interface

These high fidelity wireframes represent the final design stage, where the 'Est8' app takes on its polished and practical form. Each screen focuses on legibility, ease of navigation, and visual appeal.
Introductory High fidelity GIF animation of the Est8 mobile app, showing an loading screen.

Landing Page

The 'Est8' landing page simplifies user entry with direct options for sign-up or login, and displays a subscription for timely property updates, if the user scrolls down.
Prototype

Dashboard Screen

Est8's responsive design guarantees a consistent and engaging experience across various devices. Our design ethos focuses on adaptability, ensuring that users enjoy full functionality and aesthetic integrity on any screen size.
Low Fidelity Wireframes
High Fidelity Wireframes
Low fidelity responsive design of the Est8 homepage screen on a mobile.

Small
Breakpoint

<430px
Low fidelity responsive design of the Est8 homepage screen on a tablet.

Medium Breakpoint

>834px
Low fidelity responsive design of the Est8 homepage screen on a desktop.

Large Breakpoint

>1440px
High fidelity responsive design of the Est8 homepage screen on a mobile.

Small
Breakpoint

<430px
High fidelity responsive design of the Est8 homepage screen on a tablet.

Medium Breakpoint

>834px
High fidelity responsive design of the Est8 homepage screen on a desktop.

Large Breakpoint

>1440px
Dashboard Responsive Design

Key Changes

Mobile to Tablet

The addition of more visual content and interactive elements on the tablet enhances the Rashida’s ability to engage with property details, which is more comfortably consumed on a larger screen. This design choice considers the user's ability to multitask on a tablet, as well as the increased screen real estate.

Tablet to Desktop

The expansion of the layout on the desktop version is tailored to accommodate the Rashida's need for more complex tasks and in-depth research, which is often associated with a desktop environment. This includes a broader view for detailed comparisons and a full-feature sidebar, capitalising on the user's expectation for a comprehensive workspace on their desktop.

Consistency

Enhanced Usability

Accessibility

Cognitive Load

The Est8 property browsing website displayed on a desktop computer, tablet, and laptop, showcasing featured properties and search criteria.
Responsive Design

Comparison Screen

Low Fidelity Wireframes
High Fidelity Wireframes
Low fidelity responsive design of the Est8 comparison screen on a mobile.

Small
Breakpoint

<430px
Low fidelity responsive design of the Est8 comparison screen on a tablet.

Medium Breakpoint

>834px
Low fidelity responsive design of the Est8 comparison screen on a desktop monitor.

Large Breakpoint

>1440px
Low fidelity responsive design of the Est8 comparison screen on a mobile.

Small
Breakpoint

<430px
High fidelity responsive design of the Est8 comparison screen on a tablet.

Medium Breakpoint

>834px
High fidelity responsive design of the Est8 comparison screen on a desktop monitor.

Large Breakpoint

>1440px
Comparison Responsive Design

Key Changes

Mobile to Tablet

Both mobile and tablet versions allow dual-view comparisons with the addition of a carousel to swipe through options. This design choice was implemented to maintain a consistent and fluid experience for Rashida, providing her with the ability to quickly compare properties without the need to navigate back and forth between different screens.

Tablet to Desktop

The   transition from tablet to desktop introduces a sidebar with icons representing Rashida's saved properties for a quick reference guide. This facilitates her cognitive processing by providing a clear overview and immediate access to her shortlisted properties. It's a design decision grounded in Hick's Law, reducing the time taken to make a decision, overall freeing up more time for Rashida.

Consistency

Enhanced Usability

Accessibility

Cognitive Load

A collection of Est8 app screens displayed on a tablet, laptop, and smartphone, showcasing a cohesive design across devices.
Summary

Est8 Property App

November - January 2024

Strengths of the Project

The Est8 app's design is deliberately crafted with the end-user in mind, streamlining the complex process of property investment. The interface is clean and accessible, facilitating a frictionless experience from initial search to final selection. Utilising tools such as Figma, the app integrates a coherent visual language with functionality, ensuring that users can easily interpret and act on property data. This project demonstrates a deep understanding of the UX principles necessary to empower users with confidence in their investment decisions.

Areas for Improvement

Areas such as interactive design elements and user engagement would need further refinement through iterative development and testing. For example, in refining interactive design elements, I would develop more intuitive touch interactions for the property comparison feature, allowing users to more seamlessly navigate between different property details. This enhancements would be shaped by user behaviour metrics and A/B testing outcomes to ensure they meet the users' needs and preferences.

Insights Gained

The creation of Est8 offered insights into the essential balance between user interface design and functionality. The project highlighted the significance of aligning the app's design with user expectations and the industry's best practices, fostering a solution-oriented mindset for UX design.

Obstacles

The project's hypothetical nature posed unique challenges, particularly in simulating real-world user interactions and data management. It emphasised the need for adaptability in design thinking to overcome constraints and envisage practical user scenarios.

Whats Next

To further enhance the product's effectiveness, conducting user interviews will be pivotal, allowing for the collection of targeted feedback to inform iterative design refinements. These steps are aimed at personalising the user experience, ensuring that Est8 not only meets but anticipates user needs.
User holding a phone displaying the Est8 app interface while standing outdoors.
Est8 mobile app interface displayed on a smartphone with a bright orange background, emphasising the app’s features.
Close-up of a hand holding a smartphone with the Est8 app open, showing property listings.
Est8 app interface shown on various devices, including a smartphone, with a plant and a notebook in the background.

Want to See More?

Check out other projects I’ve worked on and discover how I can bring value to your business.
Explore My Portfolio