Peishan Grace Li

case_study: ux · responsive web app · 2022

Property Investment Web App

UX/UI design course project · CareerFoundry

Phone mockup of the Haven app landing screen beside high fidelity screens for search results, map view, property detail, and property facts

The goal

Design a responsive web app that provides information on properties of interest, primarily for new, small-scale property buyers looking to invest for additional income or financial security, and help them navigate with confidence in an ocean of property information.

Persona

Rashida is an IT consultant for a growing tech company. She 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.

User stories

Design process

Low fidelity wireframes

Created to visualize the flow and gather immediate feedback based on the personas and user stories.

Hand-drawn low fidelity wireframe flow for the Haven app, from home and property search through property detail, contact agent, sign up, profile, recommendations, and search results

Mood board (credibility, trust, joy)

Home investment is about future planning for family, so the design communicates credibility, brightness, and joy. Midnight blue conveys trust, while a dark tangerine accent brings brightness and hope.

Haven style guide covering logo guidelines, icon and button colors, imagery overlay rules, and typography in midnight blue with a mango accent

Wireframes

As fidelity increased, navigation stayed consolidated to the main features and categories to avoid crowding the UI and maintain user focus.

Grayscale mid fidelity wireframes for landing, sign up, map view, search filter, navigation, feed, list view, and property detail screens Mid fidelity wireframes of the landing page with search autocomplete and the modal sign up, sign in, and create profile flow Color-blocked wireframes applying the midnight blue and mango palette to map view, filter, navigation, feed, list view, and property detail screens High fidelity landing page options with alternative imagery, search autocomplete, and the polished sign up, sign in, and create profile modals High fidelity screens with photography for map view, filter with property type icons, navigation, feed, list view, and property detail

Responsive breakpoints

A mobile-first approach with content priority in mind, since property apps tend to be information-dense.

Lessons learned

Without real stakeholders (this was a course project), a mentor stood in to give feedback on the mood board and color palette, a helpful exercise in understanding the "why" behind design preferences. Key takeaway: get unstuck by asking for stakeholder input early and often.

Haven landing page shown responsively on laptop, tablet, and phone against a midnight blue backdrop
The interactive prototype for this project was hosted on InVision, which shut down its services at the end of 2024. The written case study is preserved here.