UI/UX Design: Nerdfaire Con
Website redesign for Nerdfaire Con, an annual mini convention devoted to all things nerdy & geeky. In this 2-person team project, I fulfilled the functions and roles of UX researcher, project manager, and visual/UI/graphic designer.
My partner oversaw the design of home and ticketing pages, assisting with graphic elements as needed. I oversaw the end-to-end process of the redesign, from data collection to testing and design. I was in charge of creating our user tests, designing pages for exhibitors, forms, creating visual and UI elements, and the rebranding package.
I won't recreate the entire case study here, but here is the full case study if you're interested. If you'd like to see what I created, click here or on the image below.
Background & Problem
In recent years, geek and nerd culture have risen in popularity. Conventions such as Penny Arcade Expo, Gen Con, and San Diego Comic Con are just a few events dedicated to celebrating geek and nerd culture. These events are so popular that smaller conventions have sprung up over recent years to meet the demand. From retail to video games to technology, it’s become clear that conventions are successful businesses.
With this in mind, it’s crucial for even small conventions to have a functional, attractive website. This is especially true in a competitive area like Seattle where there are similar businesses and conventions vying for the same customers. From a business perspective, it’s important to stand out.
That’s why I set my sights on redesigning the website for Nerdfaire Con.
Issue #1
Visual Design
The website’s “very early Internet” appearance made an immediate negative impression for most users. The choice of colors, fonts, and layouts created confusion about what the website was about or who it was for. Several users made comments about the logo and its lack of prominence on the website.
Notably, the website’s visual design affected the convention’s credibility, as well as users’ confidence and trust in the website. In general, users described the website as “old” and “not professional looking.”
Issue #2
Legibility & Readability
I gave users tasks that required finding and reading information on the website. Most users found it hard to extract the right information while reading the website.
They complained about the sheer amount of text, the lack of delineation and hierarchy, repetitive information, as well as the poor choice of color and fonts for the body texts. Pages like the home page, Exhibitors, Artist Alley, and Panels were commonly cited as difficult to read, where users were greeted with a single column list that stretched down the length of the page.
Issue #3
Organization
This was one of the biggest issues that users impressed upon me during user testing. As part of the user test script, I would ask what they would expect to find under certain pages, such as “Artist Alley” or “Exhibitors.” When those expectations were not met, users became confused.
This confusion was most evident in questions related to vendor/exhibitor/artist information and how to become involved with the show. When users didn’t know where to go, they displayed behaviors such as randomly clicking on the menu, around pages, and anything that looked vaguely useful.
Issue #4
Missing Information
In addition to poor page organization, users also talked about missing information from the website. Some of the common things they mentioned were FAQ’s, pictures, map of the convention site, calendar of events, and an easy-to-read schedule.
Many users chose to navigate away from the website in order to find the information they were looking for. Combined with the issue of poor page organization, the lack of information reinforced the sense of distrust among users. This can be incredibly damaging to companies that are looking to gain users’ trust and confidence in order to make sales and create brand loyalty.
Research & User Testing
For this stage, I used several methods for gathering information: surveys, interviews, and user tests. This gave an initial picture of who the users were, their level of familiarity/experience, and what they prioritized when going to a convention.
According to our survey results, most of our users were familiar with conventions and geek/nerd culture. They were from a variety of age groups, and the majority of users were tech-savvy (e.g. familiar with computer, internet, and mobile apps).
The user test consisted of questions and scenarios that I felt were typical for convention attendees and exhibitors, such as:
-
How to find/purchase tickets
-
How to become a vendor/exhibitor/artist
-
How to contact convention organizers
-
How to find specific information such like location and parking
The user test was not timed, and users were encouraged to think out loud about their choices, expectations, and opinions. I asked about what they expected to find under certain pages as a form of card-sorting.
During the test, I observed the users for pain points, noted behaviors (such as scrolling, highlights, and clicking), and recorded their responses using screen capturing and written note-taking. At the end of each test, I asked users to rate their experience on the website on number scales.
Below is a visual table/summary of our insights, focuses, and opportunities:
Website creates too much work for user, creates more questions than answers, deters rather than attracts.
INSIGHTS
Use graphic design and Gestalt principles to create information hierarchy and increase readability.
FOCUSES
Create categories, multiple pathways to access the same information, intuitive labels, minimize "thinking" for the user
OPPORTUNITIES
From our research, my partner and I created user personas, worked on information architecture and user flow, then finally wireframing and design.
While researching websites for layout and UI designs, I took some time to create a rebranding for Nerdfaire Con. During my user tests, most users commented that they liked the existing logo. Yet, they felt it lacked impact and prominence on the website. I wanted to create a more fun, optimistic, and family-friendly vibe, as well as refining their voice and identity. We also wanted to celebrate geek/nerd culture in the form of pixel art icons and fan art.
I updated this project in 2023! Click on the image to check it out!
Conclusion
Over the course of this project, I learned about the importance of UX research, creative problem-solving, and what it takes to improve designs. Here are my takeaways:
Put yourself in users’ shoes to understand what they need and what they actually do when using a product. I really enjoyed the UX research process from recruiting users, setting up user testing, and analyzing the data. The process really opened my eyes to the many, wonderful, and sometimes weird ways we navigate information, perceive problems, and how to solve them (even if that “solution” is just randomly clicking on things). I would love to explore UX research deeper in future iterations and projects.
Keep referring back to data, and don’t be afraid of doing more research. An important part of this project was collecting as much user behavior data as we could. We needed data to support our redesign thinking.
Put the team first. It helped our team to have a good understanding of each others’ strengths in the beginning. We had regular check-ins with each other, taking the time to listen to each others’ feedback and not take critique personally. Although we have our own individual creative styles, I felt we were able to put together something that felt cohesive and harmonious.
Organizing and structuring design principles is just as important as creating them in the first place. I’ll continue finding ways to better structure the design principles we created at work, and visualize them so that everyone visiting Nerdfaire Con can get a good understanding of it.