CashPad

Real estate investing has the potential to be a rewarding and financially lucrative endeavor. For beginners, however, it can be intimidating to know where to start and how to select a property that fits their needs.

CashPad is a web app that helps users find their perfect investment property while also providing educational resources and features that help new buyers learn how to make smart investment decisions.

Role

UX/UI Designer

Client

Self-directed project

User flow

I first constructed a user flow diagram based on a few user stories that were supplied in the original project brief, including the ability to search and filter properties, save a property, and contact an agent for more information.

Wireframes

To ensure that the UI of the web app wouldn’t get too cluttered with unnecessary features, I took a mobile-first design approach, sketching out my low-fidelity mobile wireframes first.

It was during the initial wireframing process that I decided to incorporate an educational quiz into the onboarding process that would help users determine their ideal real estate investing strategy. After doing some deep research and familiarizing myself with the lingo, I developed a 5 question quiz that would give users immediate feedback after selecting an answer so that they could learn about the different options as they moved through it. Their recommended strategy would be added to their profile and would change their default property search filters to help narrow down properties that would best suit their needs.

Moodboard

To help determine a visual direction for the app, I created a moodboard based on a green and purple color palette – which felt like the appropriate mix of sophistication and approachability for a beginner real estate app. I also explored different type options as well as started to articulate some of the basic UI elements of the app.

Once I applied the original color palette to my screens, however, I found that the colors were too muted. I therefore created a new palette of brighter purples and a green hue. I went with purple because both blue and green seem to be very popular in the real estate app space, and it felt like a good opportunity to differentiate.

Style guide

Once I designed the majority of my high-fidelity mobile wireframes, I compiled all of the UI elements, typography, final color palette, and other design elements into a style guide to help maintain brand consistency as additional screens and features are developed.

I also developed a spacing system based on multiples of 8 pixels to keep the spacing between all elements relational and consistent.

Comparison feature

To help users better determine their ideal property and further differentiate CashPad from other real estate apps, I designed a comparison feature that would provide users with a quick overview of their saved properties. Taking inspiration from similar features commonly utilized on used car sites like CarMax and Autotrader, I incorporated a toggle switch that allows users to easily change between viewing their saved properties in a list format versus in a grid – which breaks down some of the most important (and quantifiable) features in an easy-to-compare format.

Animation

As an added touch, I created a subtle animation that shows the property images shuffling into place when the Comparison Mode switch is toggled.

The bookmarking star icon also spins when selected (and unselected) to give users an extra sense of satisfaction when saving a property.

Final wireframes & additional breakpoints

Using the high-fidelity mobile wireframes as a starting point, I adapted a few of the app’s unique screens for tablet and desktop in order to demonstrate how the designs respond to different breakpoints.

Key insights

Find your why

When creating a new app in an already-saturated market, it’s important to find a differentiating quality that will persuade potential users to choose your product over the others. Don’t add to the clutter of apps already in existence if you don’t feel like your product is adding value in some unique way, even if it’s small.

If it ain’t broke, don’t fix it

If the UI across apps in the same space looks similar, there’s probably a reason for that. Existing product teams have likely already put in the time and research to determine the best way to represent a given feature, and users have likely come to expect it that way. Differentiate where appropriate, but don’t reinvent the wheel just for the sake of doing something new.