A close look at how we develop features at 37signals. Designer Michelle Harjani walks Shaun through the entire process of making the Bubble Up Feature in HEY.
- 00:42 - Michelle Harjani (Twitter)
- 00:59 - Bubble Up
- 01:28 - Six-week cycles (Shape Up)
- 01:38 - Set Aside
- 02:56 - Team and project sizes (Shape Up)
- 03:26 - Cool-down (Shape Up)
- 05:04 - Fat marker sketches (Shape Up)
- 05:32 - The Betting Table (Shape Up)
The Full Transcript
Shaun Hildner (00:01): Welcome to a special bonus episode of Rework. I hope y’all are having a good summer. If all is going to plan, I am on a beach somewhere and not checking my phone, but I thought I’d toss something in the feed while we’re on this short break.
Shaun Hildner (00:14): This is a conversation I had with my colleague, Michelle Harjani about the Bubble Up feature in HEY, which is basically a way to hide emails and then have them pop back up in your inbox when they’re more relevant. If you’ve ever wanted a closer look at how we design features here at 37signals, I think you’ll really dig our conversation, and I hope to do more bonuses like this in the future. So enjoy.
Shaun Hildner (00:38): Michelle, do you want to quickly introduce yourself?
Speaker 2 (00:41): Hi, I’m Michelle. I’m a senior product designer at 37signals, and I work on HEY.
Shaun Hildner (00:46): Well, fantastic. And this week, we’re going to do a loosey goosey conversation, a deep dive into a brand new feature called Bubble Up, which you worked on. Is that right?
Speaker 2 (00:56): Yes.
Shaun Hildner (00:57): So to start off, do you want to tell me how the pitch process goes? Does Jason come to you with this idea? How does that work?
Speaker 2 (01:05): That’s an interesting question. So Jason, along with a few members of our product leadership team, they get together and have a series of pitches and amongst themselves decide which projects we get to work on the following cycle. So for cycle two this year, Bubble Up was one of our features for HEY. So it started with this idea that HEY is missing a snooze feature. I know set aside is similar to that, but it’s not quite right, where you have something that you want to reference out of sight until a certain time, but then it’s on you to go back to it.
Speaker 2 (01:45): And I think the difference with Bubble Up is that it comes back to you. So it’ll just pop in your inbox exactly when you want it to be. And this would be great for when you have travel reservations. I have a flight on Friday, and so Friday morning the email will just appear at the top of my inbox and the boarding pass reservations. With set aside, things just over time get collected in there and you have to go searching for it. Personally, when I use set aside, I mark things as set aside, but I just never go back to them. So with Bubble Up. I don’t have to go back to them. It comes back to me.
Shaun Hildner (02:20): Yeah. Yeah. I was doing the same thing. I would use set aside for concert tickets and things like that, and just my set aside list is enormous. Oh, well.
Speaker 2 (02:29): We have some ideas on how to improve set aside, but before we get to that, we’re like let’s introduce Bubble Up.
Shaun Hildner (02:36): Oh, okay. Listeners stay tuned for a later bonus episode about how we fix set aside. Well, fantastic. Okay. So this team brings the idea to the HEY team. And how big is your group? Are you just one designer and one developer or is it two and one?
Speaker 2 (02:53): For Bubble Up, it’s one designer, one developer. So I work with Kevin on the web team, and actually on this cycle, I worked on the mobile side, too. So I work with Jirka and Dennis on Android and IOS.
Shaun Hildner (03:04): Oh, wow.
Speaker 2 (03:06): It was fun.
Shaun Hildner (03:07): This is busy. Yeah.
Speaker 2 (03:08): I got to work for cross platforms. When we started, Bubble Up had a four-week appetite on web. So our cycles are six weeks long. So the first four weeks were focused on web, and then I would transition over to working on mobile and then we launched during the cool down-
Shaun Hildner (03:22): Gotcha. Okay.
Speaker 2 (03:22): … which is two weeks after the six weeks cycle.
Shaun Hildner (03:28): Yeah, yeah. Okay. Gotcha. Cool. So did mobile take a little bit longer than the allotted two weeks?
Speaker 2 (03:33): Not really. I think we just wanted to make sure we get it right before we launched. We shipped internally to our team the first week of the cool down and fixed any remaining bugs, introduced enhancements. And then we shipped to customers on the second week of the cool down when we knew that this is going right. But we also had summer hours. So with less-
Shaun Hildner (03:55): Our weeks are a little shorter. Right.
Speaker 2 (03:56): Our weeks are much shorter.
Shaun Hildner (03:58): And I’m assuming you were traveling during this time as well, right?
Speaker 2 (04:01): No.
Shaun Hildner (04:01): This is a constant state.
Speaker 2 (04:03): I was in Vancouver the whole time.
Shaun Hildner (04:06): Really? Okay.
Speaker 2 (04:07): Until the last week of the cool down, I’m like I decided to travel to Amsterdam and visit my sister. So when we launched this, I was at the airport.
Shaun Hildner (04:20): Oh, that’s exciting.
Speaker 2 (04:21): It was perfect, because as the feature launched, again, the example of the travel reservation, this was an airline I took that did not have a boarding pass in Apple Wallet. I was able to Bubble Up my boarding pass and use it. It just launched and shipped and it was perfect.
Shaun Hildner (04:39): Oh, thank goodness. Thank goodness. Okay. We’ll get to launch in a little bit. So what sort of materials are you given from the pitch? I’ve talked to Jason a lot about these giant messy sketches he makes. Is it more formed than that? Is there HTML that you can look at?
Speaker 2 (04:58): So he defines the problem and the core elements of a solution and would include fat marker sketches. We have the answer to where does this fit? How do you get to it? What are the key components and interactions, and where does it go? It isn’t specific. It isn’t concrete. It’s somewhere in the middle. There’s a lot of space that we get to decide later on what we want it to look like and how it works. And I think for Bubble Up there was even like a shaped doc that we start with, which is initial pitch that Jason uses for the [inaudible 00:05:30] table, which later on becomes our kickoff document to the team on what is Bubble Up and what are we going to be working on? There was some specific ones, like we know where we want to access Bubble Up from the HEY menu, your Bubble Up.
Speaker 2 (05:45): But then there were some other points he made, like we don’t know the exact location of this UI. It’s TBD. We don’t know where we would access Bubble Up. We know that we can access the page, but how do you Bubble Up an email? And there were a few ideas. He didn’t include that in the shape doc. What happened actually on the first week of the project was we met as a design team. We have a weekly call every Tuesday and we get together and we get to [inaudible 00:06:11] ideas.
Speaker 2 (06:11): So during that first week we talked about everyone had spitball ideas. Where could you start to Bubble Up an email? What is this? And the whole design team started just we really riffed and came up with some good ideas, like what options make sense? Tomorrow if I want to Bubble Up this email and see it later today, tomorrow, next week, next weekend, there were so many options and eventually dialed it down. But during that riff, I pitched this idea of surprise me.
Shaun Hildner (06:41): Yeah. Surprise me is fun. Right? That’s awesome.
Speaker 2 (06:44): Right then and there, they’re like, “Yes, this is fun and quirky and exactly what HEY is like. So let’s include that.”
Shaun Hildner (06:52): So explain what happens when you Bubble Up an email. You have some options, right?
Speaker 2 (06:57): Yes. So when you Bubble Up an email, a popup menu appears with a few options. When do you want this to float back up to your inbox? And we have preset times, like later today, which would be at 6:00 PM, tomorrow 8:00 AM, this weekend, which is Saturday 8:00 AM, next week, Monday 8:00 AM, and a surprise me option as well as a pick a date. So you get to decide when. We open a date picker. And from there, the email just moves into what we call Will Bubble Up. It’s a separate screen accessible from HEY, your Bubble Up, but it’s out of sight.
Speaker 2 (07:33): And then at the scheduled time, let’s say we did it later today, 6:00 PM, then at 6:00 PM today, it will go back to your inbox in a new section called Bubbled Up. So it’s right there in your face and it stays there until you pop it. We really wanted to go all in on this bubble theme. So there are bubble icons. We use copy like float, and we have pop as an action, and it animates, too, if you’re on the web.
Shaun Hildner (08:01): As I understand it, Pop came a little bit later, right? That was-
Speaker 2 (08:04): It did.
Shaun Hildner (08:06): … an idea that was born out of, well, I don’t know, should this email disappear?
Speaker 2 (08:10): Yes.
Shaun Hildner (08:11): Can you explain running into that problem?
Speaker 2 (08:13): This was a four-week project on web, and at the end of our second week, I had a mid cycle check-in with Jason and I proposed there are two ways of how we could dismiss an email. So when we Bubble Up an email and it gets into the queue, the idea for Pop already existed for the emails that lived in the Will Bubble Up screen. So that part, the Pop idea was there. But then with a scheduled time, it goes to the inbox. How should that behave? Should we pop it as well and match Will Bubble Up or should an email match New For You’s behavior, where once you open the email, you’ve read it, it automatically goes into the previously seen section.
Speaker 2 (08:55): There were two ideas, and we didn’t want to make the call right away on which way to go. Because that was the call. I pitched, I was like, “Look at all these bubbles. What do you think?” And he was like, “Wow, you really went all in on this theme,” and he loved it. So it’s like he liked the idea of Pop, but it was an interesting idea, different from the original pitch. So he is like, “Let’s think about it and sleep on it.”
Speaker 2 (09:21): And then, as I wrote it up, I wrote up a walkthrough of here’s our current flow and our proposed interactions, and sleep on it, and then the next day came back with fresh perspective and we’re like, “Yes, let’s do that. Let’s go and Pop.” And that was week two. So week three, we’re like, okay, we know we want to pop now. How can we improve the interaction? And then that’s when we started playing more with UI and then later on introducing animation, experimenting with sound, which didn’t make the cut to what shipped, but we experimented. It was fun.
Shaun Hildner (09:56): Oh, well. I mean, I need an example. This is an audio medium. So what kind of sounds were pitched here?
Speaker 2 (10:02): I looked at a lot of different libraries and then I realized I don’t want to deal with the licensing and subscriptions. So I recorded something in a garage band and edited. It’s a one-second clip, and it just I think it would be really cool to introduce this. We have the clip already. We just need to implement it. We don’t have sound yet on HEY, so this would’ve been an entirely new thing to start including audio.
Shaun Hildner (10:29): Well, Michelle, obviously, can you send that file to me?
Speaker 2 (10:32): I will.
Shaun Hildner (10:32): Thank you.
Speaker 2 (10:35): It was a one take recording, and after I was like, “Okay. It worked.” I’ll send it to you. It was a one take pop and [inaudible 00:10:43].
Shaun Hildner (10:43): That’s all you need. I actually experimented with this a little bit. Was it in Basecamp? This is years and years ago. I bought a bunch of carabiners and things. I was thinking alert sounds could be ropes going through climbing equipment and stuff like that. It was really fun. I was just like, “Ooh, maybe I do want to get into Foley work now.” Can you think of any other design challenges that popped up during the development of Bubble Up? Roadblocks you ran into? Anything that maybe you didn’t expect to pop up?
Speaker 2 (11:17): There was a interesting idea. I call it a puzzle at the 11th hour. We were in week six, so a web’s already been finalized. Mobile team is working on the final tweaks and we’re ready, ready to ship this. And then we just thought about what happens when you have an email that’s Bubbled Up and you reply to it? Are you done? Meaning it should move back into previously seen? Or do you need to explicitly pop it? And it’s interesting, because it’s pinned, but do we want to keep it pinned until you’re done with it? Or do we just assume you’ve replied to it instead of you having that extra option? I call it the puzzle at the 11th hour. We decided that the safer option was to keep it in Bubbled Up and you get the joy of seeing it pop then.
Shaun Hildner (12:19): When you click Pop, right?
Speaker 2 (12:23): Yes, when you click pop, rather than assume that you’re done with it and it just drops down to previously seen.
Shaun Hildner (12:27): How much more work would it have been to change the behavior? Was part of this decision like, I mean, we can just launch like this, right?
Speaker 2 (12:35): So we could launch with what we have and then change it. It would be harder to change it and then roll back and say, actually, this is not how it works.
Shaun Hildner (12:44): Right, right.
Speaker 2 (12:44): So yeah, we went with the safer option for this.
Shaun Hildner (12:48): Absolutely. That is a theme at 37signals.
Speaker 2 (12:52): Yes. Even just yesterday on our web campfire, one of our programmers ran into this and was like, “Wait a minute. Why didn’t it pop for me? I expected it to.” And we’re like, “Yes. We know we would be right 50% of the time.” And so-
Shaun Hildner (13:07): I saw Jason post this was 50/50 decision anyway.
Speaker 2 (13:11): So that’s the puzzle at the 11th hour.
Shaun Hildner (13:14): Oh, that’s always fun. So when something like that does crop up, when you say we decided, what does that meeting look like? What do these design meetings look like?
Speaker 2 (13:22): It was not a meeting. It was all in campfire. Jason had this question and I responded to it, and other mobile programmers responded to it. And I think we just knew that either option would have worked and we would’ve been okay with it, but let’s go with a safer option to start and then we can change it later.
Shaun Hildner (13:43): It’s funny to think that the focus group, the testers, are just the people in Basecamp. We don’t have any soft releases to 30% of customers or something. That’s really interesting that the feedback you get is directly in the campfire from Jason or something.
Speaker 2 (14:00): Yes. Yes. We had this feature working in beta in around week four, five, so we could already start testing it. And then when we launched to, well, ourselves on the first week of the cool down, it was also just to make sure that mobile would be okay now it’s in production, but no one can see unless you’re our team. And it’s like a softer launch. And then when we rolled out, it was less pressure because we’ve already been using it for a while and we know the quirks. And it’s interesting. We all use emails differently. That little puzzle at the 11th hour. I didn’t come up with that. I didn’t run into that, because I hardly ever reply to emails.
Shaun Hildner (14:36): Michelle.
Speaker 2 (14:38): To me, they’re all … No, no, no. Meaning all my emails are travel reservations and hotel bookings, and I don’t reply to those.
Shaun Hildner (14:46): they’re not from people.
Speaker 2 (14:47): they’re not from people. they’re from automated software.
Shaun Hildner (14:50): Yeah, yeah. Yeah.
Speaker 2 (14:51): So when Jason runs into this and he’s like, “You have to reply,” and then I think Ollie ran into it as well, I’m like, “That’s right. People do use …” We have reply later. You could use it as Bubble Up and it’s there in your face and you reply to it and then you move it. But I didn’t run into that. I tested so much because I don’t reply to automated emails.
Shaun Hildner (15:18): Oh, that’s so funny. That’s so funny. Okay. Well, now Bubble Up is out in the world. I mean, have you gotten any feedback from customers? I’m sure we must have heard some things. Right?
Speaker 2 (15:26): We got so much feedback. It was amazing. So actually when we ship a feature, the designer working on it would then monitor the feedback we get in help scout. So anyone replying to support and Twitter as well to see what questions are getting asked, what are the top requests. I monitored that for about a week, and then I waited a few weeks after launch and I reviewed again. Has anything changed now that it’s been out a few weeks, people have been using it more? There was so much love for this.
Shaun Hildner (15:57): Oh, that’s great. That’s great.
Speaker 2 (15:57): And it was just really, really cool to see when, actually, as part of the kickoff doc Jason shared, he wrote in the last line was, “We expect this to be a fan favorite,” and just to see all the responses.
Speaker 2 (16:11): So I think the day after Bubble Up launched, I worked on this doc I called top request and lots of love, and it was the top two requests we’d been hearing for customers. One of them we knew would be a top request, was custom timing, and we had that as a separate scope as a separate enhancement. We’re like after launch, this could be something we could come back to. Notifications is something we also want to include. Like if an email’s bubbled up, to be able to get a push notification for it would’ve been cool to add. And that’s something, again, we would like to add as an enhancement.
Speaker 2 (16:43): And then there’s another one which I will leave out today, because I know it’s something that is getting pitched shortly and I would like to surprise and delight-
Shaun Hildner (16:55): Oh, fantastic.
Speaker 2 (16:55): … and not a spoil it too early. But I think it’s cool that one of the top requests for that is something Jason’s already working on. He’s like, “Yeah, we had this on the drawing board and now we want to come back to it.”
Shaun Hildner (17:06): Well, I think that’s great. Michelle, thank you so much for coming on. And whatever you’re working on next, we’ll have you on again as soon as it’s out there in public.
Speaker 2 (17:18): Okay. Thank you, Shaun.
Shaun Hildner (17:19): Absolutely. Take care.
Speaker 2 (17:23): You, too. Bye.
Shaun Hildner (17:23): Thank you for listening. If you found this deep dive into feature development interesting, let me know on Twitter at Rework Podcast. The proper Rework episodes will be back in September, and I’ll see you then.