Decrypt Media

Decrypt 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 Website Redesign

Decrypt Media

Decrypt is a Web3 media company and creative studio, covering Crypto, AI and the latest tech trends. Powered by AI and Crypto Tools.

Decrypt Media

Decrypt 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 Website Redesign

Decrypt Media

Decrypt is a Web3 media company and creative studio, covering Crypto, AI and the latest tech trends. Powered by AI and Crypto Tools.

Overview

Timeline

Jan 2023

Mar 2023

Role

Product Designer / UI

Team

CEO, Head of Product/PM, 3 Developers, Product Designer

Project type

Web App

Responsibilities

UX

UI

Information Architecture

Prototypes

User Flows

Quantitative Research

Key Stakeholders Alignment

Branding

Competitor Analysis

User Research

Overview

Timeline

Jan 2023

Mar 2023

Role

Product Designer / UI

Team

CEO, Head of Product/PM, 3 Developers, Product Designer

Project type

Web App

Responsibilities

UX

UI

Information Architecture

Prototypes

User Flows

Quantitative Research

Key Stakeholders Alignment

Branding

Competitor Analysis

User Research

Overview

Timeline

Jan 2023

Mar 2023

Role

Product Designer / UI

Team

CEO, Head of Product/PM, 3 Developers, Product Designer

Project type

Web App

Responsibilities

UX

UI

Information Architecture

Prototypes

User Flows

Quantitative Research

Key Stakeholders Alignment

Branding

Competitor Analysis

User Research

Overview

Timeline

Jan 2023

Mar 2023

Role

Product Designer / UI

Team

CEO, Head of Product/PM, 3 Developers, Product Designer

Project type

Web App

Responsibilities

UX

UI

Information Architecture

Prototypes

User Flows

Quantitative Research

Key Stakeholders Alignment

Branding

Competitor Analysis

User Research

Why did we build this?

The website revamp would help elevate brand status and provide an opportunity to implement new AI and web3 features while improving accesibility & usability, thus boosting company's KPIs.

The website revamp would help elevate brand status and provide an opportunity to implement new AI and web3 features while improving accesibility & usability, thus boosting company's KPIs.

The website revamp would help elevate brand status and provide an opportunity to implement new AI and web3 features while improving accesibility & usability, thus boosting company's KPIs.

Decrypt in Numbers

#3

Crypto News Website

#3

Crypto News Website

#3

Crypto News Website

~4 million

Monthly Unique Visitors

~4 million

Monthly Unique Visitors

#1

USA Main Audience

#1

USA Main Audience

+65%

Native English Speakers

+65%

Native English Speakers

#3

Crypto News Website

4 million

Monthly Unique Visitors

+65%

Native English Speakers

Goals

Accesibility improvement: comply with AA & AAA WCAGS's standards

Improve website Navigation and content consumption

AI & Web3 Features Implementation

↑ Ad & Partnerships Revenue

↑ Time p/session

↑ Avg. page/session

Project Impact & Achievements

15%

Unique Visitors Increase

15%

Crypto News Website

15%

Unique Visitors Increase

+5

Partnerships Unlocked

+5

Partnerships Unlocked

+5

Partnerships Unlocked

Ads Revenue

Ads Revenue

Ads Revenue

Avg. Pages p/session

Avg. Pages p/session

Avg. Pages p/session

🎨

Design System Implementation

🎨

Design System Implementation

🎨

Design System Implementation

👀

WCAGS Accesibility Compliance

👀

WCAG Accesibility Compliance

👀

WCAGS Accesibility Compliance

👀

WCAGS Accesibility Compliance

Project Launch

Decrypt users were considered mostly entry level, low and medium proficiency in Crypto. Thus Decrypt’s slogan “Your Gateway to the world of Web3”. Editorial style is adapted by the team in a way to be clear for both newbies as well as seasoned crypto users.

Competitive Audit

I researched not only crypto media but most popular and visited mainstream media from USA and EU, taking into account most of our audience comes from those regions. The research focused around three axes: 1-Homepage Structure and its components (easiest access to desired content improves usability) 2-Articles styling and optimization for ease of read (to achieve longer session per user and time on page) 3-Information architecture and Navigation and how we could improve ours.

Project Launch

