top of page

NestEgg

A UI Case Study

About

Created as focus of the CareerFoundry UI For UX Designers Course, NestEgg is a responsive web app with a mobile-first approach that provides small-scale property investors a simple and user-friendly way to find and view properties that match their specific needs.

Role

Sole UX/UI Designer

Timeline

January to March 2023

Tools

Figma

Screenshot 2024-03-25 at 16.28.49.png
Screenshot 2024-03-25 at 16.35.39.png
Screenshot 2024-03-25 at 16.26.40.png
Screenshot 2024-03-25 at 16.33.48.png

Who, what, when, where, why?

Understanding the Problem

A growing number of people are turning to real estate investing to secure their financial futures. It is a thrilling and intensely emotional experience, and frequently challenging. Despite the abundance of blogs and organisations offering information, novice buyers frequently battle to get started without expert assistance and can waste time viewing properties that are out of their price range or don't match their requirements.

Discovering the Solution

NestEgg's simple and intuitive design will provide inexperienced investors with the expertise they need to get started efficiently by providing a user-friendly service and access to reliable information to give them the confidence they need to make great investment choices.

UI design process & timeline

To help me manage  the project over the course of eight weeks, I created a timeline that follows a progressive & iterative design thinking process.

Our user persona: Rashida

User flows

From the user persona, I was able to create user stories such as:  creating a user profile, searching and filtering property results, and scheduling a property viewing which have led to the creation of user flows as detailed below. 

Basic wireframe sketches

These basic wireframe sketches represent early UX thinking, as well as taking into account element placement and navigation flow that mirror the user stories. Showcasing the sketch for user story: create a profile, it was important to design the first few screens as profile questions so that the best properties for that specific user could be determined.

Low-fidelity wireframe

Following the pencil and paper sketches, I developed the designs into low-fidelity digital wireframes, and then mid-fidelity prototypes. 

Mid-fidelity wireframe

Keeping with the user story: creating a profile,  this prototype was developed further to show more detail including written detail ensuring direct and focused language was used for the profile questions, and to allow for user testing to ensure the navigation was simple and intuitive to use. It was great to have the opportunity to make any changes before applying colour and bringing the designs to life.  

Visual design: mood board

Wanting to evoke feelings of security; wealth; and confidence, the colours, images and tone have been selected to align with these factors.

 

The complementing colours of Green; Gold; and Oat were selected to evoke feelings of trust, wealth and confidence which reflect the brand. The Dark green denotes feelings of security, wealth and ambition; the Gold evokes emotions relating to warmth and energy; and the Oat creates feelings of reliability and trust.

High-fidelity design

Here I present the high-fidelity design for user story: create a profile which incorporates pixel perfect colour, typography, imagery, animation and iconography that aligns with Gestalt Principles of Design

Final design

I applied, the same process to the remaining user stories: searching and filtering property results, and scheduling a property viewing and present screens showcasing the final designs.

Mobile app UI

Interactive prototype: final design

Try it out for yourself on our interactive prototype below! Create a user profile; search and filter properties, and schedule a viewing with a Real Estate agent. Or if you prefer you can also access it on Figma by clicking HERE.

Responsive design

Designs for mobile, tablet & desktop breakpoints

Style Guide

Here is the visual style guide that contains all of the visual design components and UI elements of NestEgg. Take a look through NestEgg's style guide below.

Reflection

Lessons learned

Appreciating that design is an iterative and necessary process, I have been able to detect design "failures', which have taught me to be more resilient, particularly where I have been determined to overcome the failure. These experiences led to increased confidence in my personal and professional development, helping to drive discoveries of possible solutions through experimental design, so long as I validated these through thorough analysis. An example is where initial colour considerations in the context of a mood board misaligned with user requirements and where validation of the project brief was required to realign to scope.

Next steps

 

Given the opportunity to spend more time on the project or complete the process once more, I would spend time validating my designs via usability testing to ensure NestEgg is fulfilling user needs and goals as effectively as possible.

Thank you

bottom of page