Overview
Decoded was the result of a brainstorming exercise inspired by Vox's explained series
In late 2023, while working on blockchain research at BlockTheory, a group brainstorming session sparked an exciting idea. We realized we could use storytelling to break down cryptographic concepts in a simple, structured way. By pairing structured explanations with striking visuals, we saw a way to make these ideas accessible to a much larger audience.
My Role
Visual Designer
Storyteller
Interface
Responsive Website
Duration
3 weeks
Tools
Tasks I Owned
Problem
Cryptographic concepts are often complex & evolving, making it difficult for Web3 teams to communicate them, especially to non-technical audiences
Constraints
opportunity
Can we present complex web3 concepts like "multi-party computation" similar to Apple's product pages?
goals
We set the following goals
🎯
The final explainer should be shipped with a narrative designed for an 8th-grade comprehension level
🎯
Ensuring continuity using shapes or objects as connecting/guiding elements throughout the story
🎯
Designing the script structure to follow a repeatable format, concluding with a compelling hook
🎯
Leverage motion and interaction to elevate the viewer's experience into a memorable one
from script to structure
I was tasked with starting this series with the first explainer on a topic called "Account Abstraction" within a timeframe of 3 weeks. Here's the process in 8 phases:
(note – presented linearly here but had overlaps and iterations too)
PHASE 1 : Research (Day 1-4)
I spent the majority of my time understanding the ins and outs of what this topic meant. Technical content, talking to in-house devs, Youtube videos and Twitter threads was my bread and butter. All of the relevant information I wanted was screenshotted and captured on a figjam board with my notes.
PHASE 2 : Finding the hero (Day 5-6)
Here's a little context on Account Abstraction to better understand this process.
In blockchains, a wallet (or account) is the user's primary interface, secured by unique digital keys. It holds currency, collectibles, and serves as a unique user identifier (similar to user ID).
Account = Wallet = Set of Keys
After reviewing all the information I had gathered, I began searching for a focal point for the explainer, a hero character. The criteria were simple: an element that could be easily understood, visualized, and relatable in real life. All signs pointed to one element: the key.
With the hero element in place, I drafted a rough narrative structure, focusing on how it would begin, the sub-topics to cover, and how it would conclude. After five iterations, my team and I finalized a script we were satisfied with.
design process
PHASE 4: Locking the Style (Day 11-13)
I spent the next 2 days looking at numerous examples of explainer content specifically looking at the illustration styles. Below are a few explorations I tried, before locking in on lineart mixed with 2D elements + focus text.
PHASE 5: Illustrating + Animating (Day 13-17)
The most intriguing phase of this project began once I finalized the style. I had to sketch out the entire script and animate it. Inspired by Apple’s iPhone product pages, I’d always wanted to recreate a similar effect. This led me down a rabbit hole where I discovered the concept of 'Scrollytelling' a rising trend in web design.
Some good scrollytelling websites I referenced
So after a quick chat with my dev team on the feasibility of pulling such an effect, I created a single continuous line sketch covering the entire script, which I then prototyped using smart animate to seamlessly move and resize in sync with the narrative.
PHASE 6: Concept to Production (Day 17-21)
This was the trickiest phase of the project. While the prototype visually conveyed the goal, translating it into code proved challenging. I collaborated closely with our developer, exploring motion libraries, and on day four, we found a breakthrough using Lenis Scroll and Framer Motion.
The next challenge was ensuring responsiveness. Despite various CSS tricks, we realized the only viable solution within the timeframe was creating separate illustrations for mobile and tablets, a key learning that needed thorough documentation.
PHASE 7: Defining Guidelines (Day 21-23)
As the first explainer in the series, I documented my learnings and standardized the design guidelines I followed. This ensured consistency and allowed the team, which included two other designers, to create repeatable and cohesive explainers moving forward.
PHASE 8: Rinse Repeat
Our first explainer gained significant attention, leading to a collaborative second project with a cryptographic research team specializing in the niche yet groundbreaking security concept of Multi-Party Computation.
Working closely with their founder, I designed a more ambitious follow-up explainer, featuring smoother animations and simplifying even more complex ideas.
My 2nd explainer working with an external cryptographic team
Outcome
👀
Website traffic went up by 60%
🤝🏼
