Portfolio Redesign

Redesigning the Bitcoin Suisse portfolio experience

Bitcoin Suisse Portfolio Redesign

Introduction

As a Senior UX designer at Bitcoin Suisse, I redesigned and created concepts for the portfolio page of Bitcoin Suisse.

🔍 Problem statement

Our portfolio page is/looks outdated, doesn't provide a good overview, and lacks features like charts, allocation, and other performance metrics. Besides this client holdings are spread between vault (not viewable in the platform), staking, and portfolio, this means that the architecture wasn't optimal for showing "total holdings" over several menu items.

✨ Solution

A solution with more performance tracking features, an overall UI update, better assets vs liabilities, and a more comprehensive view of asset holdings. This solution involved side projects like:

  • Redesign the left navigation

  • Consolidating the staking, portfolio, and vault menu items into one, so we can properly calculate "holdings"

  • New loan vs assets logic so portfolios with loans stop displaying negative total amounts

  • Multi-account system: Clients can have multiple accounts with the same currency

  • Reduce the number of decimals on cryptocurrency values

🤔 Hypothesis

Clients will get a better portfolio experience, our image will improve, and added features will increase our client acquisition, retention, and revenue.

Tools

  • Figma

  • Personas

  • Customer journeys

  • User interviews

  • Competitor research

  • Prototypes (in XD)

  • User flows / architecture

Team

  • 1 UX UI designer

My Role

  • Research

  • Architecture

  • Wireframing

  • UX design

  • UI design

Timeline

  • Research & analysis: 4 weeks

  • Requirements: 3 weeks

  • Side projects: 6 weeks

  • Left navigation: 4 weeks

  • UI exploration: 4 weeks

My Design Process

🔍 Research & Scope

Upon project Kick-off, we used different methods to collect information on the current state of the portfolio section and its most common problems

Bitcoin Suisse Portfolio Redesign

Client feedback via the Relationship Managers

Our Relationship managers could provide us with a "frequently asked features" file from which we collected the most frequent client requests.

Bitcoin Suisse Portfolio Redesign

The initiatives were collected on 3 categories

Ideation and prio-workshop (online)

We invited a few stakeholders and did some initial ideation and prioritization exercises to define the problem and scope of the project.

Bitcoin Suisse Portfolio Redesign

The old website structure

Problem Statement

We then continued in Figjam by defining the problem statement using the 5W+1H framework (qué?).

This led to the problem statement shown below.

Additionally we also reused the Value Proposition Canvas.

Bitcoin Suisse Portfolio Redesign
Bitcoin Suisse Portfolio Redesign

We reused our Value proposition Canvas to prioritise our User Needs - Circled are the portfolio relevant items

Bitcoin Suisse Portfolio Redesign

User flows on Google Analytics can tell you about drop-off points

GA User flow analysis

Keeping an eye on the google analytics site flow graph gained some insights that helped us define priorities.

🎤 Interviews / Survey

Aside from external research we also initiated internal research with our more than 200 crypto-savvy and less-crypto-savvy colleagues.

Bitcoin Suisse Portfolio Redesign

The Survey questions included columns with "possible answers", "the goal of the question" as well as accountability in the form of actions.

Bitcoin Suisse Portfolio Redesign

Qualitative research

Having identified the basic characteristics of our survey respondents, you can see all the learnings below. These were super valuable insights that added a lot to our research process.

👤 Personas and User Journeys

As a second step in our process, we defined different user groups or target audiences via information from our relationship managers so we can better imagine the user needs.

Based on our research phase, we concluded that we have two major client groups:

  • Private Individual Clients

  • Corporate Clients

Each of those Client groups has another 3 user groups called Level 1, Level 2, and Level 3 - based on the complexity of user requirements.

The baseline is we have many different user groups: Hodlers, Mining companies, trading, beginners (legacy), etc. We have to cater to all of these users.

Bitcoin Suisse Portfolio Redesign

Private individual Client Group Journeys and Feature opportunities

After creating summarized versions of our personas, I created a common user flow each of these users might follow and derived feature opportunities from this.

Bitcoin Suisse Portfolio Redesign

Corporate Client Group Journeys and Feature opportunities

We did the same for our Corporate personas and came up with feature lists for each of the complexity levels.

Bitcoin Suisse Portfolio Redesign

Restructuring client groups to Level groups

To identify feature opportunity overlaps between our Corporate and Private Individual Clients we can now add the "Haves, needs and opportunities" model:

  • What the user has

  • What he thinks

  • What the user needs / is missing

From this, we can list the feature opportunities across complexity levels 1, 2, and 3

