We use this process front page for every project
Research restructuring
Restructuring research to improve findability and experience
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 categorizationWe 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.
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
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
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.
🖥️ 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.
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
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"
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
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.
Example of article segmentation
Here are a few examples of the articles and their respective segmentation according to the model above.
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.
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.
🌈 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.
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.
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
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.
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
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
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!
Solution Proposal A for Research
The first solution proposal for research was to go for an all-black illustration style with red accents.
Solution Proposal B for Research
Development of a new brand Color palette, to enforce the swiss identity and the brand recognition
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.