Decrypt users were considered mostly entry level, low and medium proficiency in Crypto. Thus Decrypt’s slogan “Your Gateway to the world of Web3”. Editorial style is adapted by the team in a way to be clear for both newbies as well as seasoned crypto users.

Competitive Audit

I researched not only crypto media but most popular and visited mainstream media from USA and EU, taking into account most of our audience comes from those regions. The research focused around three axes: 1-Homepage Structure and its components (easiest access to desired content improves usability) 2-Articles styling and optimization for ease of read (to achieve longer session per user and time on page) 3-Information architecture and Navigation and how we could improve ours.

Project Launch

Decrypt users were considered mostly entry level, low and medium proficiency in Crypto. Thus Decrypt’s slogan “Your Gateway to the world of Web3”. Editorial style is adapted by the team in a way to be clear for both newbies as well as seasoned crypto users.

Competitive Audit

I researched not only crypto media but most popular and visited mainstream media from USA and EU, taking into account most of our audience comes from those regions. The research focused around three axes: 1-Homepage Structure and its components (easiest access to desired content improves usability) 2-Articles styling and optimization for ease of read (to achieve longer session per user and time on page) 3-Information architecture and Navigation and how we could improve ours.

Project Launch

Decrypt users were considered mostly entry level, low and medium proficiency in Crypto. Thus Decrypt’s slogan “Your Gateway to the world of Web3”. Editorial style is adapted by the team in a way to be clear for both newbies as well as seasoned crypto users.

Competitive Audit

I researched not only crypto media but most popular and visited mainstream media from USA and EU, taking into account most of our audience comes from those regions. The research focused around three axes: 1-Homepage Structure and its components (easiest access to desired content improves usability) 2-Articles styling and optimization for ease of read (to achieve longer session per user and time on page) 3-Information architecture and Navigation and how we could improve ours.

Navigation Benchmarking

Navigation Benchmarking

Navigation Benchmarking

Audience

Data from GA, Parse.ly, SemRush + email surveys + users on Discord helped us segment our Audience with more clarity.

Audience

Data from GA, Parse.ly, SemRush + email surveys + users on Discord helped us segment our Audience with more clarity.

Audience

Data from GA, Parse.ly, SemRush + email surveys + users on Discord helped us segment our Audience with more clarity.

Audience

Data from GA, Parse.ly, SemRush + email surveys + users on Discord helped us segment our Audience with more clarity.

Wallet login

Introducing web3 wallet login

This new feature presents two significant opportunities. Firstly, it serves to educate novice users on the functionalities and potential of crypto wallets, transitioning them into proficient crypto users. Secondly, it paves the way for a more immersive web3 experience for experienced crypto enthusiasts, with future plans for NFT giveaways, certificates, airdrops, and more. Ultimately, it aims to foster loyalty from two distinct user demographics.

Wallet login

Introducing web3 wallet login

This new feature presents two significant opportunities. Firstly, it serves to educate novice users on the functionalities and potential of crypto wallets, transitioning them into proficient crypto users. Secondly, it paves the way for a more immersive web3 experience for experienced crypto enthusiasts, with future plans for NFT giveaways, certificates, airdrops, and more. Ultimately, it aims to foster loyalty from two distinct user demographics.

Wallet login

Introducing web3 wallet login

This new feature presents two significant opportunities. Firstly, it serves to educate novice users on the functionalities and potential of crypto wallets, transitioning them into proficient crypto users. Secondly, it paves the way for a more immersive web3 experience for experienced crypto enthusiasts, with future plans for NFT giveaways, certificates, airdrops, and more. Ultimately, it aims to foster loyalty from two distinct user demographics.

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.

Wallet login

Introducing web3 wallet login

This new feature presents two significant opportunities. Firstly, it serves to educate novice users on the functionalities and potential of crypto wallets, transitioning them into proficient crypto users. Secondly, it paves the way for a more immersive web3 experience for experienced crypto enthusiasts, with future plans for NFT giveaways, certificates, airdrops, and more. Ultimately, it aims to foster loyalty from two distinct user demographics.

Homepage

New Layout/Grid Approach

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. By maximizing space utilization, we aimed to enhance user interaction and content visibility.

With this approach we optimized space usage for ad placement and supplementary content, enhancing overall user engagement.

Homepage

New Layout/Grid Approach

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. By maximizing space utilization, we aimed to enhance user interaction and content visibility.

