CHITAG

Client: Chicago Toy and Game Group (ChiTAG)

Role: UI Designer

Deliverables: Visual Competitive Analysis, Style Tiles, High-Fidelity Mockups, Prototypes

Time: 3 weeks

Tools: Sketch, Photoshop, Illustrator, InVision, Wix, Principle, Affinity Photo, Affinity Designer

Challenge

Assess a company's current website and develop a revised, responsive design language in three weekly Google Design-style sprints.

Background

The Chicago Toy and Game Group (ChiTAG) is a small company responsible for promoting play through a variety of events worldwide, ranging from fashion shows to inventor challenges. It's most known for producing ChiTAG Week, an annual November event featuring The Chicago Toy & Game Fair, the largest non-hobby toy and game fair in North America. After a recent achievement of 1.2 billion media impressions, ChiTAG approached our team to see if website enhancements could boost their brand, draw more event attendees, and increase ticket sales.

I had a limited background for toy and game fairs, due to spending a lot of my youth in an area that didn’t host them. Yet, I buzzed with excitement as this project brought up childhood memories of playing with Legos and other construction toys. My team members shared an equal level of enthusiasm to work with such a unique client, so we scrambled to learn as much as possible before scheduling our kickoff meeting.

Approach

Research

First, we looked at ChiTAG’s current state and found immediate areas we could present design solutions for.

Then, we studied ChiTAG’s resource files to learn more about its brand importance. From viewing past event photos to studying the color palette and themes, we realized our client wanted expressions of happy, playful energy to highlight ChiTAG’s personality.

One highlight in our research was discovering ChiTAG’s current website on the Wix platform. Wix has been ChiTAG's home for years, so adding designs to a new content management system was slim, as our project began after key decision-making time. No one on the team had prior experience working in Wix, so we discussed possible design constraints. 

To gain design direction from our client, we conducted a 20-second gut test in our kickoff meeting. Through the test, we saw our client’s immediate reaction to a variety of designs and determined future styles or features our team could add.

Following the 20-second gut test, we shared an adjective test with ChiTAG staff and asked a number of questions to bring more clarity to our site and brand design goals:

• Sell tickets first, then provide organized event information.

• Accommodate three different audiences (general public, inventors/innovators, and vendors).

• Evoke FUN! 

Next, we looked at current toy and game fair competitors to determine what we could apply to our individual styles. Competitor websites ranged from informative, business-esque Nuremberg Toy Fair to family-friendly Maker Faire. We realized bright colors were important to have for delivering a sense of happiness and excitement to the site. Also, we needed proper content structure, as we didn’t want to overwhelm site visitors with unnecessary, unorganized text.

Then, we looked at non-competitor websites to see if we could add more helpful features to our designs. Sites like Modern Farmer used high-quality photographs, clean content organization, and color categories. Also, PBS Kids gave us great examples for using bright colors to target different audiences.

After learning from our competitors and inspiration sites, our team developed design principles. These principles served as our reference map for meeting design goals, as our enthusiasm for this project could lead us down an abstract path.

Design Exploration

Then, our team explored design directions for our individual styles. We made divergent mood boards, got feedback from people in the 1871 space, and chose key elements to make style tiles.

My first style tile was a bit safe. I stuck with ChiTAG’s current color palette and used purple as my primary color and golden yellow as my secondary color. Also, to present approachable design reflective to the logo, I added curves to as many web elements as I could. From designing a round header to adding pill-shaped buttons, I wanted every element to display fun in an organized fashion. Last, I center-aligned the logo to place more prominence on events and details.

ChiTAG’s staff liked the style tile, but felt it was too simple and didn’t care for the overwhelming wave of purple. Also, they had concerns about the curved header taking up too much screen estate, as it limited space for presenting important content.

I steered the second style tile toward ChiTAG’s professional toy and game attendees. Building angled, interface elements and keeping light, flat colors present was the mission for exuding a business casual sense of fun.

Shifting ChiTAG’s logo away from the header area was another risk I wanted to take. While scanning the Web for inspiration, I noticed many conference sites made their logos have a secondary presence. Instead, they used stylized text and shapes to distinguish one conference year from the next. In ChiTAG’s branding book, new themes took place each year, so I thought this style tile could be a possible solution if they chose to go in that direction.

Our client had mixed reactions. Some staff liked the light color palette and polygon buttons. Others felt the buttons and gray pattern background were too sharp and stiff, killing the site’s sense of fun. Everyone felt schedule elements were helpful to have, so I made a note to include them in future high-fidelity designs.

The third style tile was a balance of the first two with a bit of divergence added. I wanted to feature ChiTAG’s primary purple, but not have it take over the site like the first style tile. Also, I didn’t want this site to be as rigid as the second.

I chose a bold san-serif font to bring fun to headers and buttons, while using a simple san-serif font to keep things grounded and professional. Also, to meet our client's website goal of increasing ticket sales, I added a countdown timer for motivating visitors to take action soon. Keeping things in line with fun and playful, I sprinkled toy photos in the background and added monochromatic sponsor logos.

ChiTAG’s staff liked this one the most. They weren’t fans of custom sponsor logos, due to strict company guidelines. Also, the toy pattern background wasn’t going to work, because certain positioning could create bias and legal issues. I felt confident in pushing this design to capture all ChiTAG audiences without having to face a constant barrage of major design pivots.

