Planet
header phone
background
preview
phone
Dashboard
day one
day two
blue gradient
blue gradient
white gradient
black gradient
black gradient
trees
mystery
free will
phone
phone
phone
phone
phone
phone
phone
phonephone
phone
phone
phone
Lemon
Flowers
Neon
Pinky Sky
Stairs
Chair
Background
Block
Can
Logo
Plant
Header
Smartphone
Smartphone
phone
cloud
cover image

Making the MetaBlog

 

Some Me Time

You know that friend that seems like they’re always doing things for other people? Then you wonder when they make time for themselves. You hope they’ve found time for a spa day. A night out with friends they haven’t seen in a while. A weekend in deep isolation so they can blast through 2 seasons of Westworld. 


If we’re being honest, we were starting to feel that way as a team in 2017. We were spending so much time making products for others and not taking enough “me” time as a team to reflect and share what we were doing and learning along the way. And no, we have no idea what the hell is going on in Westworld either.


We started 2018 with a plan to take more time for ourselves as a company which meant rethinking how we share our work and learnings. We launched a new MetaLab website this summer that allows our work to speak for itself. But sometimes we want to speak for our work and that’s why we moved right into planning this new blog.


The Why

We invest a lot of time hiring a world-class team to design, build, and ship great products for our clients and along the way we get to learn a lot. 


We’re often asked to share those learnings. Learnings like how to go from idea to napkin sketch to launching an MVP product. Learnings on designing the user flows that create the best experiences possible. How to change up careers into a product design role. How we function as a strong team while supporting a remote work culture. 


The list goes on but we knew these were the reasons we wanted to start this new blog—to share how we work together to launch products used around the world.


A Slack message from MetaLab's Engineering Director sugguesting that we write this blog post about building the blog

Designing the MetaBlog

The main drive behind the design of our new website and blog is clarity and discovery. Much like the way we do our actual work, we didn’t want any fluff. Reading a post should be an engaging and focused experience without applause, comments, and constant pop-ups asking you to sign up for a newsletter.


Wireframes from the early MetaLab blog design exploration
Early MetaBlog wireframe exploration

But as many designers and engineers know, making something simple is tough! We explored a few flashier approaches before Noah, the designer of the blog, said, “No, no, no. This ain’t right.” He stripped it all back so our writing could do the same as our work: speak for itself. 


Where we did decide to splurge a little was in hover animations reminiscent of our homepage. Just a little dash ‘o fun and a peek inside an article before actually diving into it. After a few iterations, we felt that designs were ready to be handed off to the engineering team.


A prototype of the MetaLab blog home page with hovering post previews

Dev Team Deets

Like most great projects, this started with a Google Doc jammed full of ideas, and vague requirements. The overall request was straightforward: build a content management system with a rich text editor that will allow anyone from our team to write about what we do. We knew we’d want to share images, videos and highlight the work we’re passionate about. 


Our engineering team decided from the beginning that we wanted to create something of our own for the blog CMS.


A Slack message discussing the

We set to work on creating a simple WYSIWYG editor. Our team was made up of frontend developers and Gophers (aka, our fav Go developers). The frontend team started playing around with DraftJS while a backend post schema was crafted.


One tough constraint we were up against was ensuring we were supporting React in the same way we had with the new MetaLab website. This ruined our original plan of rendering the posts as Go templates. But, as always, the engineering team went down a rabbit hole of creative solves and figured out a solution.


Once that was sorted, we spent the next few days with our heads down implementing designs and turning our proof-of-concept editor into something more robust with the features we needed for writing, queueing, and promoting posts.


What’s Next

So, here we are. You’re reading post number one on this new blog. We plan to post here when we have something to say about how we build products and function as a company, not just because some editorial calendar says so. We want to respect people’s time, so sign up for our newsletter below and each quarter, we’ll send you the good stuff with no fluff.