How we redesigned the Abstract blog with Abstract

Over the last year, we’ve put a lot of energy into creating content on our blog. We’ve tried to make our blog a destination for useful and inspiring education, storytelling, product, and company news. Our posts have kicked off conversations about workflows, contributing to local economies, and the visualization of version control. 

A few months ago, our team started talking about how we can improve the blog experience for both existing customers as well as new readers who aren’t as familiar with who we are and what we do. We introduced our new blog in September 2019 and as its primary designer, I’m excited to share the process of redesigning the Abstract blog, with Abstract. 

Our blog redesign project was highly collaborative and spanned multiple departments and timezones. Over a period of approximately two months, a team of seven worked together to contribute to the production of the blog you see today. 

Planning and scoping the redesign

It all started with a Zoom call and a fresh Paper doc — I find these have been handy tools for a distributed team. Together, we listed out ideas, pain points, likes, dislikes, and goals. By including folks who had experienced the limitations of our existing blog design first-hand, we could ensure the redesign could align with aesthetic and functional goals. 

Our DACI helped us prioritize the goals for the redesign:

• Improve navigation and content hierarchy to encourage deeper engagement.
• Emphasize the people who create our content (both written and visual).
• Increase awareness of our newsletter, The Commit.

All we had to do was figure out the best way to address our pain points and deliver a design that speaks to where we're going as a company. No pressure.

On a personal level, I wanted to use this redesign as an opportunity to push the edges of our brand’s visual design and create a style that’s distinct from our product marketing, all while supporting our overall brand system. 

With this project, we were able to explore and push creative boundaries. There was a point when we realized we were getting too ambitious — we didn’t have enough time to build everything we wanted. 

But by using Abstract, we have an extensive version history of our explorations, so we were able to easily prioritize what we could produce, keep the project in scope, and deliver on time. Moving forward, we’ll revisit some of those explorations and will continue to roll out incremental improvements, so stay tuned.

Improving navigation and content hierarchy 

With our new blog, we wanted to introduce content hierarchy, which became the greatest undertaking for the project. The first version of the blog had a flat hierarchy with articles sorted chronologically — there was no way to elevate some stories over others.  

The visual presentation of every post on our old blog index and archive pages was exactly the same, so no story stood out as visually distinct than any other (except the one featured post at the top of the index). For our new blog, we wanted to better guide you to find and discover content that is most relevant to you. Since we’re not a daily publication, our goal isn’t to serve up what’s hot and new, but rather evergreen information that will help you better understand Abstract, both as a company and a product. 

With the update, we can now curate and group stories by common denominators. This way, you can move between relevant pieces more fluidly. We’ve mimicked infinite scroll at the bottom of articles as a friendly way to serve new related content to you. 

Emphasizing people who create content

As a company, we place value on the people behind the work we produce together. With this redesign, we saw an opportunity to reflect our values by emphasizing authors and featured creators. We humanized our author profile pages and included more visual variety to article presentation. 

• Author profile pages now have space for biographies and feature articles written by the author.
• Updated pull quote styles can include contributor avatars so we can feature multiple points of view in one post. 
• Attribution for blog header images highlight internal and external contributors.

Increasing awareness of our newsletter, The Commit

We introduced The Commit newsletter in the summer of 2019 to kick off an ongoing conversation with our customers. The newsletter is our way of curating not only the content that we publish on our blog, but also new content, podcasts, and events from the design community.

Our blog and The Commit complement one another — existing subscribers may even recognize designs from today’s blog from earlier editions. With our fresh design, we’re able to showcase the subscription form for The Commit, so new visitors can sign up for a monthly treat in their inbox. 

Details in the design

Previously, we were loading too many variations of each font, so we mapped each typeface to a voice to aid consistency and website performance. Now, big cheerful messages are in Vesterbro Poster, our everyday language is in GT America Sans, and any technical or meta information is set in GT America Mono.

• We’ve updated the default body copy from serif to sans-serif to improve legibility, especially at smaller sizes. 
• We changed the background of the blog from light gray to white, for a cleaner look and better legibility. 
• We've also updated the default styling of text links with accessibility in mind.

You’ll see these typographic improvements throughout our website as we build on this system. Each detail was prioritized in an effort to improve readability.

We hope you enjoy it!

Special thanks to Hugo Baeta, Kasey Fleisher Hickey, Zé Fontainhas, Jacqwi Campbell, Maya Joshi, Daina Lightfoot, and Michael Leibovich for your contributions and support during this project. On behalf of this team, I’d like to encourage you to send us a note if you have questions or ideas to share. You’re welcome to subscribe to our monthly newsletter, The Commit, for a look behind the scenes.