World's #3 Crypto Media Website Redesign
Decrypt is a Web3 media company and creative studio, covering Crypto, AI and the latest tech trends. Powered by AI and Crypto Tools.
Decrypt is one of the most visited crypto media outlets in the world, reaching millions of readers monthly across its editorial platform, tools, and Web3 integrations. At the time of this project, it ranked among the top 3 crypto news websites globally.
Goals & Outcomes
Context & Research
Decrypt targeted mostly entry level, low and medium proficiency in Crypto users. Editorial style is adapted to work well for different audiences.
Research focused around:
- Homepage structure (easiest access to desired content improves usability)
- Articles styling and optimisation (to achieve longer sessions per user and time on page)
- Information architecture and navigation, and how we could improve ours
Data from GA, Parse.ly, SemRush + email surveys + users on Discord helped us segment our Audience with more clarity.
Traffic rise from non developed countries
Broken Token Promises = Unhappy Users
Unhappy Users = unhealthy Discord channel
Most active community users = non developed countries
Homepage
We optimised space usage for ad placement and supplementary content, enhancing overall user engagement. By maximising space utilisation, we aimed to enhance user interaction and content visibility.
Transitioning from the previous left-sided menu approach, we considered implementing a three-column layout with a generous central space for main content.
This approach allowed us to allocate the main content to a central, larger column, while accommodating secondary content in smaller side columns.
Old Homepage
New Homepage
Key Features
New Crypto Wallet login
This new feature presents three significant opportunities:
- It serves to educate novice users on the functionalities and potential of crypto wallets.
- It paves the way for a more immersive web3 experience for experienced crypto enthusiasts.
- It aims to foster loyalty from two distinct user demographics.
User Settings & Newsletter Pages
We implemented a user settings and profile page to manage user wallets and emails, alongside a newsletter page for managing subscriptions.
AI News Explorer
Empowered by AI, this feature serves as a News Aggregator, delivering the latest updates from authoritative media sources.
The primary objective is to provide users with up-to-date news summaries while directing them to the original sources for further reading. By enhancing user retention, session duration, and domain authority through credible content linkage, this feature enhances the overall user experience.
Information Architecture and Navigation Structure
Upon analysing user behaviour data, we identified sections like collections and reviews, prominently featured on the menu and homepage, that didn’t bring traffic. To address this, we proposed reorganising the menu structure.
We prioritised essential and high-traffic elements in a top menu layout, while retaining a full menu accessible through a hamburger icon for comprehensive navigation. We kept a bottom menu on mobile that would be activated on scroll for easier access to some deemed-important sections.
New Top Navbar with essential pages
Sidebar collapsible menu
Mobile bottom menu
Visual Design
Redesigned Articles Headers & Layouts for Improved UX
We overhauled the layout of various article types, including regular News Articles, Deep Dives, and listicles (such as “Top 5 Crypto Cities”).
For each layout, we optimised minimum and maximum text column sizes, font size, line height, paragraph spacing, and contrast ratios to ensure readability across different screen sizes.
Old Article Layout
New Article Layout
New Gaming Section Article Layout
Revamped Accent and Background Colours
We decided to depart from a ubiquitous purple accent colour, that had become too used in the crypto space.
Instead, we chose a fresher tone that maintains a creative and innovative vibe while adding a touch of delicacy to the brand. Additionally, we transitioned from a grey background to a full white background and removed unnecessary background line guides to simplify the design.
Typography + Accessibility
We made significant visual updates to Decrypt’s typography to enhance readability.
We maintained a trio of font families that paired well: Akzidenz Grotesk, Canela, Meta Serif Pro.
Starting with articles base text font, we opted to replace the previous Garamond font with Meta Serif Pro. While Garamond is undoubtedly beautiful and elegant, its lower x-height and classic appearance, better suited for printed text, made it less ideal for our crypto-focused website. Meta Serif Pro performs better on smaller screens and offers a more modern look, aligning well with our use case.
Canela was still kept as section title and article title’s font while Akzidenz is used as an overall versatile tool.
I also made accessibility improvements throughout the whole components library and website following WCAG’s Guidelines.
Old
New
Streamlined Image Filters for Consistency and Quality
Previously, all images were automatically assigned colour filters in the CMS, leading to inconsistent results and occasional unnatural colour casts. To address this, we switched the default option to no filter and refined existing filters to subtle adjustments. This encouraged the editorial team to adopt a uniform approach, resulting in more consistent and visually appealing images throughout the website.
Old Filters
New
Unified components Library and DS.
We took an incremental approach to build an atomic design system. For easier understanding with the frontend engineers, we used Tailwind naming conventions as a starting point.
Built Decrypt's education platform from scratch.
Go to case study →