Cadre Design System

Building a simple yet effective design system for CRE investing

Role

Design Lead - UX & Visual Design, Prototyping, Project Management, QA

Length & Status

5 months, Launched in Feburary 2023

Collaborators

2 Product Designers

2 Product Managers

6 Engineers

1 Marketing lead

Overview

Cadre Design System is a set of coded styles and components built to reinvent Cadre’s platform with a unified design language. Since launching, we've enabled a combined force of 2 designers, 7 product managers, and 16 engineers to build new investing experiences on Cadre with high velocity.

The goal was to replace an existing system that wasn’t maintained nor scaled as the platform grew, which led to clunky and inconsistent products.

Key responsibilities

Led design, strategy, and roadmap

Maintained and scaled in parallel with product roadmap

Presented needs & outcomes to leadership as well as stakeholders across product and engineering to gather buy in

REDESIGNED & ENHANCED

Browse page for Commercial Real Estate deals

Improved investment submission rates with new browsing experience from 3.7% to 9.5%.

Before

After

Signing up for Cadre

Improved sign up rates from 10.6% to 17.5% and enhanced investor qualifications to capture users most likely to convert down funnel.

Before

After

Mobile-web Signup Experience

Improved mobile sign up rates from 16.1% to 19.3% & improved retention rate for Personal Identifiable Information (PII) input by 22.2%.

Before

After

Cadre(dot)com

Partnering with Flowout, a Webflow Design Agency, to redesign Cadre's website using the New Design System.

Before

After

Before

After

Releasing Q4 2023

GOALS

As a design team of 2, the Cadre Design System was built to be simple, light, and useful; to speed up designing while also not constraining the design process. We wanted to have a nimble DS that wouldn't be caught up by "atomic" principles and allow us to ship products quickly.

Colors

Colors placed into basic groups to quickly pull into designs and for engineers to recognize uses by name.

Typography

We wanted to make sure to build our typography system thoughtfully, as Cadre utilizes text quite often to display details about CRE deals on deal cards, investment information, important disclosures, and educational content.

Elevation

We built a set of shadows as we anticipated leveraging a number of overlays and elevated content across our redesigns as well as future products.

Icons

Rather than spend bandwidth on creating custom icons, we decided to use Font Awesome to build our icon library. This was an effective move to as FA offers just the right styles with an endless supply of icons for our needs. We converted the .svgs into components that can be pulled into other components such as tags and buttons.

New experiences brought to market

Entity Creation - Vehicle that makes an investment in CRE offerings, required in order to make an investment

Designs by Tim Park • Releasing Q4 2023

Making an investment

Designs by Tim Park • Releasing Q4 2023

Investor preferences - A questionnaire given to users at signup to collect information on their investing behaviors.

Designs by Tim Park • Released Q2 2023

Comparing deal offerings - As investors are browsing between offerings, they can choose to add up to three offerings to be compared together.

Designs by John Canelis • Released Q3 2023