Who’s knocking on my digital door?

Redesigning the locked room experience of appear.in, or how design is a good way to discover that you’re an idiot.

Click a room link, and boom, you’re having a video conversation. That’s the beauty of appear.in. Users love the simplicity, and usually don’t even bother to sign up. Which kinda sucks for us, but that’s another story that we’ll probably get into in a different medium post.

Why we’re awesome: just send a link to anyone and boom, you’re having a video conversation.

Anyway, simple links are great if you don’t mind anyone being able to enter your room at any time. Like living in a really safe neighbourhood with no need to lock your door, because everybody knows everybody.

Some users though, prefer to lock their doors. Especially those who’re having more or less important meetings, and don’t want to be disturbed by random strangers joining the conversation.

Imagine this scenario:

You’re interviewing for a job over appear.in and suddenly the next subject arrives early and joins the meeting. You discover that this person is your best friend who is also competing for this job, although he or she promised she wouldn’t apply. Now your friendship is ruined forever because there’s no trust left! (and what is a friendship without trust? Nothing, that’s what.)

The company you interviewed for got embarrassed by the whole thing, and now they’re sending us angry emails. You didn’t get the job 😞

Peepholes are nice to have, both in the real world and in digital video chat tools. Photo by @ratushny.

Keys open doors 🔑 (but they also lock them)

This is why, in april 2014, we introduced the option to lock your room. Like in a real room or office, guests could knock on your (room) door to request access. A digital peephole was also included, to make it easy to learn if the person on the other side was friend or foe.

How the original knock feature worked. Knock page presented to visitors (left) and the modal displayed when someone knocks inside the room (right)

This prevented strangers from entering rooms they weren’t supposed to, and room owners enjoyed being able to screen visitors before letting them into locked rooms. Still, most users kept their rooms open, valuing the simplicity of joining the conversation more than the privacy of closed rooms (or for different reasons, I’m just speculating here).

So that was it then?

For a long while it was, as we went on to work on other issues and features. But, digital products are never done. (I used to work at a newspaper, and every day that newspaper was done, it got printed, and I went home. The internet though, is never done, and that’s both the gift and the curse.)

Nice options, but what if I want to let the person in, just not right now?

We got feedback from users about things like:

  • When someone knocked on your room, the modal took over the entire screen in a very distracting way. Plus, everyone could see who was knocking. Not cool for scenarios like job interviews.
  • There were only two reply options: Let in or reject. (Imagine if your only option if someone knocks on your office door is to let them in or lock them out forever.)
  • The knock page in itself was not really welcoming. (Imagine if your office door had a note on it saying “This office is locked” Not gonna win any tone of voice awards with that microcopy)

The joy of solving problems

Soon after joining appear.in, I was assigned to improve the locked rooms based on the user feedback. And being a designer, I’m all about solving problems. (I´ve considered changing my title from designer to “problem solver” on LinkedIn but then decided against it because wait a minute I’m not an douchebag and I don’t want to make a living speaking on conferences 24/7)

The problems mentioned above were well defined by research and user feedback, which meant that the hard part was done, because once you’ve defined a problem properly it’s usually not that hard to come up with a solution for said problem.

So I opened Sketch and went at it, eager to impress my new colleagues with my amazing design thinking problem solving brain.

Pro tip for when you’re the new guy/girl at a company.

Yelling through digital doors

The most obvious problem was the way we forced users to either accept or reject knocking guests before the modal could go away. To avoid having to reject people if they knocked too early, we decided to introduce a digital equivalent of yelling “hold on, I’ll be there in five minutes” through the door.

The user inside the locked room got a third option: “put on hold”.

Also, the modal taking over the screen was a bit intrusive, so replacing this with a subtler notification was probably a good idea. “See who” would trigger the big modal, revealing who was knocking through the video peephole.

Less intrusive knock modal, with the new option to put on hold. (Also, me talking to random girl from the Craft/Unsplash plugin in Sketch. Get it, it’s great)

This would give users more ways to handle knocking guests. If you’re expecting someone at a specific time, you could just assume it’s the right person and let them in without even checking who they are. If you’re the careful type, you can first see who it is, and then decide.

If you’re busy talking to another person, just put the knocking guest on hold while you finish your conversation.

Peephole modal after clicking “See who”. New put on hold option, plus reject and ignore.

What about the other side of the wall?

On the outside, we redesigned the layout in a skeleton page style, re-using the in room layout to make it feel like you were further into the real product (Facebook and Slack does that so it must be good idea right?)

We simplified the copy and added the room name on top to ensure that users knew where they were. And why not have the button say “I’m ready to enter” instead of knock? Way friendlier, and friendly microcopy is what all the cool people are talking about so let’s go for it!

