Project & Scope

The Company:

Hatchd is a platform for people to have discussions about TV shows while viewing. By matching up where you are in the show with the corresponding social media conversations, you can engage in the conversation in real time relative to your point in the show, regardless of when you are watching. Goodbye, spoilers!

Objectives:

Flesh out design and functionality as it relates to users and Brand Strategy, while incorporating elements of gamification, into a Minimum Viable Product.

Role:

I was contracted as part of a three person team with Joey Kantor and Seema Sharma. We collaborated closely throughout the process, but my primary focus was on Wireframing, Prototyping, and Visual Design.

Problems:

  • Noisy newsfeed
  • Desire to adopt multiple "voices" on social media
  • Unclear syncing process 
  • Features intended for younger user

Solutions:

  • Filtering options for who appears in your feed
  • Control over where a post is published to
  • Redesigned Sync flow
  • Simplified design for all ages
 

Research

Market Research

Right away, we dove into initial research into television and social media to better understand the market and its users.

Hatchd Tv Stats

Competitive Comparative Analysis

Once we understood the market, we wanted to get a feel for what else was out there. How were other popular sites addressing similar issues? What conventions were users familiar with and comfortable already using? What symbols are they used to for "Compose a post"? etc.

Hatchd Competitive Comparative analysis

User Interviews

In order to identify our users, we wanted to talk to as many people as we could. Through surveys and a series of interviews, both over the phone and in-person, we were able to start connecting patterns in their desires. We came to three key findings:

Hatchd User Findings
 

Analysis

User Personas

Taking what we learned from our research and interviews, we were able to identify our two core users: the young, tech savvy and highly social demographic, and much to our client's surprise, a much older yet still active demographic.

Lisandra

Lisandra

 

Who she is

  • 26 year-old female
  • From Brazil, currently lives in LA
  • Works as a Tech Recruiter
  • Telenovela fanatic
  • Uses Facebook, Twitter, Instagram, Snapchat

what she needs

  • Fast commenting while she watches
  • Connecting with friends from multiple accounts
  • Toggling between professional and fun voices
Jerry

Jerry

 

Who he is

  • 55 year-old male
  • Lived in Dayton, Ohio for last 25 years
  • Car mechanic
  • Loves comics
  • Prefers Facebook for all social media needs

What he needs

  • Way to avoid spoilers when discussing shows
  • Easy way to connect with his friends
  • Ability to be selective about appears in his feed
  • Simple interface

User Flow

Lisandra is addicted to Game of Thrones, but because of her hectic travel schedule for work, she is unable to always watch it live. She uses Hatchd so she can still be engaged in the conversation, even though she's watching it a week late. Below is a flow of some of the actions she would take:

Hatchd User Flow
 

Design

Sketches

Over the course of all the research, I began playing with some solutions in my head. Starting with sketches allowed me to get some of my basic ideas down on paper and to provide visualizations of potential features and structure to discuss with the team.


Wireframes

After agreeing on the direction the sketches were headed, we mocked up some very basic black-and-white wireframes to show the client our general thinking, as well as begin to User Test.


User Testing

In order to keep the focus on the functionality and flow of the app, rather than the look, we kept our prototype in greyscale, with minimal content. By performing multiple rounds of testing on users of various ages, we were able to flesh out and address simple but overlooked usability issues, as well as validate the intuitiveness of the design.


Hi-Fi Prototype

Taking into account the results and feedback from our User Testing, as well as some additional input from the client, we brought our wireframes out of greyscale and into a much more polished and high-fidelity prototype for our final presentation to the client.