Case Study
Introducing our dynamic web app, your go-to hub for property exploration!
part one
Project overview
The product
Perfect Properties is a seamlessly responsive Real Estate web app that empowers buyers with comprehensive details on properties that captivate them, making the journey of investing in a property stress-free!
Duration
2 months from December 2023
Role
UX/UI Designer focusing on UI mobile- first approach.
Tools
Pen & paper
Figma & Figjam
Photoshop
Responsabilities
– Conducting a competitive audit
– Defining user flows & information architecture
– Brand development
– Paper and digital wireframing
– Low and mid-fidelity prototyping Iterating on designs
The problem
Our users need a way to access a real estate app that helps them find a property to invest. New buyers in the real estate investment field 1 need a tool to help them understand the process of buying a property and guidance to achieve their goal.
Addressing the user needs
1
Designing an intuitive interface that include articles, tutorials, FAQs to help users to understand key concepts.
2
Allow users to create their own property criteria (property filters) and save their favourite properties.
3
4
Implement personalised guidance or coaching features to assist users in achieving their investment goals.
The solution
Design a visually stress-freel and intuitive app to view, find and
invest on a property. Primarily focus on small-scale property buyers 1 who are looking to invest for additional income or financial security.
User sentiment
1
Real estate investment can be tough, users get lost between the options.
2
Users feel excited and emotional about the experience of buying a property.
3
Users new to the market would like to have a professional guidance to avoid wasting time.
4
They want a tool that helps them easily and quickly.
Desgin Process
Empathise
Define
Ideate
Prototype
Test
part two
Understanding the user
User research
The context for designing the responsive app emphasises the frustrations and challenges faced by newcomers to the real estate market. These individuals often grapple with uncertainty and difficulty when contemplating property investment without the support of professional advice or guidance.
Addressing the user needs
I want to provide my family with financial security.
Finding the perfect property shouldn’t be hard.
User personas
Rashida, an IT consultant, aims to invest in suburban properties for enhanced financial security. Seeking fast decision-making, she requires a tool to streamline property searches and access reliable information. As a newcomer to real estate, Rashida prioritises ease of use and efficiency. She is looking for an app that offers a solution tailored to her needs, enabling swift property discovery, easy listing management, and comprehensive property insights, aligning perfectly with her goals and lifestyle.
User flows
To map the user flows I based on my persona and the tasks and user stories given in the project brief. I found out what screens would be useful for the design of this app.
part three
Starting the design
Low-fidelity wireframes
Paper and sketches: paper wireframing is quicker than software because it allows you to make mistakes that are easily erasable without feeling that you’ve been spending too much time.
Digital wireframes
I built digital wireframes in Figma. To reduce the cognitive load for the users, I avoid unnecessary elements, I looked for design patterns and I eliminate tasks that weren’t necessary.
part four
Refining the design
High fidelity prototype
The high-fidelity prototype emphasises simplicity and intuitive navigation, placing user experience at the forefront. Throughout its development, I integrated interaction design principles to enhance usability, ensuring seamless exploration of the responsive app’s purpose-driven features.
Design system
Defined specifications, including brand guidelines, visual aesthetics, and UI components, were established. This deliberate step aimed to maintain uniformity, strengthen brand recognition, and streamline the design workflow for greater efficiency.
part five
Project retrospective
Challenges
- Receiving a User Research brief as a UX professional, without prior involvement, posed a challenge. However, diving straight into wireframe design from provided user flows proved intriguing.
- Adapting for Various Breakpoints: Beginning with Mobile-first design is essential; transitioning components to larger screens demands thorough research and user insight.
UserTesting: Integral to the design process, skipping this step results in incomplete designs. Testing ensures a well-rounded final product.
Learnings
- Start with Pen and Paper: Begin the design journey by sketching ideas, fostering creativity without getting bogged down in specifics.
- Continuous iteration and refinement is key; designers must regularly enhance prototypes and actively gather user input in the early stages of design.
- Be Both UI and UX: Strive to think like both a UI and UX designer, valuing feedback to drive meaningful progress on both fronts.
Next steps
If I had more time, what else would I do?
First conduct a round of mid-fidelity usability
Conducting a round of mid-fidelity usability testing is essential to further refine the responsiveness and design’s usability. Ensuring the inclusion of users with limited mobility and other disabilities enables a more inclusive testing environment.
Explore Real Estate Coaching
The concept of launching a real estate coaching service remained under consideration. Such a service is currently lacking online, and if properly developed, could significantly enhance Perfect Properties’ offerings.
Handoff for Production
The handoff for production signifies the shift from the design phase to development and implementation.
A thorough handoff accelerates development and aligns the envisioned design with the final product, facilitating a successful application launch.
