Impulse

 

 

Impulse is the fastest way to get feedback from the greatest amount of people. Post your question, opinion, or thoughts anonymously and Impulse will poll 100 strangers, getting you an answer. Impulse is great for style questions, testing jokes, getting feedback on designs, winning arguments with friends, and so much more. We're seen answers come back in as little as 10 minutes and, with more users, we're confident we can bring that time down to under 10 seconds

 

Making the Animation

Communicating the animation to Matt, cofounder and lead engineer for Impulse, was initially very difficult. I decided I needed to blow some dust off of my technical brain and work on building the animation in HTML and CSS for him to visualize. For something on this scale, it probably wasn't critical to use SASS, but I decided to use it anyway, in case I decided to change out values later in the project.

I also used the SVG values of the shapes, rather than images, in the spirit of maintaining customizability. Again, it might have been easier to just import the images for each of the values, but if I wanted to change the color or size, this is just far more flexible.

Looking at the SASS, you can see that they each referenced the same animation variables, but were set to move at slightly different speeds. These numbers were selected using the Fibonacci sequence (1, 2, 3, 5, 8, 13...) in hopes that the animation would be so varied as to never create the exact same sequence within a single viewing (the animation would only be playing before the app loaded, so should only last a max of 3 seconds).

Additionally, the circle in the center is pulsing slowly to make the spin animation less disorienting. It becomes a hypnotic rhythm. This is important to what Impulse represents. An impulse is something you do, seemingly, without thinking. It's reactionary and even a bit chaotic on the front end of things. Underneath, your brain has processed a lot of information and quickly made the best possible decision given the set of data offered. Likewise, with Impulse, you're getting the very quick gut reactions of 100 other people to lead to a clear answer. As Impulse gets smarter, it will serve your question to people who have stronger opinions on questions similar to yours. This ensures that you aren't getting answers from people who think like you, but instead people who are interested in the topic of your question.

You can check out the full animation at http://m-rlons.github.io

Also, feel free to download Impulse and let me know your thoughts about the project from a UI/UX perspective. I'm always looking to learn more and grow in my understanding of what makes a great user experience. 

@keyframes pulse {
    0% { transform:scale(.9);}
    100% { transform:scale(1);}
}

.hole {
  // background: #fff;
  background: $background-color;
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 120px;
  margin-top: $center + 2;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  z-index: 9999;
  animation: pulse 2.4s linear 0s infinite alternate;
  animation-timing-function: cubic-bezier(0.42,0,0.58,1);
}

@keyframes spin {
  0% { transform:rotate(0deg)}
  100% { transform:rotate(360deg)}
}

.orange {
  z-index: 3;
  animation: spin 5s linear 0s infinite;
}
.blue {
  width: 320px;
  z-index: 2;
  animation: spin 8s linear 0s infinite;
}
.white {
  width: 320px;
  z-index: 1;
  animation: spin 12s linear 0s infinite;
}
 
 

 
 

Building The Queue

The main feed of questions is referred to as the Queue in Impulse. This is partially a reference to the parent app, QuickQuestion, but it is largely the result of questions being queued up for users to interact with. It felt more like an action than merely calling it "Home" or "Feed". Feed feels so clinical, almost forced; are you force feeding content to the user. Home felt like a safe place where all your personal things are. This was far from a home and the language of the app had to be consistent with the experience we wanted to communicate.

Early on in the design process, we knew that we wanted emojis to be integrated into each part of the design. We asked around to find which emojis most accurately represented the responses of disagree, agree, and neutral. Initially, we had the Swiss flag as the neutral emoji, but overtime, it became clear that the shrug emoji better represented when you don't know, don't care, or just don't feel the question applies to you. It was important for the emoji to accurately convey this breadth of emotion, so we could better tailor questions to the user using machine learning over time.

Eventually, we want to add custom emojis for users to interact with questions so the emotion behind each direction better fits.

 

 

We actually used the app to get feedback directly from users about whether or not they'd like the change over to the new emoji.

The results were nearly unanimous. Being able to not only use the platform as intended, but interact with users through it helped to validate the utility of such an app.

 

Evolving The Queue

The design changed, breaking out the voting from an invisible swipe pattern to an always present button option. These eventually were broken down and pulled off the image to be presented below. Further, the navigation evolved to be icons, the entire design becoming a swipe based interface, heavily borrowing from Snapchat's existing navigation style. The swiping directly on photos remains; however, now there was a redundant and more overt pattern for users to use. We also added the ability to swipe up to report content, something that was missing in earlier iterations.

Notice that the empty Queue no longer has the Persian house cat meme, but has evolved to fit the emoji motif. Even better, there is now an action to refill the Queue by inviting your friends to use the app. Microcopy is very important for inciting action, so we made it a humble brag -- you swiped through the entire Queue and that's something impressive. The sheer number of questions constantly pouring in from users makes this event improbable. Tell your friends.