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