Now that we’ve launched DECODE, our foray into the editorial world, we wanted to give our readers an inside look into the design thinking that went into creating it.
Our years of experience in media and publishing has honed our perspective on what it means to be disruptive in the editorial space.
Much of today’s browsing is monotonous, with a single page scroll and a single color. There is very little differentiation or variation.
We approach each of our client projects, whether it’s a website launch or a refresh, by asking ourselves, “how can we design an experience that’s completely unique and immersive for audiences?”
Inherently in that process are certain constraints that come with delivering client work — is the client willing to take risks and push boundaries? Are there certain back-end contractions we need to consider?
We’ve developed highly successful card systems for publications like The Outline, Input, Nylon, and Bustle, and wanted to use that as the foundation for a browsing experience that would break the norm of traditional online reading.
These card systems allow text and image to live together…
With impactful quotes
And big data moments
"It’s an immersive editorial experience that allows our designers’ unique creativity to shine.” — Chenta Yu, Group Design Director
But it’s not just about how DECODE looks. Like any efficient editorial newsroom, we needed to ensure our form had function.
Our development team created simple wireframes and a template system that our designers can work with to mix and match elements.
“For DECODE, we’ve decided to use Figma, a design tool that allows for collaboration and live editing. With all of us at home, this has been particularly helpful in bringing us closer and improving workflow efficiencies.” — Chloe Chung, Junior Visual Designer
First we challenged ourselves to ideate four design options that really pushed the boundaries. In two days.
We ultimately decided to further develop the direction that felt the most immersive, but again challenged ourselves to make it even more graphic and visual.
That’s how we landed on DECODE’s identity.
“A blend of bold Swiss design poster inspiration with classic typography -driven magazine design that would really highlight our editorial perspective.” — Chenta Yu, Group Design Director
After finalizing the identity, we explored the interaction design, landing on two scrolling options.
Vertical and horizontal.
While functional, the vertical design didn’t deliver the type of paradigm-breaking experience we wanted. It felt like an e-reader.
The horizontal scroll would give readers something they’d potentially never experienced before.
Our design direction required deep collaboration between our design and development teams.
Our system allows for infinite possibilities that allow different media formats, colors, and base templates. Each line of code therefore needed to respect that.
As a result, flexible code was necessary. Finding the balance between system and uniqueness is always a challenge, but DECODE found the sweet spot.
Each template needed to feel like a centerfold and fit into a larger narrative with the other cards in the stack.
“Smooth and clear interactions are equally important to telling this story. Each card needs to know where it stands in the story, and where the user might want to go. The code, then, needed to not only be flexible, but also self aware.” — Chris Anderson, Senior Developer
A swipe or tap can bring the reader deeper into a narrative or invite them into a whole new stack.
Tracking and accommodating for these possibilities requires simple, clean code written with the user in mind.
We hope you enjoyed this window into our design thinking and development process as much as we enjoyed writing about it.