Cadre

The world of fintech 💸

by John Canelis, Product Designer
Project Topics
  • product design
  • system design
  • interaction design
  • user testing
  • design systems
  • marketplace
  • mobile
  • prototyping
  • web

For a deeper dive into this project, please view this case study document.


Cadre is a financial technology startup that allows users to invest in real estate investment opportunities. These types of investments have historically been difficult for the general public to access.

I was the lead designer for the investment browsing experience. This is where users can view available investment offerings and learn about the unique details of each opportunity. We launched the updated investment browsing experience in multiple stages from late 2022 through 2023.

In November of 2023, Cadre was acquired by Yieldstreet.

Artboard
Browse and filter.

Browse Desktop Large
Desktop full view

Artboard-3
Dark mode

Artboard-1
Compare and learn more.

Problem context

The company needs more people to invest. Users want to earn money.

The key metric we needed to improve at Cadre was the amount of new investors. The full journey of a user involves viewing marketing content, browsing investments, onboarding, and calls with sales. I focused on the browsing part of this journey.

Business Needs
Business needs

User needs
User needs

Data Sources
Data sources

Requirements
Requirements

Iterations
Layout considerations.

Structure
Proposed page structure.

Browse Desktop Large
Desktop full view

Notes - 5
Flexible layout

Notes - 8
Usability and education

Notes - 3
Promotions

Notes - 4
Education

Notes - 1
Promotions

Notes - 2
Promotions, education, flexible layout, and design system

Methods

Methods to create this work included brainstorming with sales, marketing, and acquisitions to understand the needs of our team and the priorities of the business.

Conducting user testing with prototypes helped to validate early concepts. Patterns generally start to emerge after testing with as few as five people.

We also ran experiments on the site to test minor changes in UI or added functionality to determine their effects on conversion rates. Creating a design system was key for allowing us to iterate quickly.

Experiment
Example experiment

Experiment-1
Example experiment

Experiment-2
Example experiment

Experiment-3
Concepts for the future

Who is this for?

Experienced investors, newbies, and the Cadre marketing team.

We thought of our users in two categories: experienced real estate investors and amateur investors. Our marketing team was also a content management user of this experience.

Experienced real estate investor

People who are experienced in real estate investing come to the site for specific kinds of opportunities. They need to be able to narrow down their options to something more specific like, “multi-family in Houston, Texas with a value-add strategy.”

This group of users became clear after conversations with sales and looking at data submitted during user onboarding. These investors already know real estate investment terminology and they’re ready to dig into the details.

Amateur investors

We thought of the amateur investor as someone who is considering investing in real estate for the first time. They’ve invested in the basics: high yield savings accounts, retirement accounts, and index funds. They’ve also been told that real estate is a good next option for building a diversified investment portfolio. But they don’t know much about it.

The “amateur investor” needs more information. They need definitions. They haven’t done this before. They don’t know the different real estate investment strategies. They don’t know why they would invest in one option versus the other. People without experience in real estate investing need educational resources about the basics of what we’re offering and how it works.

Cadre’s marketing team

The marketing team at Cadre needed to display promotions. This included promoting groups of investments and individual investments. The types of investment offerings we highlighted varied throughout the year, so they also needed to be able to rearrange the order of the content based on priorities of the business.

Select to compare
Select to compare

Compare Light
Compare layout structure

Offering Light Mode
Offering page

Requirements

A flexible space for promoting and educating. All of it using our new design system.

Flexible layout

The content should be rearrangeable based on what the team chooses to prioritize. For example, the Secondary Market, where users can sell their investment positions, might be moved to the top for a limited period of time. Or if we launch a new investment, we may want to move that to the top. The system should be customizable so that on any given day we can choose to prioritize different kinds of investments.

Promotions

The marketing team needed to be able to promote categories of investments and individual investments. For example, there may be an initiative to promote our funds. A fund on Cadre is a mix of multiple assets, generally done for diversification. Within that group of available funds, there may be specific promotions for each fund. For example, “Fund A” might have a promotion for “lower fees,” while “Fund B” might have “limited availability.”

Education

Real estate investing is not a simple product. As a company, we wanted to be a trusted source for investing education. This was especially important for new users and even experienced investors can benefit from access to definitions and Cadre’s informative blog posts. Throughout the experience, there should be helpful explanations of the investment terms presented to the user and links to additional clarifying information wherever applicable.

