Rodeo | UX/UI Designer

Tucson Rodeo

Website Design

OVERVIEW

As part of a cross-functional team, I contributed to redesigning the Tucson Rodeo website, focusing on enhancing user experience, usability, and visual appeal. The collaborative goal was to modernize the website while retaining its authentic Western style, inspired by cowboy culture.

Roles

As part of the design team for the Tucson Rodeo website, I collaborated on a redesign aimed at enhancing user engagement and celebrating the event's rich traditions. Together, we crafted a vibrant, user-friendly layout that highlights event schedules, ticketing options, and participant details.

By prioritizing intuitive navigation and a visually appealing interface, we ensured that users could easily find essential information and connect with the excitement of the rodeo.

Tools: Figma
Timeline: Summer 2023 (12 weeks)

Skills Applied:

Ideation and brainstorming
Crafting user stories and flows
Persona development
Empathy mapping
Sketching, wire-framing, and prototyping
User testing and analysis
Branding

Problem

The original Tucson Rodeo website faced challenges in effectively promoting the event’s vibrant culture and rich traditions. Users found it difficult to navigate due to a cluttered layout and lack of clear information hierarchy, making it hard to access essential details such as event schedules, ticketing options, and participant information. Additionally, the website design did not capture the excitement and community spirit of the rodeo, resulting in a disconnection between the event’s legacy and the online experience. This ultimately hindered user engagement and limited the site's effectiveness in attracting and converting visitors.

Solution

The solution for the Crown Cabinetry website redesign emphasized a user-friendly and visually engaging experience. We streamlined navigation, organized product categories, and showcased high-quality images to facilitate the exploration of cabinetry styles and customization options. Woody tones and textures were integrated into the design to evoke woodworking, aligning with the client's focus on craftsmanship.

Audience

Event Attendees: Individuals and families seeking an engaging experience at the rodeo, looking for event schedules, ticketing information, and details about performances.
Participants: Rodeo competitors and performers need clear guidelines, entry information, and resources to prepare for their participation.
Sponsors and Vendors: Businesses looking to connect with the rodeo community, seeking opportunities for sponsorship and vendor participation to promote their products and services.
Local Community: Residents and visitors interested in supporting local traditions, searching for information on community involvement, volunteer opportunities, and ways to engage with the event.

Tools

Tools Used in This Project:

Figma, Adobe Creative Suites, Google Optimize (for A/B testing)

Goal

Enhance User Engagement: Create an intuitive and visually engaging experience that encourages users to explore event schedules, ticketing options, and participant information.
Boost Conversions: Improve the visibility of calls-to-action and simplify the user journey to increase ticket sales and event participation.
Showcase Community Spirit: Highlight the rich traditions and excitement of the rodeo by featuring high-quality images, videos, and stories that resonate with the audience.
Optimize Mobile Experience: Ensure the website is fully responsive, providing a seamless experience for users on mobile devices.
Strengthen Brand Connection: Establish the Tucson Rodeo as a premier event by emphasizing its legacy, community involvement, and the unique experiences it offers.

Design Process

Underestand

User research

Define

User persona

Empathy map

Ideate

User flow

Information Architecture

Design

Wireframe

Hi-Fi Designs

Prototype

Test

Feedback

Conclusion

User research

Before diving into the design process, we conducted user research to understand the Tucson Rodeo's audience, which includes families, tourists, and rodeo enthusiasts. This research informed the development of persona, and empathy maps to identify their emotional and functional needs, helping to shape a user-centric design that resonates with their desire for excitement and connection to Western culture.

Persona

Using insights from proto-personas and data gathered from user interviews, I created a detailed persona that reflects the target audience for the Tucson Rodeo website. This persona played a crucial role in guiding our design decisions, helping us ensure that the website truly meets user needs and expectations. As a result, we crafted a more streamlined and engaging experience for visitors looking to explore event details and connect with the rodeo community.

Empathy Mapping

Empathy mapping was key to understanding what matters most to the Tucson Rodeo’s audience, from eager event-goers to community members and rodeo participants. This process helped us tune into their excitement, their need for clear event information, and their sense of community, allowing us to build a website that truly reflects their interests and makes it easy for them to plan their experience.