Me looking at myself in the updated knock page, new and shiny. Way nicer right?

So that was it, problem solved, maybe I’ll go on linkedIn and change that title after all? Let’s celebrate our geniuses and go home!

That was what I though until we usability tested the knock page and discovered a few issues:

  • It was not obvious to first time visiting users that the room was actually locked. What was actually happening on this page?
  • The button saying “I’m ready to enter” indicated that you could just press it to enter immediately, which was very misleading.
  • Being told to wait after pressing the button caused users to believe that the computer had froze. Like when knocking on a door and not getting an answer, test users just assumed no one was home (or are they ignoring you because they hate you. That’s even worse.)

The idiot moment

With this in mind, I opened the browser and entered a locked room the way it currently worked. And this was the moment, all too familiar, where I realised that I, Mikael, is actually an idiot.

Old knock page (left) vs new knock page (right) The idiot in question visible in both sketches.

Why? Because I’d actually made the knock page worse! Like I was tasked with fixing a house, worked on it for days, just to realise that I’d actually been breaking the windows and making a big hole in the roof.

Even if the old knock page lacked friendliness and better feedback, it did one thing really well, and that was making it very obvious that you are not in the room, you’re outside and you have to knock to get in. Which, arguably, is pretty important.

Fancy thoughts about a “more inside the room” skeleton page made no sense here, because why on earth would we want users to believe they’re already in the room? The whole point of this page is that you’re not! You’re on the outside, and need to request access to get in.

In addition, “I’m ready to enter” is such a misleading call to action that at this point I was considering never writing a word of microcopy again in my entire life.

This is what an idiot looks like when he realises he’s an idiot.

Luckily I downplayed how much of an idiot I was to the others on the team, and wasn’t fired. (It’s impossible to fire people Norway anyway, hello social democracy ❤️)

Back to the drawing board (or Sketch as it’s called)

And that thing about the internet never being done? That’s a good thing, because iterations. So I went back to the drawing board and…

  • Killed the use of the in room layout, and went for the good old mobile on desktop approach (We all know columns suck because they give you the ability to put important stuff just as far up on the page as less important stuff. And you know what’s usually a good idea? Placing the most important stuff at the top.)
  • Switched copy on the button back to “knock”.
  • Changed the behaviour of the knock button to give users feedback once you’ve been put on hold.
  • Moved the information about your video being displayed to the people inside on top of the actual video frame, to make it impossible to miss.
  • Added a help text to make it obvious that this room is locked and what you need to do to get in at the bottom.
New and improved knock page. One column, obvious difference from the room layout. Also, text about video being sent on the actual video, making it harder to miss.

Confident that this was better we usability tested it again and it worked a lot better! Users understood what was happening now. We also sent a simple prototype to some users who had requested these changes in the first place, and they liked it.

Enough stupidity and sketching, let’s implement

Hector went and implemented this, and of course discovered a lot of edge cases that I hadn’t thought about. What if two people knock at the same time? What if you ignore more people knocking but want to go through them again, what order should they come up in?

I tried my best to make up excuses for why I hadn’t thought about this.

There’s also this whole story about the hacky .svg spinner animation I made, which ruined performance. Hector fixed that too.

And so, the new knock features went live on september 5th 2016. We made it! 🎉

So… did it work?

After a pretty thorough process of sketching, low-fi prototypes, usability testing, iterations, last time decisions about edge cases and development the big question remained. Did we make a difference for our users?

The number of people rejected when knocking declined from the day we launched the put on hold option.

After the feature has been live for about a month we’ve learned:

  • The less intrusive modal was a good idea. 50% of users knocking are let in immediately, without the room owner bothering to check who it is.
  • But, users prefer to see who it is before putting people on hold. Only 3% are put on hold from the small modal, compared to 17.3% when from the big “see who” modal.
  • We saw an instant drop in rejects the first day the feature was launched, and a corresponding increase in “put on hold” events. That means every day users who arrive early to a meeting are put on hold instead of rejected. Arguably a much better experience for both them and the person telling them to wait.

So, despite discovering that I’m an idiot in the process, using appear.in for private meetings is now a better experience for both the host and his or her guest. Success! (I guess)

What’s next?

Probably working on some completely different feature to be honest. But we have ideas on how to improve locked rooms even more. Sending messages to those who are knocking is something we know users want. Time will tell!

And no doubt, there will be plenty of opportunities for me to discover that I’m an idiot in the future. But as long as it makes the product better, I can live with that.

Wanna try the beautiful new knock page? 
You’re welcome to knock on my (locked) room appear.in/mikael-floysand at any time. Who knows, maybe I’ll even let you in.

Want your own room to lock people out from?
Create your own room at appear.in. You’ll be having meetings from wherever in no time, with the freedom of locking your door when you feel like it.