Design system

Implementing a new design system was a top priority for our team. This would allow us to increase the speed of engineering and design output. It would help us deliver a more consistent and overall modern feel to the platform. The browse experience would need to use existing components and influence the creation of new components and styles as needed.

Cadre
A look into our design system files.

Cadre-2
More design system styles, including shadows and colors.

Cadre-6
A high level view of our design system file.

Cadre-1
A look at our form components and variants in Figma.

Team

Design, engineering, and product management

I worked as the lead designer with a dedicated product manager and three engineers. The design team consisted of two designers (including myself). My role was mostly dedicated to the browsing experience, while my design partner was more focused on the design system and onboarding experience. As a team of two designers we held weekly design critique sessions.

Other stakeholders

Marketing, sales, legal, and acquisitions (the team that finds our investment opportunities) were important partners in this work. Sales had direct insight into the questions customers had. Marketing had ideas on how to communicate the value of what we were offering. Acquisitions had the deepest knowledge about the specific details of our offerings. Legal helped us keep our designs compliant with regulations.

On process

Discover, scope, plan, iterate, and launch. Iterate and test throughout.

Exploration

I started with exploring the problem space individually and with my product manager. We looked at our existing data, our company goals, and held workshops with other areas of the company (marketing, engineering, sales).

Problems to be solved

We narrowed down our goals and problems to solve into feasible timeliness for building and shipping features. I created a project plan for the design process based on our agreed upon product requirements document. This plan plots specific dates for iteration cycles, dates to present designs, dates to present testing, and time to spec for handoff to engineering.

Plan and adapt

We operate with an agreed upon plan. We share the plan with the team. We share updates on the progress every week. We share ideas and design concepts with engineering (and other stakeholders) early in the process. Ideally, there are never any big surprises when someone on the team sees an update on the work. Sometimes plans and strategies change and that’s fine. We update the plan accordingly and move forward.

Measuring Success

Increase new investments, improve user understanding of the product, and empower the marketing team.

This project would be considered successful based on the following criteria:

  • Increased user knowledge. We should see higher user testing scores when people are asked clarifying questions about the terminology we use on the site.
  • Reduced time spent finding desired investments. An experienced investor looking for specific attributes should be able to do so quicker than in the previous experience.
  • Increased rate of users creating accounts.
  • Increased rate of users making investments.
  • The design system informs every piece of the interface.

Unique Challenges

Content structure

Deciding how to display the content was difficult. Should the investments be displayed in more of a “functional” table layout? Should we use tabs? Should the deals be shown using large imagery? Should this feel like Google Finance (functional) or should it feel like browsing Tesla.com (full-width visuals)? What will this look like if there are 40 available investments? What if there’s only 8?

What does this experience look like after we implement our upcoming “user preferences” project, where during onboarding, the user will indicate the kinds of deals they’re interested in. How will we display the deals we recommend for them in this experience?

Scope

The “browse experience” had what felt like unlimited possibilities, which was exciting, but prioritization of features became critical. Functionality like searching, filtering, comparing and saving were all appealing. We had a small team and short timelines, so we needed to limit the scope and break launch schedules into phases.

Outcomes

Several metrics of success. But how could it have been better?

Results
Results from the updated designs.

  • Through user testing, we validated that people were clearly understanding the content better than the previous experience.
  • Over the course of thirty days, it became clear that users who had viewed the browse experience were investing at a 3% higher rate.
  • Through user testing we validated that given a specific task, like “find multifamily assets in Florida” people were able to complete that task successfully at a 100% rate. This testing context is based on the investment professional user type that comes to our site looking for specific kinds of investments.
  • Our design system was implemented successfully in this experience. This increased our efficiency in making future updates.

Thoughts on the outcomes

Conversion rates

I want to acknowledge that this is not a dramatic lift in conversion. It's also difficult to attribute an increase like this directly to the browse experience while excluding all other variable factors such as something as simple as the overall feelings about the real estate investing market.

Product market fit

I also want to acknowledge that while I think additional design thinking in the future could apply to the content on the deal pages that may help someone invest, there is somewhat of a limit here as to what design can achieve. We may not have been providing enough value or differentiation to cause someone to make an investment with us.