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
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
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.
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
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
No broker section for MVP
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.
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
Experimental and suggested brand expansion colors
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.
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.
Desired Interaction This images maps out the desired interactions for the Advisor Profile. Click on it to enlarge it.
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
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.