In late 2013, HatchChat won first place in Google’s Start-Up Battle. Hatchchat is a text, audio, image and video messaging app that let’s you delay when the message is received by allowing it’s users to schedule the time they want their friends or loved ones to receive it. In today’s world of instant gratification, we’ve lost the joy of anticipation and curiosity. HatchChat brings that back with time capsules messaging. HatchChat makes it easy to send forward delayed access messages into the future to share those good times with family and friends.
Completed at: Erin Fellows
Role: Information Architect, User Experience Designer, User Interface Designer
HatchChat came to me with an existing prototype created during their Google startup battle. Using this as the base, I was to enhance the experience and breathe some life into the app. They wanted bright colours and a more engaging experience with the time countdowns for each message. On a minimal budget, I created an MVP for the HatchChat brand and a go-to-market product.
These were the initial prototype screens.
UX Audit and amends to user flows
Due to the minimal budget, we agreed that the user experience created in the existing app was to be built upon and not changed. I began with a UX audit and made some suggestions about how we could improve the existing experience.
I drew inspiration from the newly renovated Skype app. The user’s inbox was the main focal point where they could interact with current and past messages between friends. This area is also directly tired to their profile.
Functions such as taking a photo and adding buddies were executed using overlay screens. User initiated this action using the icons at the bottom of the screen and were guided down a seamless user journey before returning to their inbox.
I kept my wireframes to high level sketches and described them as part of the audit. It was during this phase, where my idea for a concentric circular timer was conceived.
The UI design
The concentric circular timer is the main visual feature of the app. Rather than the time ticking down as standard numbers, the time was turned into a visual representation of a time capsule. Each line represents the time past for each unit of time: month, days, hours, minutes, seconds.
Using a ‘press-and-hold’ gesture on the timer, a distorted preview of the image can be revealed. This concept was conceived to create excitement and anticipation around the hatches. The recipient can see the distorted image in an attempt to guess the contents of the pending Hatch image.
Once the timer is complete, it turns into a button to present the intended HatchChat image to the user.
The Landing Screen
The user’s main landing screen is their inbox and consists of 3 tabs: waiting, hatched and sent. It can be navigated through using a horizontal swipe gesture. The user’s profile is always visible in the top right side creating a direct link between the user’s inbox and the user’s account settings.
Setting The Hatch Time
The scrollable hatch time-setter is an intuitive, interactive and creative way for the sender to set their unlock time. The colours of the number wheels correspond to the colours in the colours inside the concentric circular timers. The user can tap and slide to define the exact time and date in the future.
For users who don’t define an avatar during the signup process, get assigned a fun avatar according to their gender. If gender is not defined, a plain avatar is shown. I styled these avatars with flat elements but somewhat caricatured.