Heychat - Case Study

About

Heychat, is the fastest way to chat & discover what your friends are doing. It's easy, take a photo based off of "what you are doing?" and inspire your friends to do the same. After that, you will start to see a unique story about the people you care about.

Role

I was the Lead Product Designer for this project. My job was to re-designed the user-feed and put together a simple prototype using Origami to demonstrate how it works. I worked with a team of designers and I worked closely with the engineering team.

Team Members

Denis Minnetinov, Product Manager
Zac Grove, Growth Manager
Marat & Alex, Backend Developer
Renat & Viktor, Frontend Developer
Miguel Paya, Graphic Designer
Ozlem Bilis, Product Designer

Tools

Sketch, Illustrator, Zeplin, Mixpanel, Gitlab, Xcode, Slack, Fabric, Basecamp, Rackspace (dedicated server), Cloudflare, Twilo, Testflight, Origami, Google Analytics.

Languages

Objective-C (frontend), Ruby on Rails, MongoDB and NGINX (backend).

Design Process

This is an example of my design process that I like to take.

Discover

Problem

We discovered from analytical metrics and feedback that people weren't viewing the shared post much and that it felt kind of hidden. So my job was to design a more engaging feed to help people engage with their friends more.

Define

Research

The goal was to help people create a visual-narrative of their life and allow other people to discover what their friends are doing through images in the moment. The current people we tested loved to use Instagram, Pinterest, and Tumblr.

Personas example from user testing and research.

Ideate

Solution

It made sense for our team to go with a grid-like-feed that would allow people to create a storyboard feed like when you are creating a movie. It seemed to be the most logical move based on research and testing. I was inspired by Pinterest, Twitter, and Instagram.

Affinity Diagram

Brainstorming ideas of the feed with the team.

Prototype

Lo-Fidelity

Sketching lo-fidelity ideas and brainstorming mockups.

High-Fidelity

I created Sketch High-fidelity mockups of the profile, home and camera.

Prototype Animation

Origami example of a basic prototype to test user experience with.

After our last round of iteration on our high fidelity prototype & animation, we conducted before and after testing to see if our re-design was successful. We tested 30 users and out of 26 preferring the re-designed site.

This is before and after of the home feed. Now you can see the photos better looks more fun.

This is before and after of the Profile. Highlighting the friends and added "interest" tags.

High resolution final image example.

Retention went up 17 percent, commenting, liking and posting went up to about 13 percent.

Heychat - explainer video

Andrew did the animation and I was the creative director, writer and I did some of the designs. This video was edited multiple times just to get it right. Check it out!