Research restructuring

Restructuring research to improve findability and experience

Bitcoin Suisse Research

Introduction

As a Senior Interface designer at Bitcoin Suisse, I was tasked with increasing the visibility of the Research and blog sections on our website, as we have a high-quality output there. We want to be more prominent in the way we put out our research reports and other content.

🔍 Problem

Company news has become the “general purpose” container for unattributed blog articles. I created a sorting system and deeper categorization



Business push:
Research and blog are generally hard to find within our website navigation. Having hard-to-find and badly organized research and blog content decreases the benefit of having a well-developed research department.

✨ Solution

  • Don’t dump all unattributed articles in company news.
    Use a sorting system for article categorization

  • We increase our research value by providing the right content to the right user at the right location.

  • Improve the information architecture of the website.

  • Redesigning our Research and Blog will increase our reputation with both retail and institutional clients.

Bitcoin Suisse Research

Project Goal

The goal is to improve the categorization and findability of research & blog articles for our different clients to increase the reputation and credibility of Bitcoin Suisse as the go-to partner for (institutional) crypto services.

This project encompassed several side tracks within. In an effort to make research and blog more prominent, I did the following:

  • Created a new navigation structure and design

  • Created a Content Classification System for our publishers

  • Reclassified over 200 existing articles according to this model

  • Redesigned the research and blog overview pages

  • Redesigned the research and blog detail pages

  • Added "Learn" page

  • Art direction with a full exploration and recommendation of illustration styles with competitive research and presentation

Bitcoin Suisse Research

We use this process front page for every project

Tools

  • Figma

  • Personas

  • User interviews

  • Competitor research

  • Prototypes (in XD)

  • Customer journey maps

  • User flows / architecture

Team

  • 1 UX UI designer

My Role

  • Research

  • Architecture

  • Wireframing

  • UX design

  • Visual design

  • Art Direction

  • Branding

  • UI design

Timeline

  • Research: 1 week

  • Main navigation: 1 week

  • Architecture: 2 weeks

  • Visual design: Continuous

  • Art direction: 2 weeks

  • UI Design: 4 weeks

My Design Process
Bitcoin Suisse Research

User personas and the Value Proposition Canvas

We started the project with a Value Proposition Canvas (a what?) for one of our primary user target groups. We additionally made several personas based on the characteristics of these clients that we got out of the workshop.

In this canvas, you can see the values that are relevant to this project circled.

Bitcoin Suisse Research

🖥️ Information Architecture

The second step of the process was analyzing the current situation, and finding and describing problems and opportunities.

You can think of this as a card-sorting exercise where you group the right topics together.

Bitcoin Suisse Research

The old website structure

Structure and Analysis

I indexed and analyzed how the current website and research pages were structured in the top navigation:

❓Inconsistent menu structuring
Functions (audience, services, knowledge) are not grouped or located in the right place
🔎 Valuable Research section is hidden
🔎 Knowledge content not structurally correct

Bitcoin Suisse Research

New Navigation structure

I then restructured the entire hierarchy and found two possible structures we could move towards.

The two options gave the following split:

Option A

  • Knowledge split for "Individuals" and "Business"

  • Company info under "Company"

Option B

  • Industry Knowledge grouped under "Insights"

  • Company information is grouped under "Company"

Bitcoin Suisse Research

Navigation update

To apply this navigation structure in practice we updated the design of the top navigation.

The reason we opted for option B over A is that advanced content might be hidden from private clients in the option A scenario.

Features

This suggested solution featured the following features:

  • Functions grouping by "audience", "services" and "external knowledge"

  • A "insights" menu with different levels of market knowledge: Learn, Research, and Industry Blog

  • Company news will be divided into buckets: "general", "leadership", "partnerships", and "Culture"

  • Investor and media relations are consolidated under "PR", linking to company news

Article sorting and Publication characteristics

Initially, I started indexing all the content on the website, making them into cards in Figma, so I could sort and rearrange them by category.

❓Many articles in the wrong categories
Many articles in duplicate categories
Many related articles are not grouped
🔎 Valuable Research section is hidden
🔎 Confusing to navigate
🔎 Knowledge content not structurally correctly

Bitcoin Suisse Research
Bitcoin Suisse Research

Publication Characteristics

I also copied the main categories for articles we already had and added some characteristics to each. As you can see - The "general company news" category has by far the most articles attributed to it. Hence the need for this reorg.

Bitcoin Suisse Research

The bottom bar fills up according to the article characteristics

Article Segmentation model

➡️ Articles get a rating for each of the 7 aspects
➡️ The score counts toward the rating system
➡️ Logical topics are to be attributed within company news and industry blog