From this schematic, and in sync with our initial research we can identify the final Feature Requirements

Bitcoin Suisse Portfolio Redesign

🖥️ Competitor analysis

I analyzed competitors and similar applications to see what the general portfolio composition looks like. For every competitor, I added a screenshot, a wireframe, and a user flow for our reference. I also went in-depth on the data points they offered in their interface

Bitcoin Suisse Portfolio Redesign

The focus in the app flow (in red) is on Monitoring portfolio with some spread to trading and staking, and loans

Bitcoin Suisse Portfolio Redesign

Some competitor flows

De-designing, Wireframes, and user flows

By deconstructing or "De-designing" the interfaces of our competitors, this analysis gave us some insight into the structure and data that were most common for portfolio analysis pages.

Bitcoin Suisse Portfolio Redesign

Our own flow

Deconstructing our own platform

As with competitors, I did the same with our own platform, deconstructing it and analyzing it in comparison to our competitors. It became clear that it needed to be reviewed structurally.

Bitcoin Suisse Portfolio Redesign

Wireframes

After having collected all the necessary research and info to get started, it was time to start tackling some of the most notable problems

  • Reduce the number of decimals on cryptocurrency values

  • Redesigning left navigation, and consolidating the staking, portfolio, and vault menu items into one, so we can properly calculate "holdings"

  • New loan vs assets logic so portfolios with loans stop displaying negative total amounts

  • Adding portfolio analysis for the advanced L3 user group

  • Multi-account system: Clients can have multiple accounts with the same currency

Bitcoin Suisse Portfolio Redesign

Reducing the number of decimals in Crypto notation

Problem: Excessive decimal numbers give too much precision and ruin readability for the user.

Solution: Reduce decimal notation up to 1 cent of value.

Bitcoin Suisse Portfolio Redesign

The presentation I did for this subproject to our stakeholders

Redesigning the left navigation

Problem: The left navigation structure was not suited to consolidate portfolio value, and we needed to restructure this to give a proper value.

Bitcoin Suisse Portfolio Redesign

Redesigning the left navigation

Solution: All assets are now consolidated under "portfolio", deposit and withdraw becomes part of the same page, and trade becomes an actionable button. This structure works way better for consolidating assets.

Bitcoin Suisse Portfolio Redesign

The whiteboard after our brainstorming session

Better asset vs loan representation

Problem: Portfolios with loans display a negative balance

Loans were deducted from total holdings, showing you a negative balance as "you owe Bitcoin Suisse". This affected a handful of clients.

Solution: Loans are added to your assets, and a liability is created under the "loans" section. This keeps track of what you have, and what you owe and is a more correct way of showing this.

Bitcoin Suisse Portfolio Redesign

L3 portfolio analysis - calculative descriptions are included

Adding portfolio Analysis for L3 group

Problem: Our L3 clients would like to have advance PNL (profit and loss) metrics.

Solution: a button on our portfolio page brings you to a portfolio analysis page only accessible to our L3 users

Bitcoin Suisse Portfolio Redesign

Multi-account system

Problem: having multiple same currency accounts makes them unidentifiable in a list view without extra identifiers

Solution:

  • if there is only one account, the top level shows the account alias with ccy logo

  • If there is only one account the account nr will be in the sublabel

  • If there are multiple accounts the currency will be top line and the number of accounts in the sublabel

  • When unfolded, a list with accounts similar to the top-level single account will become visible (alias + account number visible)

🌈 UI Design

Including all the previous work I iterated and reviewed the designs with my design colleagues, and eventually came to the following results.

Bitcoin Suisse Portfolio Redesign

Comparing it with the old design

For comparison, here's an old design of the portfolio section today. Needless to say, I feel like we have managed a huge improvement with the results below.

Bitcoin Suisse Portfolio Redesign
Bitcoin Suisse Portfolio Redesign

Conclusion

I'm very proud of a successful end result where we solved many problems our users were facing while using the portfolio section of our platform.

  • Improved left navigation that's future proof

  • Better overall holdings overview

  • Fixed clarification on crypto decimal notation

  • No more negative balances when taking out a loan

  • A multi-account system that's usable

  • Graphical performance metrics throughout the interface

  • More balanced information, better use of space

Learnings

Thanks to my product team and design lead I was able to dig deep into the research phase, line out the problems, and define the requirements very clearly. This also helped with guarding the scope with stakeholders and avoiding sudden changes in the project. I feel like this project was particularly complex because of the many requirements to be defined for the different user groups. In the end, I've learned a lot throughout this process, and became a better designer since.

Thank you for reading my case study!

Want to work with me? Feel free to contact me!
...or just say hello on my social media.