“I’ll tell you what—let’s just take off and have some fun today!”
–Bob Ross
If you’ve ever watched The Joy of Painting, you know how Bob Ross’s broad strokes of blue, black, and green, expertly placed and blended over the course of 25 minutes, come together to form a masterpiece.
Seriously, every time.
“We don’t really know where this goes,” Ross would quip while dabbing the canvas. “And I’m not sure we really care.”
We really tried to channel Ross’ sense of happenstance and the joy of play during the recent redesign of the Digital Telepathy (DT) blog. Which might sound a little crazy. But bear with us.
The previous design had grown a bit long in the tooth at 3 years old and no longer lived up to our standards. Redesigning it would give us an opportunity to both showcase our brand and our passion for soulful, objective-based design.
Our blog redesign process
Our 10-person team agreed early on to use a broad-strokes approach. We explored many options, then whittled our way down to an experience we’re proud of.
Here are 7 tips that helped us stay on course:
- Create a requirements inventory and set clear priorities for each owner
- Stay focused on the objective and be creative about how to achieve it
- Design with real content and try to account for the uniqueness of every post
- Get approval for discrete elements rather than the complete concept
- Encourage collaboration with all stakeholders to build a sense of ownership and accountability
- Balance aesthetics with performance by embracing developers’ design input
- Migrate content early to make in-browser polishing easier
Gathering inspiration
Our blog provides an outlet for our entire agency, so we scoured the blogosphere to find inspiration for our own blend of typography, photography, illustrations, and interactions.
We were inspired by:
- Medium’s simplistic and compelling approach to imagery
- Quartz’s clean, professional typography and unique navigation
- The Great Discontent’s bold, impactful design elements and components
- TED Playlists’ libraries and search features
- ReadWrite’s organization of content and type styles, specifically in their hero areas
Getting alignment from the get-go with element collages
With 10 internal stakeholders, getting everybody aligned with our creative vision early on would be essential. To do this, we borrowed a tool from Dan Mall, founder and design director of SuperFriendly: element collages.
“A full comp often requires ideas to be fully realized,” Mall explains. “An element collage allows me to document a thought at any state of realization and move on to the next.”
Using Mall’s element collage process let all team members communicate frequently and work efficiently. Thinking about our design as elements within the whole kept us moving and focused discussions on what worked and what didn’t, rather than the traditional pitch and approval process.
We used InVision as the hub for our collages—it became the focal point for weekly conversations with everyone involved. We built an inventory of elements in Google Sheets and used that to keep track of our assignments and progress. Our design team started with broad strokes to build momentum before joining the development team to fine-tune these elements in-browser.
Thinking about our design as elements within the whole kept us moving and focused discussions on what worked and what didn’t, rather than the traditional pitch and approval process.
As we worked, we identified 4 key elements we had to nail.
Element 1: typography, the core of editorial design
Because reading forms the core of a blog experience, typography took center stage in our design process. As explained in Butterick’s Practical Typography, “[T]ypography that is aesthetically pleasant, but that doesn’t reinforce the meaning of the text, is a failure.”
We didn’t want our fonts to fail.
To create consistency with the rest of our site, we chose Whitney as our primary headline font. We originally used a heavier weight, but found that a thinner weight imparted a more mature tone.
We chose the serif Mercury for body copy because it’s cohesive and complementary to Whitney. This enhanced the reading experience and differentiated the blog from the rest of our agency site. We serve both from Hoefler & Co.’s Typography.com and use screensmart fonts for amazing rendering across many browsers.
Like Ross’ palettes, our typography choices were purposeful. We even examined how many characters per line would look and read the best. Rendering, sizing, and weight of type was polished with a developer toward the end of the project to define hierarchy and readability.
Element 2: engagement-boosting layouts
The old blog design had some layout deficiencies: a traditional sidebar, color blocks over a photo to make the headline readable, just 2 heading styles, and a lack of visual rhythm.
Since so many people come to our blog through organic search, we added a large hero image to engage them. This decision wasn’t just aesthetic—we wanted the first thing people see to be something they’d read and share. Now our engagement metrics are trending up.
The simple 1-column layout helps readers stay focused and makes it easier to scale across various screen sizes. Creating a custom grid enabled us to break out of the text container for the various types of images, quotes, and assets. We also built in greater flexibility for our authors with shortcodes that make it easy to create lists, photo galleries, and pull quotes.
Since users browsing a category page are looking for something specific, we adopted percentage-width tiles and set the type to make for an easily scannable experience. We also found that category pages were a good place to inject the soul of our company. Each category has its own vibe taken straight from the hallways, desks, and even the bathrooms of our office.
These simple layout decisions, complemented by carefully chosen typography and imagery, created visual rhythm and have led to greater reader engagement—including more shares, better comments, and a 30% decrease in bounce rate.
Element 3: tools to encourage discovery
“Navigation design is all about findability and usability. No matter how simple or complicated, navigation must work well for its users.”
–Kayla Knight, Smashing Magazine
We wanted to enable readers to dig deep into our blog archives and discover our agency site without creating clutter.
Using insights from Qualaroo surveys and inspiration from Medium’s blog, we designed a subnav that appears on hover at the top of the site and on scroll-up. Our analytics told us it made sense to hide—visitors just weren’t using the category pages.
The theory is: if people are looking for a way to navigate through the site, they’ll find it when moving their mouse to the place a menu is expected to be. This nontraditional UX pattern reduces clutter and friction.
The DT blog offers up a treasure trove of information—there’s 8 years’ worth of content in its archives. Given that wealth, we needed to make it easy for people to find posts on specific topics. To solve this, we made the search bar consistently accessible.
Using a blend of unique and trending UX patterns, we let readers find the content they want—and the content they didn’t know they wanted.
Element 4: reading lists to tell better, longer stories
We often build upon an idea across many posts—and they could be weeks, even months apart. That’s why we created reading lists, which give us the ability to string posts together in a simple, compelling way. So far, these aren’t seeing a lot of action, but the readers who find them are digging deep—the average visit times are more than 5 minutes.
Using a blend of unique and trending UX patterns, we let readers find the content they want—and the content they didn’t know they wanted.
Reading lists give our audience:
- Access to the reading lists landing page in the sub-navigation and within posts
- Clean and simple landing pages focused on content
- Read/unread indicators to keep readers on track
- In-post access to the rest of the current reading list
- Quick access to the next post at the end of the current article
- The ability to subscribe, giving us another chance to turn a casual reader into a fan
The final touch: estimated read times in the header so people can decide whether to dig in now or click “read later,” which sends them an email. When readers save a post for later, they can subscribe to the blog—and they’ll have a reminder in their inbox to return.
Elevating the reading experience
Digital Telepathy’s designers, writers, developers, stakeholders, and strategists all collaborated regularly on this redesign, allowing us to divide (and conquer) tasks among the entire team. This level of involvement kept the team aligned and passionate about our creative vision. Sure, we had some hiccups, but camaraderie and kindness go a long way. Oh, and we treated this project like any other—we gave ourselves a budget and ate our own dog food (in applying our objective-based design philosophy).
Our blog became a primed canvas for authors, complete with shortcodes, content discovery tools, and customizable layout options. We’ve eliminated many unnecessary plugins and data integrations on our WordPress site and our developers did an excellent job migrating the content and creating rules to better present legacy content. Clear typography and carefully crafted images created a beautiful design and will better engage our readers.
Our objective was to elevate the reading experience, and we think we did just that.
by Cody Iddings
Cody Iddings, an island boy from Kauai, currently resides in San Diego as a designer at Digital Telepathy. He spends his free time searching for waves, nerding over Nintendo, and cruising with his ever-increasing family. Always frothing over friends and life, Cody is excited to invest in others and their dreams.