High Fidelity Mockups

Next, our team gave peer feedback for style tiles and planned for upcoming high-fidelity (hi-fi) mockups, and user tests. One constant concern was our client’s use of Wix and how it would impact our designs. We had to be careful adding certain elements, because our timeframe wouldn’t allow us to backtrack much if things weren’t possible to realize.

I took time to study Wix's features and share design possibilities with group. Ultimately we decided to play most of our designs safe and share any impossible-in-Wix designs with ChiTAG if they enhanced the site’s user experience. Then, we reviewed our design principles, selected key desktop screens, and dove into our high-fidelity design process.

For the Home Page, I replaced random header images with one large, high-quality hero image to produce a dynamic impact on site visitors. Also, to help meet our design goal of selling tickets, I featured key event information, a prominent Tickets button, and a countdown timer. Also, I reduced page space by condensing sponsor logos to one row in a carousel format, removing past event info, and moving target audience details to their individual pages.

Condensing excessive content was my priority for the Conferences Page. To keep users from being overwhelmed with excessive chunks of text, I designed a simple schedule featuring events per day. Users can expand and collapse event information by clicking the plus icon. Also, to draw new attendees, I thought it would be helpful to feature photos of engaged people from past conferences. Last, I brought fun to the page by adding a subtle toy background.

I stripped the Fair Page of its plethora of call-to-action buttons to help users focus and reduce their ticket-buying time. Since there are so many fair events, I featured the top six and added an expand button for exploring the rest. Also, I shifted last year’s media highlights to a tabbed format for reducing page scroll.

Since the Gala Page featured two events, I styled both as cards and added distinct photos and icons to give new attendees an idea of what to expect. Also, I thought it was important to feature the venue for both events as the hero image, as it would help draw more target-audience ticket sales.

After polishing my first pass of hi-fi designs, I met with the team to give peer feedback and learn about our future user test participants. Our first group was a mix of game developers, creative consultants, and recent ChiTAG volunteers.

I was extremely excited about user testing, as we faced many design considerations and it would be the first time to hear opinions on my designs outside of our client’s realm. After gathering contact info, I scheduled a couple of user testing sessions, coordinated a few for the team in person or through Google Hangouts.  and captured an invaluable amount of feedback.

After the first round of user tests, our team met to share high-fidelity screen feedback and discuss any major changes we should make to our designs as a group. One important takeaway was to always place crucial content toward the page's top, as users wanted to scan and act on important things first (such as buying tickets or registering for a conference) and sift through secondary information later. 

Also, we learned featuring high-quality photos carries the bulk of the site's fun factor. A lot of my photos were too dark, didn't show people enjoying ChiTAG's events, or needed small adjustments to make a greater impact.

I spent a lot of time making iterations for my Home Page, as it was the most important page and established consistent design language for my other pages. A lot of focus went to adjusting pictures, highlighting important content, and tweaking white space. Then, I helped the team schedule second-round user testing and captured feedback.

Also, we realized organizing menu navigation would be critical in helping meet our design goals. From the project’s beginning, our client wanted structure for header and footer navigation menu to stay the same. Initially, the team pushed against this decision as it seemed to promote selection overload. However, in testing many users had trouble identifying certain sections.

After more changes, I reached a point where I could bring final high-fidelity screens to life by building micro interactions and prototypes.

Final High-Fidelity Desktop Screens

Final High-Fidelity Mobile Screens

Microinteractions

Desktop Prototype

Mobile Prototype

Future Considerations

If I had more time to spend on the ChiTAG project, I would:

• Streamline my screen redlining. As a newbie to The Redline Document, I underestimated the amount of time and detail one has to put in the process to make sure UI elements specs are precise for developers. My surprise was finding myself feeling like the protagonist in a UI version of Rumpelstiltskin. Spinning strands of pixel-measurement gold in the wee hours of a snowy Chicago night left me with an immense amount of respect for the process and today’s software helping designer-to-developer handoff.  For future projects, I will manage my time better for the process.

• Test my color palette more. My colors of seafoam green and orange pushed against ChiTAG's general color palette, as I wanted our client to see their site in a new way. Color plays a significant part in design, but viewing other toy conference sites taught me significant, organized content is what visitors seek first. My color palette had mixed reactions from users, so I’m curious to see how users would react to the site if I presented fun and playful variations.

• Test microinteractions. Building them was a fun exercise, but I didn’t have enough time to add them to actual user tests. Wondering if they met the goal of FUNctionality still sticks with me today.

Insights

My first client phase was a great, real-world experience. I increased my design approach, boosted my understanding of applying proper colors to states, and learned more about font colors' power in changing messages.

Also, learning to push against client’s design desires for the sake of the user was eye opening. As a client, it’s easy to get wrapped up in your brand without considering if they work for the people you’re trying to attract. Standing up for users was challenging, as our team had to ask detailed questions during user tests to get valid feedback for our designs. Presenting simple user opinions to our client would do nothing for meeting our goals of enhancing their design.

ChiTAG appreciated our design approaches, made some immediate site edits, and announced plans to overhaul the site before 2018 ChiTAG Week. I look forward to sharing major updates here!

Thank you for your time!