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
Assess a company's current website and develop a revised, responsive design language in three weekly Google Design-style sprints.
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.
First, we looked at ChiTAG’s current state and found immediate areas we could present design solutions for.
Inconsistent sponsor logo spacing, a distracting bubble background, multiple call-to-action buttons, text hierarchy issues, and low-res photos contribute to a lot of visual clutter.
Header text and an unnoticeable call-to-action button is plastered on faces of industry professionals. Also, filtering and hiding event details could keep users from scrolling forever.
Adjusting photos and rearranging content structure could draw more interest from target audiences.
Multiple call-to-action buttons seem to confuse users on what’s important for this page. Certain photos don’t represent fair events in the best way. Last year’s event information has an overwhelming amount of prominence.
Schedule & Tickets Page
This page distinguishes ChiTAG Week’s target audiences by color, but call-to-action buttons don’t show any examples of consistency. Also, header photos seem to appeal to just one target audience.
Whitespace inconsistencies and a long column of dated archives and tags seem to have the user search more and read less.
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.
Colors are bright and fun, but lean on the extreme end of the spectrum.
The dark futuristic theme doesn’t support ChiTAG's playfulness.
Minimalist elements are neat, but there's uncertainty in how they could fit for the site.
Our client liked the simple two-color scheme and playful banana pattern.
Organized, digestible content was helpful for our client to visualize their own content structure.
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).
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.
Maintain user attention by keeping information organized, succinct, and relevant. Users receive blocks of information, and can easily choose which ones they’d like to continue with.
Overall ecosystem of the website is cohesive. Current content can exist in the website, and new content can be introduced later, as all content lives harmoniously with the ChiTAG brand.
Visual design makes the user’s experience from point A to B fun. Whether it’s to purchase a ticket or sign up as a vendor - fun frames the experience.
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.
My second mood board was a compilation of structured visuals, mazes, toys, and fruit. Sharp angles and blocks promote a bit of modernity, while bright colors and fun, flat designs keep things lighthearted.
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.
Although users gave praise to my color palette and element layout, the Home Page had its issues. A dark scrim and centered event text blocked my hero image from making a significant impact. Also, users weren’t fans of my countdown timer, as it competed with the Tickets button and had a gimmicky feel. Along with adjusting my whitespace, I needed to find more ways to evoke fun.
On the Conference Page, users really liked the Conference Schedule section and felt it could be helpful in organizing ChiTAG’s massive event content. There were mixed reviews on the toy pattern background, as it didn’t seem to nail the fun aspect I was going for. The icons were hard to make out or distracted users from important details.
The Fair Page's Fun Things To Do section got compliments for condensed, organized event information. Some users didn’t see the relationship between some title icons and text, so I made a note for future adjustments. Also, I needed to adjust and replace photos to enhance the fun factor for this page's audience while keeping things informative.
Users liked the card layout on the Gala Page, but felt title icons didn’t capture the events’ essence. Also, I made a note to adjust my element hierarchy, as I learned of the Toy & Game Innovation Awards (TAGIEs) prominence from users who were past attendees.
Last, users appreciated how the Let’s Connect! newsletter section made it easy for attendees to sign up. I made notes of possible future adjustments after learning of the newsletter being more important to users than social media.
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.
After the second round of user tests, our team met to share feedback and draw draw any additional insights. One significant takeaway was understanding color’s purpose for enhancing the brand. Although users had mixed reactions for my orange and blue color palette (past attendees preferred ChiTAG's color palette more than users not familiar with the brand), all agreed on it meeting the goal of bringing fun to the site.
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
Simple animation adds active delight to a basic scroll-to-top button.
ChiTAG Event Overlay
Alerts and excites eyes with animated key event information and a playful call-to-action button.
Keeps page content digestible by hiding additional event details until users click for more information.
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.
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!