[image error]

Two weeks ago we released HEY into the world, the culmination of 2+ years of explorations and intensely focused work.

It goes without saying, but I’ll say it anyway: inventing a new product from scratch is one hell of a challenge. It’s the toughest thing you’ll ever do as a product team. There are a million reasons why it won’t work, and zero guarantees that it will, so the whole project is a massive gamble. You just have buckle up and trust that you’ll figure things out.

Since HEY made a big splash on arrival, I thought it’d be fun to share the backstory of how we ended up reinventing email. Because we certainly didn’t start by wanting to reinvent email. (That sounds hard and intractable!)

For the past several years, even pre-dating the work on HEY, we noticed some ongoing communications problems at our company. They all revolved around external email: things like going back and forth with lawyers, working with benefits providers, dealing with press outlets, accountants, and stuff like that.

It was too hard to keep the right people in the loop, because we’d have lots of email threads scattered around with different participants, and none of them had the complete story. It was too hard to get caught up on a project that someone else was working on with a vendor. And too hard to hand work off when someone went on vacation or parental leave. At best, you’d end up with a steaming hot pile of forwarded emails, and it was all a chaotic mess.

This was in total contrast to our well-tended internal communications, which all lives tidily in Basecamp (the app), and suffers none of those problems. But Basecamp is mainly a company tool, and it’s not so reasonable to ask our miscellaneous vendors to join Basecamp just to communicate with us. So what’s the equivalent of Basecamp for the outside world?

Well, it didn’t exist! So we began thinking about how we might solve these problems with a new product.

At first, we were considering making a successor to our older CRM product, Highrise. Highrise was our first take on the external communications world, but it doesn’t do nearly enough to cover all the scenarios we wanted to solve.

And thus, HEY started its life as a prototype for a possible Highrise 2. It was originally focused around work problems—not personal email problems.

In May of 2018, Jason and I kicked off the first work on a prototype, built in Jekyll, which was code-named Haystack. We were intent on addressing real-life situations right away, so I asked our Head of People Ops, Andrea, to find the gnarliest vendor email threads she’d been involved with recently. She forwarded all the emails to me, along with any internal chats she had about those emails. Using that source material, I painstakingly reconstructed all the conversations into seed data for our prototype. That way we’d have some real stuff to judge our ideas against.

We started by designing how these internal/external threads might look and work, then gradually worked our way out to the Inbox view, and finally filled in various supplemental ideas around the edges. We focused specifically on email pain points, and discarded any notion of how email “usually works” in favor of the way we would ideally want it to work, while also considering what we could realistically foresee building.

After a few months of prototyping, it looked like this.

[image error]Thread view[image error]Thread with comments[image error]Early Inbox[image error]Early Screener (nee Bouncer)[image error]All Files view[image error]Contact page conceptPre-production Haystack Prototype

Having explored lots of different examples and core ideas (including the nascent version of The Screener, the All Files view, and contact pages), we felt like we had something promising.

None of it really worked, there were still a million unknowns, and loads of features we hadn’t figured out yet, but there was one thing we were sure about—it had evolved far beyond just a better Highrise. If we were going to build it, it needed to become a complete email service. And if it was going to be an email service, it needed to have a personal version, of course!

Phase 2: Building it

By early 2019 we started the process of making HEY real. At first we used the prototype’s general skeleton as a foundation to start wiring things up, but we continued to hone the app’s visual design. Our brilliant marketing designer Adam joined up, and he helped us shed all the experimental cruft from the original design, paring things back and making the whole thing more minimal.

Adam also developed the original color palettes and menu gradients that became iconic—those bright pops of color are sprinkled throughout and give the app a lot of friendly personality without being too overwhelming.

[image error]Refreshed Thread[image error]Early Stacks concept (this became Labels)[image error]Stripped down Inbox
[image error]Menu styles[image error]Early menu color theme[image error]Basic Screener2019-era Haystack: A mix of styles, ideas, experiments, and skeletal minimalism

Phase 3: Tightening up, adding features, and doing all the hard work

Designing with a team where everyone has autonomy is a bit like playing in a band. Someone seeds an idea, and then someone else builds on it and takes it somewhere else, then those changes get promoted into little systems, and over time the best ideas persist through all the changes. Harmonies prevail.

You can see that taking place in the screenshots above, but it really picked up steam from mid-2019 on, when the whole the company started working in earnest. For a while there was a lot of tug-of-war design and development between the web and mobile teams, where all of us bent and stretched the system for what we needed on our respective platforms. Since HEY is a hybrid web app, we ended up building a ton of new tech to optimize for UI patterns that would work equally well on a phone or a laptop (we’ll be sharing a lot more about that soon.) Conor led the way on a lot of those efforts.

By early 2020 we had worked out most of the fundamentals. We had Reply Later and Set Aside, and we had The Feed, which at that time was called “Slowbox”.

[image error]The Feed, formerly known as Slowbox[image error]Imbox trays (before they stacked up)[image error]Early iOS app designUnrefined fundamentals

From then on, the remaining work was a recurring cycle of polishing what we already had, and using the product ourselves to figure out what was still missing. For example, in January I noticed I was having trouble filing the gobs of junky capitalism emails I constantly receive, so I pitched the idea of a special place just for that, and the Paper Trail was born.

[image error]Pitch for the Paper Trail (originally Baconbox