The DoubleBlind team defined the below elements as the main focus of the project:
Their editorial passion came through in initial conversations about the tools they were hoping for, as well as ideas around bringing more of their content to the homepage. They were committed to a high standard of journalism, and equally aware of ethical and harm reduction efforts due to the nature of the space they were in.
Through those discussions, a site audit, and initial user research, it became clear that the redesign needed to focus less on the overall brand look and feel. Rather, we needed to focus on usability, SEO optimizations, and the ability to surface more of the journalism at meaningful moments for the user.
We developed a foundational design system using the atomic design approach and focused on reusable and familiar patterns when building responsive components. Providing a more robust library of elements gives the team flexibility in how content is presented, in a way that allows them to scale in the future.
The result is a more comprehensive homepage that showcases the vibrancy of the brand and its commitment to journalism, while still maintaining lines to critical revenue streams. At the article level, we refined some of the original design approaches in response to user research and accessibility, while introducing new features for secondary information, related content, newsletter signups and
Article Page
With any media site, the article page is the most trafficked by users. We defined a list of features, some new, some old, to build out in the design system
- Top-of-article elements and hierarchy to increase trust, benefit SEO, and navigate articles (when applicable).
Original top-of-article designNew top-of-article design
The new top-or-article design took about 1 less on mobile to get to the start of the article to begin reading, the user’s intent for coming to this page.The original top-of-article design used a lot of space for information that users tend to consciously scroll past quickly to get to the article.The new top-of-article design allowed users to get to the article sooner by decreasing the amount of space required elements occupied. We were able to add new share features and platforms. - Sharability to more platforms, especially Discord, where DoubleBlind hosts their paid, members-only community.
- Enhanced readability by addressing available viewport and accessibility concerns.
We increased the available viewport for a better, less overwhelming reading experience as a user scrolled throught the article and its in-line elements.DoubleBlind’s color palette is core to its brand tone. We knew we didn’t need or want to overhaul the palette; it mostly met current accessibility standards. However, we had feedback that some users found it difficult to read. Noting upcoming updates to accessibility standards and to provide a more consistent reading experience, we limited the color usage to the top of the article elements, ending with the TOC, which is set to become sticky soon.
- In-article features for related FAQs, How-to’s, Loved this article, etc.
- End-of-article features to surface editorial standards, legal notifications, and harm reduction information.
Homepage & Navigation
The homepage saw the most drastic before and after look-feel. One of the top priorities defined by the DoubleBlind team was the desire to surface more of their journalism.
Original homepage
We approached solving this by proposing a collection of content-curation modules that could be snapped on or off, like Legos, pending how their needs changed over time. Within the modules themselves, we offered variants that provided more flexibility in how content was teased out to users.
The modules were also designed to behave at the article level when desired.
Email Capture
The audit and user research revealed a typical conflict for users: email capture pop-ups can be effective, but users hate them.
Like death and taxes, this is a certainty.
The DoubleBlind team didn’t want to fully abandon a unit that was working well. But agreed that having an additional email unit in their toolbox, given that could work in multiple places, was needed. We all collectively agreed that more email capture positions could be worked omos the homepage. Before the redesign, the most successful email capture unit was the one in the footer, but that was also the only one on the homepage
One other concern that helped us guide this decision was the available screen space for reading. On mobile and desktop, it was less than ~50% of the screen, with two of the existing email capture/marketing positions accounting for most of the viewport. Neither had a function to dismiss it by the user after it had been viewed.