With this approach we optimized space usage for ad placement and supplementary content, enhancing overall user engagement.

Homepage

New Layout/Grid Approach

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. By maximizing space utilization, we aimed to enhance user interaction and content visibility.

With this approach we optimized space usage for ad placement and supplementary content, enhancing overall user engagement.

Homepage

New Layout/Grid Approach

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. By maximizing space utilization, we aimed to enhance user interaction and content visibility.

With this approach we optimized space usage for ad placement and supplementary content, enhancing overall user engagement.

User Settings & Newsletter Subscription

We implemented a "user settings" and profile page to manage user's wallets, emails and at the same time a newsletters page to manage subscriptions.

User Settings & Newsletter Subscription

We implemented a "user settings" and profile page to manage user's wallets, emails and at the same time a newsletters page to manage subscriptions.

User Settings & Newsletter Subscription

We implemented a "user settings" and profile page to manage user's wallets, emails and at the same time a newsletters page to manage subscriptions.

User Settings & Newsletter Subscription

We implemented a "user settings" and profile page to manage user's wallets, emails and at the same time a newsletters page to manage 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.

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.

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.

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 analyzing user behavior data, we identified sections like collections and reviews, prominently featured on the menu and homepage, that didn't resonate with users. To address this, we proposed reorganizing the menu structure.

We prioritized 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.

Information Architecture and Navigation Structure

Upon analyzing user behavior data, we identified sections like collections and reviews, prominently featured on the menu and homepage, that didn't resonate with users. To address this, we proposed reorganizing the menu structure.

We prioritized 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.

Information Architecture and Navigation Structure

Upon analyzing user behavior data, we identified sections like collections and reviews, prominently featured on the menu and homepage, that didn't resonate with users. To address this, we proposed reorganizing the menu structure.

We prioritized 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.

Information Architecture and Navigation Structure

Upon analyzing user behavior data, we identified sections like collections and reviews, prominently featured on the menu and homepage, that didn't resonate with users. To address this, we proposed reorganizing the menu structure.

We prioritized 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.

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 optimized minimum and maximum text column sizes, font size, line height, paragraph spacing, and contrast ratios to ensure readability across different screen sizes.

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 optimized minimum and maximum text column sizes, font size, line height, paragraph spacing, and contrast ratios to ensure readability across different screen sizes.

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 optimized minimum and maximum text column sizes, font size, line height, paragraph spacing, and contrast ratios to ensure readability across different screen sizes.

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 optimized minimum and maximum text column sizes, font size, line height, paragraph spacing, and contrast ratios to ensure readability across different screen sizes.

Revamped Accent and Background Colors

We decided to depart from the ubiquitous purple accent color, as it no longer conveyed the originality we sought. 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 gray background to a full white background and removed unnecessary background line guides to simplify the design.

Revamped Accent and Background Colors

We decided to depart from the ubiquitous purple accent color, as it no longer conveyed the originality we sought. 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 gray background to a full white background and removed unnecessary background line guides to simplify the design.

Revamped Accent and Background Colors

We decided to depart from the ubiquitous purple accent color, as it no longer conveyed the originality we sought. 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 gray background to a full white background and removed unnecessary background line guides to simplify the design.

Revamped Accent and Background Colors

We decided to depart from the ubiquitous purple accent color, as it no longer conveyed the originality we sought. 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 gray background to a full white background and removed unnecessary background line guides to simplify the design.

Unified components Library and DS.

We took an incremental approach to build an atomic design system.

Unified components Library and DS.

We took an incremental approach to build an atomic design system.

Unified components Library and DS.

We took an incremental approach to build an atomic design system.

Unified components Library and DS.

We took an incremental approach to build an atomic design system.

Typography + Accesibility

We made significant visual updates to Decrypt's typography to enhance readability.

We maintained a trio of fonts families that paired well: Akzindenz 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 is still kept as section title and article title's font while Akzidenz is used as an overall versatile tool.

Accesibility

. AA ratios 4:51 and 3:1 large text . AAA ratios 7:1 and 4:5:1 large text . Ensured Text contrast and sizes for proper readbility

Also Accessibility Improvements throughout the whole components library and website following WCAG's Guidelines

Typography + Accesibility

We made significant visual updates to Decrypt's typography to enhance readability.

