Capinside 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 create the investor profiles. There were 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

As Principal Product Designer, I met at length with stakeholders to understand our business goals and then translated them into elegant and engaging profiles which increased our value proposition to paying expert investors as well as strengthening the overall community.

I started by reviewing quantitative and quantitative user feedback collected by the Head of Product. I then compared the feedback to results of a competitive feature analysis. I was solely responsible for the Design Research, UX, and UI. After designs were approved, I worked closely with the development team to implement the profiles by doing several rounds of design reviews.

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.

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:

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.


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:

Inclusive Aspirations

While demographics are changing, the world of finance is strongly male and Caucasian. I assembled a user set comprised of diverse ages, genders, and races in order to project an inclusive community.

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.
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

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

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.