Part 1:

Impressions

I love sending funny videos to my fiancée. We both love animals and every time I find a funny video or the latest in elephant lifestyle I send it to her using our messaging app of choice. She typically replies with an “aww” or “hahaha.” But that feels a bit forced and much more sterile than it would if she were next to me. That’s when it his us. What if you could see someone’s reaction to your message in real time?

Imagine a comedian trying out a joke on a friend by sending a short video and seeing what resonates as she tells it.

The obvious limitation here is is that it’s hard to get everyone together at the same time — even if it’s online. But what if you didn’t have to? What if you could experience someone’s first impression to a message you sent asynchronously.

Asynchronously, but in real time.

So, I quickly grabbed a pen and a piece of paper and started sketching an app that would let us do just that. The basic idea behind the app was that users could receive a message from their friend and it would automatically record their reaction as they watched it. We decided to call it Impressions.

Version 0.1

In the beginning, I tried to avoid decisions like color scheme and branding to focus entirely on the interactions and user flow behind the app. The nice coat of paint could be applied at the end.

The app included an inbox, multiple media types (videos, photos, and links), and a hamburger menu in the top left that would serve as a drop bag for any extra stuff that I might think of later on.

Prototyping

Using Keynote, I quickly prototyped a few interactions for the app. I started with the “Sign Up” interactions. At the time, I thought this could be an opportunity to create something rather “novel”.

Admittedly, this was way too early in the process to focus on these details, and it actually became a distraction — it created extra engineering work for an unproven concept. I later decided to skip this step altogether and replace it with a Facebook Login button to simplify the process even further.

UI Kits

Putting all the UI elements in a single asset sheet helped me determine whether the visual language was cohesive across the app.

UI Kit for Impressions v0.1

Though this paved the way for some shiny Dribbble shots, it didn’t actually get us any closer to shipping this idea to real people. Instead, I focused on implementation details that I inevitably had to revisit as the idea evolved in later iterations.

Version 0.2

Simplifying

After spending a few days with the first version of the app, I realized that it had a lot of unnecessary complexity that detracted from the core desired functionality: send videos and get real time reactions from your friends.

The ability to send photos and links in the first version was not core for the proof of concept. I decided to bring production to the foreground and make the top half of the screen a live, front-facing camera with big red button below to quickly capture a moment and share it with your friends.

User flow for Impressions v0.2

In this version I also started playing with a darker visual style. The idea was to keep the design as minimal and out-of-the-way as possible. However, we found that the dark UI gave the app a somber and serious tone that was not conducive of the type of interactions we wanted to facilitate with the app. Walter White probably didn’t help either.

User flow for recording an impression and sending it to a friend

Prototyping

So I dove back into Keynote and its infinitely handy Magic Move transitions. I mocked up what the interactions for the bottom pane could look like. This included recording a video, searching for friends, and selecting video recipients.

As smartphones continue to grow in size, I wanted to keep most interactions in the bottom panel to make them easily accessible for your thumb and free up the top to be exclusively dedicated to showcasing your content.

This puts the camera front and center (pun intended) and places content production at the forefront when using the app.

There were a few things I was interested in exploring here: bottom panel UI, keeping all main actions in the bottom of the screen, and a few other quirky ideas I didn’t get to test out in my day job. However, these ideas quickly piled up into a nice scope-creep buffet. Unfortunately, the developer I was working with at the time got busy with life and couldn’t dedicate enough time to finish the app.

Missing an engineer counterpart made me lose a ton of momentum. Suddenly, I wasn’t making an app on the side. I was just making mocks. So, I decided to put the project on hiatus and focus on my day job.


Fast forward to March 2015, when I found myself a year older and in London with quite a bit of free time on my hands. So, I decided to dust off the ol’ Impressions Dropbox folder and give it a go one more time.

Asking for help

In the past year I have learned enough about prototyping to be dangerous, but not quite enough to build an app. So, I put out a call for someone who might be silly enough to spend their nights and weekends working on a side project for no money at all:

A wild DEVELOPER appeared! Lucky for me, a friend of a follower, Kyle Ryan, decided to take on the challenge!

I quickly jumped on my laptop and reached out to him to talk details.

Version 0.3

Cool, now that we have a developer on board, let’s dive back into the design and see how much we can trim out to avoid falling into the same trap as I did before.

Explorations

One of the things I really loved about the previous design was the split screen UI — I tried exploring that while stripping the app from features it might not need. For example, turns out searching for friends is not necessary for your first version. If finding friends becomes troublesome, that means that a lot of your friends are using the app and you enjoy sending messages to them — that is a nice problem to have and one that would be great to address in version 1.1.

Explorations for the capture and share flow for Impressions v0.3

Many questions came out of these explorations: Should we allow one-to-many communication? What does the consumption experience look and feel like? How do you send a video?

Naturally, putting static mocks in motion will help clarify some questions.

More Prototypes

Using Origami, I was able to prototype the entire flow for version 0.3 of the app.

This version used the bottom pane to record a video, grab a video from your library, and flip the camera. After recording a video, it would loop until you chose a recipient from the bottom pane and pressed the “send” button.

Having never met each other in the past, Kyle and I were just starting to learn how to work together. We set up a collaborative task list using Wunderlist and used it to keep track of all the open questions.

Prototyping interactions and UX flows became very useful to help illustrate the more playful and unconventional ideas. I used LICEcap for making GIF screencasts of the Origami compositions and quickly shared them with Kyle using Messenger.

Pro tip: hold ctrl while taking screenshot (⌘ + shift + 4) and it will be copied to your clipboard. You can then paste that into Messenger by pressing ⌘ + V on the message input field. Fastest way to share work with someone :)

However, something about this design felt a little off. In actuality, most people would not have a full list of friends who use the app. If we’re lucky, only a handful of our user’s friends would download and use the app, which would make for a pretty sad grid — not entirely the designer’s dream 😬.

Version 0.4

Finessing the Bottom Pane

For the first version of the app, we assumed that virtually nobody would use it. Therefore, a design that optimizes for having dozens of friends is not quite realistic.

So, we scoped down the app to 3 simple interactions:

  1. Tap and hold on a blurred (incoming) video to view it. Your reaction will be recorded as you view it and sent automatically when you let go of your finger.
  2. Swipe horizontally to browse friends/videos.
  3. Tapping and hold anywhere in the bottom pane to start recording a video. Letting go of your finger would send that video automatically to your friend.

The Best UI is No UI

We decided to remove all buttons from the bottom pane and fill it with your friends’ profile pictures, combine your inbox with your friend list, and make the consumption experience nearly identical to the production experience.

This centers the app around two simple things: you (top pane) and your friend (bottom pane). We hope this would make people comfortable sharing raw, unedited reactions back and forth with their friends and leave room for some genuine first impressions to your content.

Keeping the chrome out of the way allowed us to keep the app very lightweight and not add any unnecessary steps to the UX flow. It also made user interactions feel very ephemeral and unedited — a feeling we wanted to explore by capturing people’s real time reactions.

Where we are now

Peek is currently in development and should be coming out very soon (feel free to nag Kyle so he can hurry up and finish it! 😉) We’re putting the final touches on the app and can’t wait for you to play with it! In the meantime, sign up for our mailing list and we’ll let you know as soon as it comes out.

Designing and iterating on an app transcontinentally with a stranger on your free nights and weekends for no money can be hard… but it can actually turn out to be a lot of fun! We have a plethora of tools available to translate an (perhaps stupid) idea and bring it to reality. So, why not try and see how far you can get that app idea you have percolating in your head? You never know, you might actually enjoy the process!

Feel free to reach out to me on Twitter and let me know if you enjoyed this post and would like to know more about the making of Peek.


Coming up: Sound design, branding, and marketing Peek…
Show your support

Clapping shows how much you appreciated Gabriel Valdivia’s story.