Project Description

Hatchimals Digital Experience

WEBSITE DESIGN, BRANDING, CONTENT CREATION

COMPANY
SPIN MASTER

YEAR
2018

ROLE
CREATIVE DIRECTION
DESIGN
UI/UX LEAD

TL;DR: Refreshing the Hatchimals online portal for both adults and children.

Hatchimals was an instant success for Spin Master when it hit shelves at the end of 2016. Children couldn’t get enough of the toy that hatched out of an egg by itself; it was the ultimate form of unboxing in their eyes, and for parents, it sparked nightmares of the 1996 Tickle Me Elmo craze. With the popularity and demand so high, all efforts were on customer service and ensuring that toys met children’s hands. A year later, Hatchimals CollEGGtibles was born, a small, collectible version of the new household name, and from there, the brand grew more extensive each season.

Hatchimals quickly grew upon themselves. Within the span of a few years, the brand had tripled its product varieties. There were the classic Hatchimals, CollEGGtibles, Pixies, party supplies, clothing, plushies, and the brand only continued to grow. Seeing this ever-evolving beast, it was apparent that they needed a digital home for both adults and children to stay up to date on the latest events and releases, and track their collection.

COMPANY
SPIN MASTER

YEAR
2018

ROLE
CREATIVE DIRECTION
DESIGN
UI/UX LEAD

Hatchimals Digital Experience
Hatchimals mobile mockup

User expectation and needs

User expectation and needs

I approached the Hatchimals website with a few goals in mind. One goal was to ensure that the site is accessible in all forms and for all visitors. This meant building two websites, one for adults and one for children, both with their own focus and uncompetitive to the other Hatchimals applications. This was to be a hub, housing, and pointing the parties in the right direction.

Ensuring accessibility also meant adhering to both COPPA and AODA compliance, so all Hatchimals fans would have a fun experience no matter the circumstances.

hatchimals userflow

I created the user-flow and wireframes to reflect the goals, paying close attention to what aspect and features were needed on both sides of the site based on user habits.

Adults and parents tend to visit the site to see new product launches and events in their area. It was also their first stop in any customer service need, so we made sure to include these aspects and clear CTAs to sign up for our newsletters. On the other hand, children love videos and tend to lose the printable materials that come with physical products, so we made sure to include additional printouts of all these materials and other fun treats.

Hatchimals wireframes mobile

Digital vision

The digital branding of Hatchimals was not without its hardships, hardships that were also felt product side. The brand was growing, but so was the demographic, we wanted Hatchimals to be bright and fun, but we also wanted it to be aspirational.

As the product designers worked on aging-up the packaging, I worked on the digital style. Creating colour palettes that complimented the Hatchimals brand, but also met web accessibility guidelines. The website creative was designed with a slightly older demo in mind, featuring gifs and photography from the Hatch Club web series.

hatchimals colours
colours
hatchimals type
Hatchimals type: Grilled cheese and Open Sans
buttons and other site elements
buttons and other site elements
hatchimals kids header
hatchimals homepage
hatchimals homepage
hatchimals menu for mobile
hatchimals products
hatchimals collectibles for mobile
hatchimals collectibles tool
hatchimals banner
Hatchimals tote design
Hatchimals t-shirt design
Hatchimals hat designs

Projects