Abode

Introduction

Problem

How can novice real estate investors receive reliable and comprehensive information on a property listings while keeping them excited and interested during the process?

Goal

Develop a responsive web app available at your fingertips anytime, offering potential buyers an extensive database and detailed information on residential properties, ensuring a user-friendly experience that is both comprehensive yet intuitive.

Client

Career Foundry-UI Design project.

Role

UI Designer

Tools used

Figma, Adobe Photoshop

Timeline

2 months

Design Methodology

Design Thinking framework as per Nelson Norman Group

The design-thinking framework follows an overall flow of 1) understand, 2) explore, and 3) materialize. Within these larger buckets fall the 6 phases: empathize, define, ideate, prototype, test, and implement. I have referred to the Design thinking approach from the Nelson Norman Group but adapted it to my project goals.

Understanding the user

User Persona

I created a user persona, to understand the goals and pain points of the potential users of the app, based on the information provided in the design brief.

User Stories

Based on the user problems as defined in the design brief, I have derived user stories aiming to address and resolve these user problems effectively.

User flows

Based on the above User Stories I have built a User Flow Diagram to understand and visualize what screen should be developed for the web responsive app for the users to achieve their goals.

Exploring solutions

Low fidelity prototype

Mid fidelity prototype

I went one step further and took the ideas from paper and made them digital. They are a bit more detailed and realistic, but not as polished. They helped me to test usability and functionality more effectively, while still being flexible enough for improvement.

Moodboards

Materialising the Design

I have curated a collection of images, colours, and textures to gather inspiration to set the tone of the project.

• The warm tones like beige, taupe, browns, and greens give off feelings of stability, reliability, and comfort, which matches with the desire of our user persona, Rashida, to provide financial security for her family.

• The natural elements represented in the mood board, such as foliage and wooden textures, reflect Rashida's preference for spending weekends in the countryside doing outdoor activities with her family, showing the importance of family bonds.

Overall, this mood board creates a visually appealing and connects with Rashida's values and aspirations.

Colour Palette

Typography

Heading 1 |
Roboto Medium, 32px

Heading 2 |
Roboto Medium, 24px

Body Title |
Roboto Medium, 20px

Body |
Roboto Regular, 14px

Body medium |
Roboto Medium, 14px

Body 2 |
Roboto Regular, 16px

Body 2 Medium |
Roboto Medium, 16px

Body 3 |
Roboto Regular, 12px

Buttons |
Roboto Medium, 16px

Buttons 2 |
Roboto Regular, 16px

Logo

Light Background

Dark Background

Iconography

UI Gallery

Responsive Breakpoints

Key Learnings

During my boot camp experience, I honed my UI Design skills by creating Abode from scratch. The project brief provided a good UX research, offering a foundation for my focus on a single user persona and the creation of three user stories depicted in the prototype.

Throughout this project, I learned a systematic approach to UI Design. While initially, drafting low and mid-fidelity designs seemed easy, transitioning to high-fidelity designs presented challenges, particularly when incorporating colors. Adopting a mobile-first approach initially proved beneficial, yet designing for responsive breakpoints, especially for desktop screens, posed significant challenges due to the larger canvas. Hence a lot of adjustments were necessary to maintain design cohesion.

Creating a mood board helped to establish the appropriate tone to align with the needs of the user persona. Overall, I enjoyed the different experimentations with various color schemes, typography options and animations throughout this project.

Future Roadmap

In Future, I would:

• Conduct more user interviews to gather more qualitative data.

• Conduct a thorough usability testing and validate the designs.

• Make improvements or bring new functions in UI Design based on the user feedback.