Overview
Client: HomeFront / All-in-one real estate platform
Project Duration: Feb 2024 / 6 months
Role: Lead product designer
Project Duration: Feb 2024 / 6 months
Role: Lead product designer
Homefront is an ambitious real estate platform designed to streamline the process of buying properties, and providing profession property services in multiple countries. The platform includes a website, mobile app and a web app, providing users & professionals with access to real estate services.
*Disclaimer - As this work is under NDA, I have scrubbed off screens, business strategies and key insights. This case study provides a structured overview of the deliverables, design system exploratory & implementation process, highlighting the challenges, objectives, process steps, results, and lessons learned. It serves as a comprehensive document for showcasing the outcomes of HomeFront's product.
Role: Lead product designer
Home front approached me to design their entire list products. Providing UX, information architecture, user flows, branding, & UI.
- Worked with a US based researcher to deliver more detailed research on buyers, sellers, agents, brokers e.t.c to gather qualitative insights about their needs, behaviours, and pain points.
- Analyse data from various research methods (interviews, surveys, usability tests) to identify trends, patterns, and key insights that can inform business and design decisions.
- Content audit & Tested existing competitor market app to find out pros and cons.
Tools
Figma, After effects, C4D, Lookback, Post it, Google docs, Google sheets
Research techniques
Conducting activity plans and prepping designs for user testing
Performing card sorting, tree-testing and guerilla sessions
Label mapping & App Auditing
Workshops with Wider team
Prototypes
Interaction design
Pattern library creation
Business problem
1. Lack of process knowledge and guidance
Many buyers, particularly first-timers, find the process confusing and lack the necessary knowledge to navigate it effectively.
2. Complex Buying Process
Legal and Administrative Steps: The process involves numerous legal and administrative steps, including surveys, searches, and contract negotiations, which can be daunting and time-consuming.
"I need an app that helps me organise and manage my house documents documentation efficiently."
- Participant 1
"I need an app that can guide me through every step of buying a home and keep me organised."
- Participant 2
Outcome & Deliverables
- Mortgage broker web app platform & client portal
- Modular and reusable design system.
- Website
- Mobile app iOS first then android
- Flexible brand, visual & motion languages
1. UI Design
Web app portal & landing page UI
2. Mobile app key screens
Project Plan
1. Discovery Kick-off
The kick-off phase for involved several crucial steps to ensure the design and development process aligns with user needs and business goals. This phase sets the foundation to understand the buying process and the professions involved in it. Here's an overview of the UX kick-off phase:
2. Ecosystem mapping: Finding out all the key professions involved with the U.K. home buying process.
Creating an ecosystem map for buying a home in the UK involves identifying and illustrating the various entities, stakeholders, and processes involved in the home-buying journey. The map highlights the relationships and interactions between these components. Below is a detailed ecosystem map for buying a home in the UK.
3. Card sorting
First, I needed to define the categories (main sections of the app) and cards (specific features or items users would find within those categories).
To define them, I used competitor analysis of existing apps and platforms to see what is good and bad.
Asked 10 test users to sort the cards into the categories that make the most sense to them in hierarchy of what type of information they are looking for if they are buying a home.
*The actual test participant sampling was about 34 people.
4. Personas
Created 4 key job personas to guide the starting concepts of the designs and flows. This created parameters and constraints to make the product financially viable first.
I read through the data and identify the topics that surface in the data.
Created codes for each topic
Coded themes according to topic
Collate all the themes that are related to each descriptive code
Design System
This is a structured overview of the design system exploratory & implementation process, highlighting the challenges, objectives, process steps, results, and lessons learned. It serves as a comprehensive document for showcasing the impact of the design system on Homefront product.
"We want our designers and developers to access customisable components to speed their design workflow"
Objectives
Consistency: Establish a consistent visual and interactive language across all digital products.
Efficiency: Improve design and development efficiency by providing reusable components and guidelines.
Scalability: Easy scaling of products by creating a modular and adaptable design system.
Process
1. Audit & Research
I conducted a thorough analysis of existing products of all-in-one platforms, identifying common design patterns, and assessing pain points in the current workflow. Gathered feedback from designers, developers, and product managers to understand their needs and challenges.
UX/UI Methodologies & Techniques:
- Specific component UX research
- UI design
- Style Guide
- Pattern library
- UX Audit - Used atomic design aproach. to build pattern library and components
2. Definition and Planning
I outlined the key components and design principles that would form the foundation of the design system. Defined a set of UI components, typography, colour palette, and interaction patterns. Established guidelines for consistency and usage.
Design Exploration
Created initial design concepts and prototypes to showcase the potential look and feel of the design system. Gathered feedback from stakeholders and iteratively refined the designs based on their input.
Example of nested components development
3. Component Library Development
Established a comprehensive component library, including buttons, forms, navigation, typography, and other key elements. Ensured that each component was documented with usage guidelines, accessibility information, and code snippets.
- UI Inventory - Laid out each horizontally & started building atomic design aproach. to build pattern library and components
List of components development
4. Prototyping and Iteration will be done by a specialist prototyper and will participate in note taking and supporting.
*Currently taking place
Will be conducting usability testing to validate the effectiveness of the design system components to gather feedback from end-users and internal teams, addressing any usability or accessibility issues.
Results so far
The first aim will be to refine the components and build key UI screens based on the feedback.
The second aim is to refine the UI and flesh out the brand identity and touchpoints.
The third aim will be to fully commit to correct labelling and documentation.
Goals achieved so far: An easy design language and visual identity established across all digital products and buy in from dev team.
