Josh Magno, UI Designer

ChiTAG

Celebrating Toys & Games

 

Chicago Toy & Games Website

Integrating "fun" into
a responsive redesign!

ChiTAG Title Mockup.png
 

Client:
Chicago Toys & Game Group

Role:
UI Designer

Time:
3 weeks

Platform:
Responsive website

Tools:
Sketch
Proto.io

Deliverables:
Hi-fi screen mockups
Interactive prototype
Style guide

- Prologue

The Chicago Toy and Game Group (ChiTAG) organizes an annual week-long celebration of play and innovation through fairs, conferences, and a gala. A team of three other UI Designers and I were tasked with redesigning the mobile and desktop website interfaces.

Our main challenge?

Redesign the site to be fun and professional.

We focused on simplifying the organization of the site, focusing user attention to ticket purchases, and driving users to the blog all while maintaining a clean interface.

An additional challenge?

The fair, conference, and gala sections each need their own personality while staying under the ChiTAG brand.

 

- CHAPTER I:
Getting to know ChiTAG

Or, The more you know [insert NBC PSA theme song].

To get a better idea of what ChiTAG was looking for in their redesign, my team and I decided to conduct brand tests in our first meeting.

Three other UI designers and I assembled ten images for some of ChiTAG’s employees to review. They ranked the images on whether or not the redesign could stylistically go in the idea of the image. Here are some of their stronger responses, as depicted by Woody from Toy Story:

ChiTAG employees - and Woody - had all sorts of responses to the gut test.

ChiTAG employees - and Woody - had all sorts of responses to the gut test.

We also asked the ChiTAG employees to use adjectives to describe the redesign.

ChiTAG should be perceived as:

And it shouldn't be perceived as:

 

- Chapter II: Competition and Inspiration

Or, What can we do to not be terrible?

To further help guide our eventual design choices, we wanted to know what similar conventions - the competition - do and don’t do well. Additionally, we found some sites with successful UI patterns or just really good design to implement in our own individual approaches, all summarized by an ecstatic Buzz Lightyear from Toy Story.

Buzz thinks all of these are fine examples of what TO do.

Buzz thinks all of these are fine examples of what TO do.

Comic-Con made good use of carousels to condense information. Similarly, the Nuremberg Toy Fair breaks up information with cards. The Dibi Conference used a wide color palette and looked clean. Modern Farmer organizes information with pictures, summaries and color tags. Finally, PBS Kids & Parents are connected sites for different users, but still feel branded by the same company.

 

- Chapter III:
Our Design Principles

Or, Rules are tools!

We realized the goals for the redesign came from looking at competition and inspiration. The competition defined where the site could fit and compete, and the inspiration could further guide design choices. To condense a myriad of rules and patterns we wanted for our individual redesigns, we created the following design principles:

Design principles help us along the process to confirm what the product needs to be, not what people want it to be.

Design principles help us along the process to confirm what the product needs to be, not what people want it to be.

 

A word from the Author:

From here on out, all designs and choices you see are purely my own.
Like Beyonce with Destiny’s Child, it was time for me to fly solo.

 

- Chapter IV:
Making Moodboards and Style Tiles

Or, Childhood is the best source of inspiration!

Instead of jumping into redesigns, I assembled moodboards and style tiles to give ChiTAG employees possible options on redesign ideas I was entertaining. To create said moodboards and style tiles, I chose elements that each focused on a different factor from the gut test, the competition/inspiration source analysis, and the adjective association test.

Playing around with a dark interface.

Playing around with a dark interface.

Experimenting with a print-style of organizing information.

Experimenting with a print-style of organizing information.

Of my three approaches, I continued with my ‘90s-inspired approach in the site redesign. I wanted to play around with 'nostalgic' theme. I decided to pull from my own personal experience of ‘nostalgia’ and drew inspiration from the '90s.

I love the '90s.

I love the '90s.

 

- Chapter V:
Final Desktop Screens

Or, Scary user tests fuel redesign fire!

I learned a lot in humility and feedback for this phase of the project. Most user tests didn’t like majority of the design decisions in earlier approaches, whether it be based on colors (“You don’t use the original colors, so I don’t like it!”), new features (“People don’t care about a countdown!”), or just trying something new (“These look like cockroaches! Cute cockroaches, but cockroaches nonetheless!”). However, I learned to design fast and efficiently. These visuals are my most recent approaches to the redesign.

 
Home Page Landing.png
 

Hark! Therein lieth a plot twist!

In the downpour of negative feedback, I realized all users we tested with were familiar participants of ChiTAG week. I decided to bring in a couple users who were experienced in the toy industry, but had not attended or heard of ChiTAG.

As it turns out, these new users still saw the different color palette as fun and associated with toys and games. They were confused, however, with the number of links the homepage had to different parts of the site, what links lead where, and where to purchase tickets as new customers to ChiTAG. Condensing navigation links and clearly directly users to the right sections of the site became a focus of my final screen redesigns.

 

- Chapter VI:
The mobile version

Or, Where I take advantage of the accordion pattern.

Accordions are very good for condensing large amounts of text, especially if they come with appropriate headers. This comes in handy when your screen is smaller and when user patience is most likely thinner.

 

- Chapter VII:
A Video of the Prototype

Or, Dang, I'm good at microinteractions.

In my opinion, designers should design with an idea of how elements move around as users interact with the site. I was excited to take my design to Proto.io and see what I could do with the UI patterns in my final approach; check out how it worked in the video below!

 
 

I had an incredibly fun time making the microinteractions for this prototype; I realized the control I have over animations in Proto.io, and the possibilities in using this over inVision. I've been able to smooth out animations by imagining interactions as state changes.

 

- Chapter VIII: Style Guide

Or, #GettheLook

There’s a quote that goes something along the lines of, “you learn better when you teach it.” To fully understand what I did for the redesign and how to recreate it, I made an in-depth style guide. Abridged version below.

 
I'm more detailed in the real guide, I promise.

I'm more detailed in the real guide, I promise.

 

You can download an in-depth copy of the style guide here.

 

- Epilogue:
Project Takeaways

Or, Further considerations

Or, Looking back on an emotionally challenging yet self-revealing first client project.

I’ve never been more excited or determined to ‘get a project right’ like this one. I recently got confirmation that the ChiTAG employees preferred my design approach, and elements would soon be implemented into their current site.

But, I wish this project lasted longer.

I could have easily worked on reorganizing the site and designing the entire site. The feedback I received through the process pushed me to start over from square one in several instances, and toughened my skin as a designer.

Pushing back on ChiTAG’s specific color palette satisfied my need to create in specific confines. Also, bringing the insight of outside user opinions to ChiTAG justified a lot of choices I made.

That being said, I recommend the following to continue strengthening the site:

Pay attention, ChiTAG! I want you to do this to BE ALL YOU CAN BE.

Pay attention, ChiTAG! I want you to do this to BE ALL YOU CAN BE.

ChiTAG’s site set a great example working with a creative client, and how to go about making design choices to establish myself as a designer in the confines of a company’s brand. I’m excited to find more projects like this in my future.