Project Overview

The Challenge

To create a responsive web application that was based on the user research provided by the CareerFoundry Team.

The Process

As much of the UX research for this project was provided. I was able to primarily focus on the UI Design aspects:

  • User Flow
  • Wireframe
  • Moodboard
  • Creating Icon
  • Logo Creation
  • Prototype
  • Design Documentation
  • Responsive Design
  • Mockup
  • Animation

The Goal

To design a responsive web application that provides property buyers with information on properties of interest

My Role

UX/UI Designer


4 weeks

Primary Stakeholder

CareerFoundry UI Focused Course

Tools Used


Goals and Solutions

We wanted a way for users to be able to:

  • Set up preference, containing all their property criteria relevant to what they’re looking for.
  • Easily view and return to favorite listings.
  • Receive relevant and comprehensive information about properties and their markets.
  • Meet with an agent, to tour a property.
  • Access visual and written information about the properties.

User Persona



Job Title and Experience

As an IT consultant for a growing tech company, Rashida is frequently on the go, and often holds meetings by phone in her car while driving. She is good at multitasking and relies heavily on technology to help her with this.


  • Age: 35
  • Gender: Female
  • Education: Bachelor’s in Computer Science
  • Profession: Software Engineer
  • Marital Status: Married with a child


I want to provide my family with financial security. I’ve been considering buying property for a while and am looking for a tool that can help me find what I’m looking for, quickly!

User Flows

User flow depicts following actions that users can perform:

  1. Set up preferences based so their needs.
  2. Mark properties as favorites to revisit them easily.
  3. Search and filter properties based on their needs and wants.

Low Fidelity Wireframes

Creating low fidelity wireframes helped me flexibly and efficiently explore the design ideas and also come up with high level application flow.

Mid Fidelity Wireframes

Creating mid fidelity wireframes, I built the foundation for the application by setting up the grid system to be used for the application layout. I created different UI elements, such as buttons, filters and search boxes. I also determined the placement of the UI elements on the page and the spacing between them.

Mood Board

I created 2 mood boards for the application of which one is energetic and another is serene. I chose the serene mood board for its modern and calming appearance. The blue color oriented theme creates a trustworthy and engaging experience for users.

Style Guide

By compiling a style guide for the visual and UI elements, I made sure that new feature creations are consistent with the brand. Custom icons, UI elements further add to the personality of HomeCloud. . The complete guide can be found here

Final Designs

Here, I started creating aesthetics for the application by using images, icons, and UI elements to create an enhanced version of the application. After thorough research, and getting user and feedback, I moved from using bottom navigation to left hamburger navigation, as it is widely used by web applications. Peer feedback helped me address the inconsistent width of search filters on the desktop by giving fixed width and smaller font size to the filters, which made the filter section look consistent. I focused on creating a consistent user experience across all the devices.

Responsive Design

Home Page

Search Page

High Fidelity Wireframes in Mockups


Home Cloud web application gave me an amazing opportunity to expand my understanding of UI Design. Throughout the process, I have learned that the secret to a great design is paying close attention to minute details of design and innovatively solving user problems. The project provided me with an opportunity to learn how to solve complex problem by providing a great user experience. I feel strongly positioned and confident to work on more such complex problems.