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."
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.

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.
GIF showing the login screen of the Est8 mobile app in low-fidelity wireframe format.

Registration Screen

The registration process is streamlined with clearly marked fields, reducing cognitive load and guiding the user step-by-step to create a personalised experience on the app.
GIF showing the filter screen on the Est8 mobile app in low-fidelity wireframe format.

Property Criteria Input

This screen offers an interactive form for users to input their property search criteria, with intuitive controls like sliders and drop-down menus, aimed at delivering tailored property recommendations.
GIF showing the homepage with a property listing in the Est8 mobile app in low-fidelity wireframe format.

Dashboard Screen

The card layout on the dashboard allows for quick scanning of information, providing users with a clear and organised view of recommended properties. This user-friendly approach enables efficient decision-making and easy access to property details.
GIF of the selected property page with detailed information on the Est8 mobile app in low-fidelity wireframe format.

Property Information

Detailed property listings utilise a clear hierarchy of information, offering users an immediate understanding of property features like location and price, facilitating informed decision-making.
GIF showing the saved properties screen of the Est8 mobile app in low-fidelity wireframe format.

Saved Properties

A dedicated screen for saved properties provides users with a personal space to revisit and compare their favourite listings, enhancing the property selection process.
GIF of the comparison screen with side scroll of properties and location map on the bottom in the Est8 mobile app’s low-fidelity wireframe.

Comparison Screen Horizontal

The comparison screens 7 & 8  are designed to enhance the user experience by providing a clear layout for evaluating multiple properties. The horizontal view allows for a focused comparison between two properties
GIF of the comparison screen with normal down scroll of properties and location map on the bottom in the Est8 mobile app’s low-fidelity wireframe.

Full Comparison Screen

While the full comparison screen enables users to assess a broader range at once. Both layouts emphasise critical decision-making factors like price, attributes, and location, ensuring users have all the necessary information at their fingertips.
GIF displaying the menu screen of the Est8 mobile app in low-fidelity wireframe format.

Menu

The menu is designed for easy navigation, with labeled buttons that lead to the main areas of the app, ensuring users can quickly find and access the tools they need.
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.
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.

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.
High fidelity GIF showing the login screen of the Est8 mobile app with fields for email and password entry.

Log In Screen

Offers returning users a swift login with credentials or convenient access via Google or Apple.
High fidelity GIF displaying the sign-up screen of the Est8 mobile app with user registration fields.

Sign Up Screen

Streamlines new user registration with options for manual entry or quick social sign-ups through Google or Apple.
High fidelity GIF showcasing the user input and search functionality within the Est8 mobile app 2.

Property Criteria Input

Users can specify their search with filters such as location radius, property type, and budget, with the option to set alerts for matching properties.
High fidelity GIF showcasing the user input and search functionality within the Est8 mobile app.

Property Criteria Input

(Expanded)
Expands upon the search criteria, offering more in-depth filters like new builds, auction properties, and renovation potential, for users to fine-tune their property search.
High fidelity GIF showing the homepage of the Est8 mobile app with property listings.

Dashboard Screen

This screen showcases tailored property suggestions for the user, featuring a visually-driven list with key details and pricing, allowing for quick overview and selection.
High fidelity GIF featuring detailed property listings within the Est8 mobile app.
Property Information
Offers an in-depth view of a selected property with a summary, virtual tour, historical sales data, detailed amenities, and an interactive mortgage calculator.
High fidelity GIF of the Est8 mobile app showing saved property results based on user preferences.

Saved Properties

A personalised list displaying properties saved by the user, with options to sort and manage them according to preferences or added notes.
High fidelity GIF demonstrating the property comparison feature within the Est8 mobile app

Comparison Screen

The comparison tool displays properties on a map and provides a concise view for easy evaluation of features and prices.
High fidelity GIF demonstrating the property comparison feature within the Est8 mobile app

Menu

A navigational tool that organises the app’s features into clear, expandable sections such as browsing properties, managing saved listings, and performing detailed comparisons.
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 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 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.

Want to See More?

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