ChiTAG

Founded in 2003, Chicago Toy & Game Group, “ChiTAG” is an organization that annually host a one-week event, promoting the toy and games industry towards inventors, sponsors, innovators, and families.

Client: ChiTAG
Date: 2017
Services: Visual Design, UX

01. The Challenge

Founded in 2003, Chicago Toy & Game Group, “ChiTAG” is an organization that annually hosts a one-week event, promoting the toy and games industry towards inventors, sponsors, innovators, and families.

Despite their success, their site was underwhelming in appearance and performance. My team of four were approached by ChiTAG via Designation to lead in the branding and visual design, to increase ticket sales and establish a mobile presence.

02. Research and Discover

We held a kickoff meeting with ChiTAG UX designer and developer, which proved fruitful in discovering a few issues that would affect how design decisions were made:

Reasons#Init1
Reasons#Init2
Reasons#Init3

Knowing their site had an outdated design, my team did a few things to establish a new visual direction. We conducted research by creating a visual competitive analysis, facilitating a 20 second “gut” test and brand voice exercise.

Surveying the Landscape

We did a visual competitive analysis as well as an out of category inspiration to show competitors’ strength and weaknesses, as well as gaps for ChiTAG brand to leverage.

Visual Competitive Analysis

After reviewing our brief visual analysis, we decided on a few key elements to be incorporated into ChiTag’s redesign, such as utilizing the modern farmer use of white and text to create a hierarchy, dibi usage of bright colors to evoke playfulness, and make faire strategic photography implementing.

Our North Star

After initial research, we defined the following design principles to guide the rest of our process:

FUNctional

The visual design makes the user’s experience from point A to B fun. Whether it’s to purchase a ticket or sign up to be a vendor.

Digestible

Maintain user attention by keeping information organized, succinct, and relevant. Users are presented with readable blocks of information.

Accomodating

With information being the driver of a website, it is significant that a cohesive ecosystem of old and new content is firmly established.

03. Determining the Look and Feel

What should we bring to life?

Each member of my team created individual style tiles to present to our client. I designed three divergent concepts that encompassed friendliness, organization, and accommodation.

Style Tile Combination

The client felt my first and third style tiles didn’t resonate well with the brand because the layout and color seemed too simple and text heavy. They liked the second version of the bright colors and the playful nature seems to jive well.

 

For my next iteration, the client wanted to incorporate aspects of all three with a big image, less embellishment, colors and call to actions.

Selected Style Tile

04. What do users think?

To make sure our final designs aligned with our principles and research, we did a few rounds of usability testing with a demographic ranging from 18-60yr olds. We interviewed enthusiasts and non-enthusiast of the industry. These tests were done with a few key questions in mind:

1. How much playful engagement did the designs evoke? Specifically, how did the colors combine with it?

2. Can you the user find the relevant content easily?

3. Would a user notice the “buy ticket” button?

Round 1 – Get initial showing perspective

In my initial test, I just showed a homepage to gauge a user’s response and these were the prominent comments made as shown below:

Interview #1 Mockups AB

Round 1 takeaways

Overall, there were mixed results as users stated how overwhelming the colors were, thus making finding and reading text difficult. The buy ticket button was too small to recognize as important. It didn’t overtly scream fun. Surprised but not daunted, I reviewed their feedback and made adjustments.

Round 2 – Further reframing

On this round, I tested few more pages.

Interview AB – round2#1
Interview AB – round2#2
Interview AB – round2#3

What did Round 2 reveal?

Overall, the user feedback was better in that it achieved uniformity of whitespace and text hierarchy of content, making information more readable. Additionally, logo relocation to the left and strategically implementing fun and engagement with the photography was a major sell. They were quite delighted with the fun plane navigation element.

What’s the Result?

After rounds of iterations, I arrived at my final screen designs that best represented their rebrand:

Homepage Smaller
Fair Smaller
Conference Smaller

MicroInteractions

dropdown-ani
homeline-ani

05. What’s Next?

With the project wrapped up, I transitioned to a documentation of assets. I annotated the app screens as well as creating a style guide. The guide will communicate the how to apply the brand across any medium.

Coverpage
Introduction

Further Considerations

Photography 

The provided images during the design phase were poor in quality and lacking playfulness. I recommended investing in a professional photographer to take more playful shots. Doing so would convey fun, thus increasing exposure.

Reframing Navigation

User feedback indicated that the navigation links were confusing. Some users even questioned what purpose a few served. Thus, it would be good to either eliminate or redefine and reorganize to better suit content.

Site Platform change

From the beginning, Wix lacked features and functionality, such as responsive capabilities, limited coding opportunities, animations, and much more. I strongly suggested they transfer to a platform like WordPress, which is free, provides backend configuration capabilities, content management features, and much more.

What I learned

Abiding by the KISS principle

Throughout the design process, I labored at times in finding the balance in conveying fun while making it readable. At one point, I used too many bright colors and had too many embellishments to compliment the content. To resolve this, I revisited the design principles and decided to think minimally and keep it simple.

Think as a developer early

Because their site was built on Wix, I had to develop and test the designs as I went to save myself future headaches. It helped bring up possible limitations and opportunities to uncover design solutions before the handover occurred.

Pick and choose my battles. I can’t always win

There were times when the creative director or stakeholder made the final call on design. While I disagreed with the decision, sometimes I had to compromise. Working with users and business is just part of the job.