Hero
Project overview
The redesign of the hero was the final phase in overhauling an outdated investor dashboard – bringing a flexible solution with scalable architecture to the most impactful part of the investor experience. With the redesign, we gave investors an overview of key account information, while giving our product team the ability to introduce additional content in the future.
Goals
Highlight the most important account information at the highest level possible
Build in flexibility to accommodate a variety of content types and account states
Modernize the visuals – bringing them in line with the new marketing branding
The dashboard hero before the redesign.
Process Overview
Review and prioritization of key metrics and information; including validation with our investors via user interviews.
Ideation around layout, structure, and interaction in low fidelity – consulting engineers along the way.
High-Fidelity mockups and Figma prototypes
Review of prototypes with both investors and non-investors.
Final polish incorporating new Fundrise branding and an update to the data visualization color palette.
LOW FIDELITY Concepts
1) Carousel 2) Widget 3) Hybrid
After wireframe exploration, I narrowed in on three concepts which were presented to the product and design teams for feedback. The concepts, as shown above, are:
Carousel
A collection of horizontal scrolling high level content with an independently scrolling tab nav to preview the content on the adjacent cards.
Widget
A collection of small cards giving the investor a broad overview of multiple bite-sized pieces of information that can expand to reveal greater detail.
Hybrid
Combines the infinite horizontal scroll of the Carousel while retaining the Widget concept’s broad overview of an investors account. With the hybrid approach, I introduced what the team lovingly referred to as the “widget belt.” When tapped, widgets in the widget belt expand into the upper hero area revealing a more detailed look at the information.
High Fidelity
Team consensus was that the we should move forward with the hybrid concept as it best addressed our original goals for this effort. Pictured below is the final hybrid concept in all 4 expanded states.
Expanded views for the new hero. From left to right: Account Value; Net Returns; Portfolio; Goal
Aesthetically, I pursued a charcoal, “dark mode”, motif as it gave hero the appropriate visual weight and prominence while incorporating visual cues from the marketing site. The background for the widget belt portion of hero utilizes a gridded dot texture to visually separate the widgets from the expanded state.
Widgets
The widget view for each key metric represents the highest level view. When tapped, widgets in the widget belt expand into the upper hero area revealing a more detailed look at the information. Check out the interaction with this figma prototype.
ACCOUNT VALUE
The widget for Account Value includes the value of the account and a trend line for the all time time horizon
NET RETURNS
The net returns widget included the all time net returns with dividends broken out – the two returns numbers we know our investors care about most.
PORTFOLIO
Investors with both real estate and growth equity will see allocation of their portfolio to those two asset classes. Investors allocated 100% to real estate will see the breakdown between growth oriented real estate and income oriented real estate.
GOAL
The Goal widget displays percent to goal, goal amount, as well as a horizontal progress bar.
Expanded States
The expanded states of each view add additional information over the widget.
ACCOUNT VALUE
The expanded view for Account Value adds the change since last login and an interactive chart.
NET RETURNS
The expanded view for Net Returns breaks out Appreciation from Net Dividends (dividends net of fees) in stacked bar chart format.
PORTFOLIO
The expanded view for Portfolio breaks down the top level asset classes into their asset type classifications.
GOAL
The expanded view for goal shows the progress to the goal amount as a function of the dollars invested and the net returns. Additionally, the likelihood that an investor will be able to hit their goal is shown.
Desktop
As with most projects at Fundrise, I designed the hero experience with a mobile first approach. The desktop experience is a translation of the mobile widget concept. For desktop, the widget belt took on a vertical orientation to better match desktop patterns for scrolling.
Metrics
We will be tracking the following metrics across web and the native mobile apps after release:
Audience – Views of Expanded States (Widget Interaction)
Chart Interaction
Account value chart scrubbing
Portfolio wheel hovering (web only)
CTA Clicks
Add Funds CTA
Create Goal CTA
View Historical Returns CTA
View Full Breakdown CTA
Screenshots Taken
Before & After
