Investor Profiles

CAPinside is an investment community based in Hamburg, Germany where investors can communicate with one another about products, advisors can find leads, and experts can promote their skills. In order to create an online community, the first step was to refine and expand the investor profiles. There are three main types of investors on the site:

Financial Advisors looking for new clients

Independent Investors interested in starting or maintaining their portfolios online

Expert Investors who write in-depth articles about trends, products, and how current events are impacting investments
My Role

Working closely with the Head of Product Design, user feedback was combined with design research to create the designs of the three new profiles, each in three sizes.

As Principal Product Designer, I was solely responsible for the UX, UI, and visual design. I worked closely with the development team doing design reviews and art direction to implement the profiles as designed.

Tools used: Sketch for the design, Illustrator for SVG asset creation, Photoshop for image editing, and Zeplin for a smooth hand off to the development team.
Process

We worked very quickly at CAPinside, usually moving from conversations directly into final designs. I started by analyzing the existing generic profile design and identified several issues:

OriginalProfile_LG
OriginalProfile_SM
Early Explorations

In these early wireframes I try to keep the original structure of the page while creating new sections for brokers, interests, badges, and social activity. I removed the heavy drop shadows and starting experimenting with outlines.

EarlyWireframe1

EarlyWireframe2
I worked closely with the Head of Product Design (also a senior PO) who mocked up a wireframe for the Advisor Profile. The goals were:

AdvisorProfile_Wireframe
Persona Demographics

While demographics are changing, the world of finance is strongly male and Caucasian. Sometimes we have to design the world we want to see. I assembled a user set comprised of diverse ages, genders, and races in order to promote a more inclusive landscape.

diversepeople
Expanding Brand Colors

The brand colors were quite limited at the time of this project and as using different colors to differentiate between the profiles was a possible option, I experimented with various hues based off the original brand color of #51C4AC
Brand colors in use brandcolors

Experimental and suggested brand expansion colors expandedcolors
Initially, I thought different colors could be used on the investor cards or more subtly around the profile images to create differentiation between the profiles. After discussions with the Head of Product Design, we determined that using color in this manner was too much of a departure for the brand. (We did use these colors later in the newsletter and for news categories on the site.
Investor_Card_ColorPop Investor_Photos_ColorPop
Viewing this Page

This page works best viewed on a desktop browser. Change the width of your browser to see the large, medium, and mobile responsive designs for each profile. The CAPinside website uses a side navigation bar which makes the medium size an important consideration.

If you are viewing this page on a mobile device, portrait mode will show the mobile design and landscape mode will show the medium design.
Financial Advisor Profile

The Financial Advisor profile showcases experience, licenses, contact information, client feedback, and social activity on CAPinside.
Profile_Advisor_Large
Profile_Advisor_Medium
Profile_Advisor_Mobile
Independent Investor Profile

The Independent Investor shows less information than the Advisor. The structure/layout is similar. The interests of the investor are highlighted, making it easier for investors to approach each other and for advisors to find leads.
Responsive Figure
Responsive Figure
Responsive Figure
Expert Investor Profile

The Expert Investor profile is similar to the Independent Investor profile with the addition of the articles they have written. The images for the articles are Getty stock images with a special branded gradient to create a consistent visual appearance.
Responsive Figure
Responsive Figure
Responsive Figure
Badges Redesign

Part of the redesign of these profiles was to refresh elements to fit the new visual pattern. On the older badges, gold and bronze badge icons were used to signify levels of activity. I felt the colors clashed with the brand colors and they weren't intuitive. I refined the badges by making them a badge shape, using brand colors, and adding a descriptive title to make their purpose clear.

Old badges
oldbadges

New badges
newbadges
Desired Interaction
This images maps out the desired interactions for the Advisor Profile. Click on it to enlarge it.

Interactions
Empty States

Although not required in the brief, I felt it was important to design an empty state for both when an Investor views their own profile and when the community views an incomplete profile.

Showing a preview of a completed profile encourages users to interact and complete their profiles. Often overlooked in busy design cycles, a useful empty state lets the user know what’s happening, why it’s happening, and what to do about it.


Empty State - self point of view
Empty Self view

Empty State - community point of view
Empty Other view
Final Product

Creating three distinct profile types:

The customer feedback was resoundingly positive and engagement increased 30% in the first month.