Bitcoin Suisse Research

Example of article segmentation

Here are a few examples of the articles and their respective segmentation according to the model above.

Bitcoin Suisse Research

Presentation and validation

After listing up all the necessary process steps to get to this solution, I present findings to stakeholders and collect their feedback for going forward.

Bitcoin Suisse Research

This was the end result of the segmentation model I created

Segmentation model end-results

I eventually wrote identifiers for each of the groups and categorized the articles that were collected under "company news" in their respective categories.

Bitcoin Suisse Research

🌈 UI Design, Visual design &
Creating Sub brands

As I did for the Bitcoin Suisse Pay website, I created a subbrand for Bitcoin Suisse Research. The logo design involves using the "ribbon" from our main logo and adapting it into a secondary logo.

I designed all the "modernist pattern" visuals you see during the redesign & refactor of the website, which I consider a different project focused more on website design and design system build-up.

Bitcoin Suisse Research

UI Design: Gamifying the Learn pages

To activate our private users, we intended to engage them with gamification. Inspiration for this came from Coinbase and Zapper, which already use gamified learning. We had the idea to reward users with points, that could be converted into custom NFTs.

During this meeting, feedback was given on the process maps, wireframes, components, and designs repeatedly over the course of the project. For this process, which was an exceptionally large and complex one I had 11 CEDB sessions before concluding the project.

Bitcoin Suisse Research

UI design: Article detail page

This article page uses some of the most prominent usability features. Inspiration and research were done over various blogging and writing sites. Features include:

  • Using the ideal width for readability (<900px)

  • Left-positioned article text facilitates reading

  • Breadcrumbs facilitate easy navigation

  • A brand card highlighting involved entities

  • Key information above image (title, date, and links)

  • Author as a top item for increased credibility

  • Social sharing links

  • Anchor links for easy scrolling

  • Related articles to keep the reader engaged

Bitcoin Suisse Research

Research and Insights homepage

You can write here as much as you want, this text will always look nice, whether you write longer paragraphs or just a few words. Click here and try it out.

Bitcoin Suisse Research

Article filtering

The article filtering features:

  • Tag selector

  • View changing

  • Reading time changing

Below the filtering, you can see the legacy illustration styles which caused a review of the illustration styles for all articles and research pieces.

🎨 Art Direction: Visual direction on Research and Blog

Just like with the structural redesign of "Research and Blog", I started this part by doing an in-depth analysis of the current state of Illustration of all our articles at Bitcoin Suisse Research

Bitcoin Suisse Research
Bitcoin Suisse Research

This image is made scrollable to save vertical space

Competitor analysis

I investigated similar service providers and companies who had the same strategy as us (knowledge leadership). I analyzed the visual direction they used and proposed the problems and possible solutions to our marketing team.

Conclusion of the competitor analysis:

➡️ Dark blue / Black stands for professionalism and seriousness
Examples are Coinbase institutional, PwC and Phemex
➡️ Traditional swiss banks like to use calming tones, brightness, and “money colors” (blue, green, gold), and real people
Examples are UBS and Credit Suisse
➡️ Fintechs and consulting firms use bright and bold colors with often a clear consistent color scheme and recurring illustrative patterns
PwC, KPMG, Deloitte, Klarna, Swissquote, Blackrock

Bitcoin Suisse Research

Solution proposition for Blog

Problem
➡️ Some of the visuals are perceived as monotonous and grey
➡️ Lots of different visuals, with different styling
➡️ Visuals not adding real value to the user about the Article

Goal
➡️ Give a professional, strong look
➡️ Create a strong brand experience that speaks to our target audience
➡️ Add value to the article

The problem is Consistency!

Bitcoin Suisse Research

Solution Proposal A for Research

The first solution proposal for research was to go for an all-black illustration style with red accents.

Bitcoin Suisse Research

Solution Proposal B for Research

  • Development of a new brand Color palette, to enforce the swiss identity and the brand recognition

Bitcoin Suisse Research

Illustrative evolutions

Preliminary illustration style ideas, that could be implemented in line with the new color palette.

Learnings

  • This was a project that went very in-depth and I was happy to be able to take ownership of the process, and guide it in the directions that I felt were necessary to create beautiful and polished experiences

  • I loved building models for organizing, taking apart complex problems like the structure of these categories, and reorganizing and categorizing the articles for an overall better UX.

  • Another thing I really liked was exploring, comparing, and clearly defining the problems of this project and eventually coming up with solutions in both UX, UI, and Art direction to achieve consistency

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.