The initiatives were collected on 3 categories
Portfolio Redesign
Redesigning the Bitcoin Suisse portfolio experience
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
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.
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.
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.
We reused our Value proposition Canvas to prioritise our User Needs - Circled are the portfolio relevant items
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.
The Survey questions included columns with "possible answers", "the goal of the question" as well as accountability in the form of actions.
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.
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.
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.
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
🖥️ 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
The focus in the app flow (in red) is on Monitoring portfolio with some spread to trading and staking, and loans
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.
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.
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
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.
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.
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.
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.
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
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.
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.
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.