We maintained a trio of fonts families that paired well: Akzindenz 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 is still kept as section title and article title's font while Akzidenz is used as an overall versatile tool.

Accesibility

. AA ratios 4:51 and 3:1 large text . AAA ratios 7:1 and 4:5:1 large text . Ensured Text contrast and sizes for proper readbility

Also Accessibility Improvements throughout the whole components library and website following WCAG's Guidelines

Typography + Accesibility

We made significant visual updates to Decrypt's typography to enhance readability.

We maintained a trio of fonts families that paired well: Akzindenz 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 is still kept as section title and article title's font while Akzidenz is used as an overall versatile tool.

Accesibility

. AA ratios 4:51 and 3:1 large text . AAA ratios 7:1 and 4:5:1 large text . Ensured Text contrast and sizes for proper readbility

Also Accessibility Improvements throughout the whole components library and website following WCAG's Guidelines

Typography + Accesibility

We made significant visual updates to Decrypt's typography to enhance readability.

We maintained a trio of fonts families that paired well: Akzindenz 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 is still kept as section title and article title's font while Akzidenz is used as an overall versatile tool.

Accesibility

. AA ratios 4:51 and 3:1 large text . AAA ratios 7:1 and 4:5:1 large text . Ensured Text contrast and sizes for proper readbility

Also Accessibility Improvements throughout the whole components library and website following WCAG's Guidelines

Streamlined Image Filters for Consistency and Quality

Previously, all images were automatically assigned color filters in the CMS, leading to inconsistent results and occasional unnatural color casts. To address this issue, we switched the default option to 'no filter' and refined existing filters to subtle adjustments. This change encouraged the editorial team to adopt a uniform approach, resulting in more consistent and visually appealing images throughout the website.

Streamlined Image Filters for Consistency and Quality

Previously, all images were automatically assigned color filters in the CMS, leading to inconsistent results and occasional unnatural color casts. To address this issue, we switched the default option to 'no filter' and refined existing filters to subtle adjustments. This change encouraged the editorial team to adopt a uniform approach, resulting in more consistent and visually appealing images throughout the website.

Streamlined Image Filters for Consistency and Quality

Previously, all images were automatically assigned color filters in the CMS, leading to inconsistent results and occasional unnatural color casts. To address this issue, we switched the default option to 'no filter' and refined existing filters to subtle adjustments. This change encouraged the editorial team to adopt a uniform approach, resulting in more consistent and visually appealing images throughout the website.

Streamlined Image Filters for Consistency and Quality

Previously, all images were automatically assigned color filters in the CMS, leading to inconsistent results and occasional unnatural color casts. To address this issue, we switched the default option to 'no filter' and refined existing filters to subtle adjustments. This change encouraged the editorial team to adopt a uniform approach, resulting in more consistent and visually appealing images throughout the website.

Outcomes

After implementing the redesign, we experienced positive results across various key performance indicators (KPIs).

. Unique visitors increase from 3.6m to 4.4m . Increase in pages p/session . NFT Courses certificates increased growth rate . GG Hub Membership passes grew to 30k . New layout led to an increase in Ad Revenue . Redesign helped increase more valuable partnerships

Outcomes

After implementing the redesign, we experienced positive results across various key performance indicators (KPIs).

. Unique visitors increase from 3.6m to 4.4m . Increase in pages p/session . NFT Courses certificates increased growth rate . GG Hub Membership passes grew to 30k . New layout led to an increase in Ad Revenue . Redesign helped increase more valuable partnerships

Outcomes

After implementing the redesign, we experienced positive results across various key performance indicators (KPIs).

. Unique visitors increase from 3.6m to 4.4m . Increase in pages p/session . NFT Courses certificates increased growth rate . GG Hub Membership passes grew to 30k . New layout led to an increase in Ad Revenue . Redesign helped increase more valuable partnerships

Outcomes

After implementing the redesign, we experienced positive results across various key performance indicators (KPIs).

. Unique visitors increase from 3.6m to 4.4m . Increase in pages p/session . NFT Courses certificates increased growth rate . GG Hub Membership passes grew to 30k . New layout led to an increase in Ad Revenue . Redesign helped increase more valuable partnerships

Rod Martinez © 2024

Rod Martinez © 2024

Rod Martinez © 2024