Loudoun County Fair
Introduction: A personal connection
When tasked with redesigning a website for a project, I immediately thought of the Loudoun County Fair. One of my summer jobs had been working at the fair in Northern Virginia, where I frequently heard visitors and staff mention the need for a website redesign.
Inspired by these conversations, I reached out to one of the fair directors and pitched the idea of redesigning their site. He was on board right away, and we teamed up to finish the MVP for the redesign in just two weeks.
The Challenge: Outdated and inefficient design
The Loudoun County Fair website wasn’t meeting users’ needs. Visitors needed a clear, easy-to-use interface to quickly find things like event schedules, rental info, and ticket details. Instead, they ran into:
Unclear navigation that made it difficult to find critical information.
Limited usability that frustrated users trying to accomplish basic tasks.
Insufficient content that failed to provide key details about the fair.
“I was looking on the website to purchase parking passes online and I can find the information about the passes but can’t locate the place to actually buy them.”
Unclear navigation titles
Lack of information on rental buildings
Excessive click through navigation
Solution: Website revamp
A website refresh that tackled both business and user needs by updating the navigation, improving the visual design, and redesigning key pages like:
Home Page
Rentals
About the Fair
Scheduling
Proposal
Client brief
Before diving into the project, I held an initial meeting with the fair director to discuss the goals and priorities of the redesign. He outlined the following MVP (Minimum Viable Product) features based on the fair’s business objectives:
Viewing the fair schedule.
Learning about the fair’s history and attractions.
Highlighting sponsors (LFA sponsors).
Booking rentals for events.
Purchasing tickets online.
Research goal
Through my research, I wanted to see where users struggled when navigating the site so I could pinpoint areas for improvement.
Contextual inquiries
Instead of traditional user interviews, I conducted contextual inquiries to observe users navigating the website and identify their main pain points. To guide the testing, I provided each participant with specific scenarios for each task, helping them step into the user's shoes. These scenarios included:
Imagine you're a regular fairgoer trying to purchase tickets online.
Imagine you’re coming from out of town and need to find the schedule for the Rodeo.
Imagine you’re interested in booking a rental for an event.
Imagine you’re a local business owner, interested in sponsoring the fair.
Imagine you’re trying to find out more information about the fair and the Loudoun County Fair Associates.
“I also would like for the website design to highlight more of the animal activities rather than the rides since we are an agriculture fair.”
User Research
Key findings
4/5 participants did not particularly enjoy the visual design and felt it was lackluster.
4/5 participants found the content throughout the website to be confusing. Frustrated with the poorly organized information about the fair.
The pages that required the most attention and improvements were the home page, rentals page, ticketing page, about page, and scheduling page.
The business goals and user goals did seem to align for pretty much every aspect of the website.
Cardsort
In addition to the contextual inquiries, I also conducted a card sorting exercise to understand how users naturally grouped the website’s categories and to compare their groupings with the site's current design structure.
Approach: I sent out the card sort to 14 people, getting a total of 10 results.
I’ve found that having more participants for the cardsoring produces stronger data patterns, making it easier to identify key insights.
Results
The results revealed only two strong patterns, with many low-consensus groupings (10% to 20% agreement). This indicated a weak information hierarchy.
Some of the current groupings didn’t match what users’ expectations, meaning it would be difficult for them to navigate the website.
Moving forward: I’ll focus on renaming and reorganizing the categories based on these results to make the site easier to navigate.
Insights
Information hierarchy
Poor information hierarchy was causing friction for users and causing them to take longer to complete a task.
What now?
Visual Design/Content
A lack of engaging visuals and content left users unmotivated and without enough information to make informed decisions.
From this research, I refined the MVP to focus on the most critical user goals:
Finding the rodeo.
Requesting a rental.
Learning about the fair.
Important: Buying a ticket turned out to be tricky, but I found out it was because of a temporary bug, not the usual setup. The ticketing pages also had a set design, so I didn’t have much creative freedom to change them.
User archetype
While I typically create personas for other projects, I opted for a written user archetype for this one. Since the archetype could change depending on the task, this approach gave me more flexibility. For example, the archetype would differ for someone booking a rental versus someone looking for the rodeo schedule.
It also allowed me to focus my design on the user actions rather than assuming the demographic factors define the solution.
“How Might We improve the usability, navigation, content, and accessibility of the Loudoun County Fair website to ensure that all users can effortlessly achieve their goals. “
Flows
Site maps
Once I had my MVP determined, I went in and constructed a site map to lay out the pages of the website. I adjusted the navigation and regrouped the pages based on the results from the cardsort.
Using the data from the card sort helped me make sure that my new navigation was backed by research.
While I was just working on the three pages, I thought it would be helpful to map out the whole site, since site mapping is always something that takes a bit more thought for me and wanted to get in more experience.
User flows
After creating the sitemap, I developed the user flow, designing tasks based on the MVP.
Finding the Rodeo Schedule
Booking a rental
Learning about the fair
Wireframes
First low-fidelity frames
When I started creating my low-fidelity wireframes, I faced some challenges, especially with designing the fair page. While the functionality was solid, the aesthetics fell short. Many fair websites had weak designs, leaving little to draw from. Therefore, my initial designs lacked both depth and visual polish.
Benchmarking
To overcome my creative block, I explored a variety of unrelated websites to draw inspiration from their UI patterns and aesthetics. This approach helped me generate fresh ideas, which I applied to my design, resulting in a much stronger and more polished look and feel.
This was a huge breakthrough moment for me.
Low to high fidelity
Once I had updated my low-fidelity designs, I spent the next week updating them to detailed high fidelity wireframes
Low fidelity
High fidelity
User testing
Once I had all of my high-fidelity screens completed and my prototypes connected, I conducted a round of testing with the same members I conducted my contextual inquiries with. The purpose of this pool was to ensure that my design solution addressed their original pain points. These tasks included:
Inquiring about a space
Learning about the fair the Loudoun County Fair Associates
Finding details about the Rodeo
Metrics
Task Completion Rate
100% of the participants (5 out of 5) completed the following tasks:
Inquiring about a space
Learning about LFA and the Fair
Finding details about the Rodeo
(3 out of 5) people took over three minutes to complete the following task:
Finding details about the Rodeo
Error Rate
0% ( 5 out of 5) of participants were unable to complete a task
60% of participants did not complete the finding out about the rodeo with ease
Prioritization
“I honestly am not sure what I’m looking at here when looking at this schedule page”
“I think ordering these categories in alphabetical order would help the problem".”
Interviewees
Prioritization Matrix
To identify which issues to prioritize in my iterations, I created a prioritization matrix. This approach helped me evaluate problems based on their frequency in testing and their overall importance. Using these insights, I refined my designs accordingly.
Iterations
#1 Highlighting entertainment
To improve the user experience and provide clear guidance, I emphasized the importance of informational hierarchy by creating a prominent headline for the entertainment section. Since entertainment is a major draw for many fairgoers, highlighting this aspect adds clarity and direction to the page, ensuring users can quickly find what matters most to them.
Before
After
#2 Alphabetizing Groups
Participants noted difficulty navigating the page and identifying the information they needed. To address this, I reorganized the chips into alphabetical order, making it easier for users to locate the information they were seeking more efficiently as it reduces cognitive load and promotes consistency.
Before
After
#3 Moving the search bar
Four out of five participants overlooked the search bar, a key feature designed to simplify finding events. To address this, I relocated the search bar to the right side of the page, aligning it with the rest of the information to reduce the need for users to scan the entire layout. Additionally, I emphasized its visibility by making the text bold and red, ensuring it stands out and captures attention.
Before
After
Final High Fidelity
Success Metrics
Lower complaints
High fair attendance
User satisfaction
Positive surveys
Future Roadmap
For my future roadmap I would work with the client on redesigning the rest of the web page essentially doing design sprints for each MVP that I create. The next most crucial features based off the user goals and the business goals include:
Sponsors page
Entertainment page
Auctions page
Vendors page
What I learned
This was my first project working with a client, and it was a unique experience with both ups and downs. Some of the positives from my client included:
Presenting a clear MVP from the start.
Attending regular feedback sessions.
Providing constructive feedback.
Some of the challenges included:
Delayed responses from my client regarding interview participants.
Limited feedback during our sessions, which led to confusion on some design decisions.
Poor communication around the client's specific expectations.
How I handled the challenges:
Re-emphasized my scope and timeline of the project to my client.
Laid out my future needs from my client during our next session and scheduled our next meeting.
I stressed the importance of receiving his feedback to understand his expectations and incorporate them into the design.
Balanced my other projects so I wasn’t behind.