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

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:

• Multiple edit buttons
• Inconsistent button design
• Heavy and distracting drop shadows
• It's not clear what the badge is for
• The interests are difficult to spot and hard to read

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:

• Keep profile pic, name, title, and bio
• Show badges in a way that displays Advisor expertise
• Add product focus section and make sure interests align accordingly
• Add ability to follow and unfollow
• Add ability to contact advisor
• Display a portfolio that is meaningful
• Add advisor rating and reviews
• Add activity/comments
• No broker section for MVP

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

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.

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.

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.

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 State - community point of view

Final Product
Creating three distinct profile types:

• Allowed users to more easily engage with each other
• Increased traffic and average browsing time
• Increased the value proposition of the platform

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