Key insights from the empathy map guided the design choices:

Feelings: Visitors are excited but can feel overwhelmed if it’s hard to find schedules or ticket options.
Thinking: They want quick, straightforward access to event details, ticket info, and activities for families.
Saying: Users expressed a desire to see highlights and experiences shared by attendees of past rodeo events.
Doing: Most visitors check event schedules and ticket info first, then make plans with friends or family, or look into volunteer options.

Based on the empathy mapping insights, we focused on:

Designing an engaging layout that reflects the excitement of Western culture while ensuring a user-friendly experience.
Providing quick access to event details, schedules, and ticket information to enhance user convenience.
Including high-quality visuals of past events to evoke excitement and authenticity, creating a more immersive experience.

User flow

A visitor starts on the homepage, exploring event schedules and exciting highlights. They then navigate to ticket options for specific events and check out family activities along the way. With clear access to ticketing, they can quickly select seating, review event details, and finalize their purchase. This journey ensures users easily transition from browsing to booking their rodeo experience.

Information Architecture

To create an effective user flow for the Tucson Rodeo website, I structured the site into intuitive sections that allow fans to quickly access essential information.

Key Sections
Homepage: Highlights rodeo events, showcases captivating images, and builds excitement with testimonials from past attendees.
Events: Lists upcoming rodeo dates, event details, and ticket purchasing options, making it easy for fans to plan their visit.
Gallery: Features high-quality images and videos from previous rodeo events to immerse users in the Western culture experience.
Contact: Provides essential information for inquiries, including ticketing support and event planning assistance, ensuring user needs are met.Navigation and CTAs

Simplified Navigation
 To enhance user experience and minimize cognitive load, I designed a clear, minimalist navigation menu featuring intuitive categories like “Events,” “About,” “Gallery,” and “Contact.” This structure allows fans of Western culture to quickly locate essential information about the rodeo. A sticky header ensures that key sections remain accessible as users scroll through the site.
Call-to-Actions (CTAs): Prominent call-to-action buttons, such as “Buy Tickets” and “View Schedule,” are strategically placed throughout the site. These buttons feature vibrant colors inspired by rodeo themes, making them stand out against the background and guiding users toward important actions.

A/B Testing & Iteration

Testing Visuals:

Design Variations: We ran A/B tests to compare two different gallery layouts: a minimal design versus a more elaborate version with additional visual elements.
User Engagement: The minimal layout came out on top, boosting user engagement by 25%. This success showed that a clean, distraction-free design helped users focus more on the visuals and fully experience the excitement of the rodeo.

Insights & Iteration:

Data-Driven Decisions: The insights from our A/B testing shaped our design choices, leading to further refinements in the website’s layout and overall user experience.
Continuous Improvement: By incorporating user feedback and monitoring engagement metrics, we continually refined the design. This ensured that it resonated with our audience and provided easy access to key information and event details. Our iterative approach allowed us to keep enhancing the Tucson Rodeo website, making sure it effectively engages users and creates a memorable experience.

CTA Optimization:

CTA Performance: We also tested and improved our “Ticket Info” call-to-action buttons, which led to a 20% increase in user conversions. These clear and eye-catching CTAs effectively guided users to the essential information and actions they needed, significantly enhancing their overall experience.

Results:

Increased Engagement: The overall redesign led to a 30% increase in user interactions, indicating a stronger connection with the content and a more enjoyable browsing experience.
Higher Conversions: Enhanced navigation and clearer CTAs resulted in more ticket sales, demonstrating how our user-centered design approach effectively drives business objectives.

Visual and Interactive Elements

Color Palette

The warm earthy tones and vibrant accents were chosen to reflect the dynamic spirit and heritage of the Tucson Rodeo. Rich browns and tans evoke a sense of tradition and authenticity, while bold red captures the energy and excitement of rodeo culture. The color scheme provides a welcoming, lively atmosphere, highlighting key content and drawing users into the rodeo experience.

Primary Color:

Secondary, Ticket info color:

Typography

The header font, Oswld, introduces a bold, modern edge that complements the rugged, authentic spirit of the Tucson Rodeo. Paired with Manrope for body text, the site achieves a clean, highly readable layout across devices, allowing users to engage easily with event details and key content. This combination balances a contemporary aesthetic with the rodeo’s traditional appeal.

Headline:

Body Text:

Interactive Elements

Incorporate subtle zoom-in effects on card elements to create an engaging and dynamic experience that reflects the excitement of the Tucson Rodeo. Prominent calls-to-action within these cards, such as "Buy Tickets" and "View Event Schedule," encourage user interaction and guide visitors smoothly through the site. Additionally, light hover effects on buttons provide a tactile response, enhancing usability and drawing attention to essential actions. These interactive features invite users to immerse themselves in the vibrant rodeo experience.

Mobile Responsiveness

Recognizing the increasing number of users accessing the Tucson Rodeo website on mobile devices, I prioritized a mobile-first design approach. Key features included:
Responsive Grids: The layout adapts seamlessly to smaller screens, ensuring all content remains accessible without compromising functionality.
Optimized Touch Targets: Buttons and links are designed with mobile users in mind, featuring larger sizes for easy interaction, enhancing the overall user experience.
Streamlined Event Registration: The event registration form is simplified for mobile use, incorporating autofill functionality and reducing the number of steps required to complete the process, making it quick and convenient for users on the go.

Wireframe Design

The wireframe design for the Tucson Rodeo website was crafted to deliver a seamless user experience by prioritizing essential elements such as intuitive navigation, prominent calls-to-action (CTAs), and transparent event and ticket pricing. By addressing common user concerns like uncertainty and accessibility, the wireframes aimed to facilitate an efficient user journey. Grounded in research insights, this approach ensured that visitors could easily explore upcoming events and make ticket purchases, enhancing their overall interaction with the site.

Here are some examples of the wireframes:

Low-Fidelity Prototype:

Low-fidelity prototypes for the Tucson Rodeo homepage and event pages were crafted based on user research and client feedback. These wireframes prioritized functionality and user flow, mapping key actions like exploring events and purchasing tickets. This phase enabled quick adjustments, aligning with user needs and client expectations before moving to high-fidelity design.

High-Fidelity Prototype:

Following extensive iterations on the wireframes and low-fidelity prototypes, I created the high-fidelity prototypes for the Tucson Rodeo website, integrating finalized visual elements such as color schemes, typography, icons, and imagery to enhance aesthetics and usability. After obtaining client approval for the homepage and event pages, I moved forward with designing the remaining sections based on the approved layouts. Throughout this process, I maintained open communication with the client and prioritized user experience, ensuring that the design effectively aligned with both user needs and the organization’s business goals.

Here are some examples of the High-Fidelity Prototype:

Internal Pages

And here is the rest of the pages:

The remaining pages were developed using a user-centered approach, emphasizing the enhancement of the overall experience while effectively addressing the client's requirements. Key considerations included intuitive navigation, clear calls to action, and seamless access to event information, ensuring that users could easily engage with the content and take the desired actions.

Event Guide: This page provides essential information on upcoming rodeo events, helping users plan their visit effectively.
Rodeo Schedule and Ticket Information: A dedicated section where users can access detailed schedules and ticket purchasing options for various events.
Sponsorship Opportunities: This page outlines available sponsorship options, guiding interested parties on how to support the rodeo while maximizing their visibility.

These pages work together to enhance the overall user experience, ensuring users have access to vital information while aligning with the objectives of the Tucson Rodeo.

Conclusion

The Tucson Rodeo website redesign not only elevated the visual appeal but also provided an enriched user experience that resonated with fans of Western culture. By employing empathy mapping to grasp user needs and conducting A/B testing to fine-tune design elements, we created a platform that fosters excitement and engagement. Our focus on building trust through clear information and captivating visuals resulted in increased user interactions and ticket sales. The new design embodies the spirit of the Tucson Rodeo, showcasing its vibrant traditions while offering a seamless and enjoyable user journey.