Introduction

For this project, I selected Rock in Rio, one of the largest global music festivals. My aim is to create a modern, engaging, and user-friendly festival website that clearly communicates key event information, promotes ticket sales, and enhances the overall user experience through effective UX and UI principles. Rock in Rio spans multiple days and stages, requiring intuitive navigation, accessibility features, and dynamic design tailored to large and diverse audiences.

---

UX and UI Research

Initial research involved analysing competitors like Coachella and Glastonbury. Both offer well-structured landing pages and mobile-optimised interfaces, but Glastonbury’s website often lacks responsive design and accessibility tools.

o initiate the design process, competitor analysis was conducted on popular festival websites like Coachella, Glastonbury, and Lollapalooza. These websites emphasize responsive layouts, clear navigation, and visual storytelling. From this, the key elements identified were:

• Hero imagery with dynamic animations
• Bold, vibrant color schemes
• Sticky navigation bars
• Integrated ticketing and scheduling features

Visual Identity & UI Consistency

The app maintains visual consistency with the website by carrying over Rock in Rio’s red and navy color palette. The UI features:

• Bold headers using Montserrat.
• Easy-to-read body text using Open Sans.
• Custom icons for home, artists, tickets, map, and profile navigation tabs.

The app uses white space and card-based layouts to maintain clarity and avoid overwhelming the user, following Hick’s Law, which advocates reducing cognitive load by simplifying choices.

UX/UI Principles and Design Decisions

The design applies core usability heuristics:

• Recognition rather than recall: Icons with labels prevent confusion.
• Aesthetic and minimalist design: The interface avoids clutter, using color to highlight active elements.
• Flexibility and efficiency of use: Returning users bypass onboarding via a “Skip” option.

https://www.figma.com/design/3KJWfySjWa43otu6jLU810/rock-in-rio-app?t=RPL28zjslYjPLmvn-0

App Structure Overview (Figma Artboards)

The Figma prototype includes the following key screens:

1. Splash Screen & Onboarding – Animated logo intro followed by a three-step guide: Discover, Schedule, Experience.
2. Home Screen – Highlights current and upcoming shows, headline news, and quick-access buttons.
3. Artist Line-up – A swipeable grid showcasing artists with performance times and bio pop-ups.
4. Schedule Builder – Users can build personal schedules with reminders.
5. Festival Map – Interactive zoomable site map with search and location pins.
6. Profile/Tickets Section – User login, ticket QR codes, and saved schedules.
7. Notifications Feed – Real-time updates on weather, schedule changes, and crowd alerts.

Key Takeaways:

• Simple navigation and sticky headers help users find key info quickly.
• Strong visuals and countdowns create hype and engagement.
• Accessibility tools (contrast control, alt text) are often missing and will be included in my design.

Touch targets follow Apple Human Interface Guidelines to ensure buttons and CTAs are appropriately sized (min. 44pt).

Accessibility and Mobile-First Design

To align with WCAG 2.1, the app ensures:

• High-contrast text-to-background color ratios.
• Readable font sizes (min. 16px equivalent).
• Screen reader compatibility via semantic labeling (to be implemented in dev).

The mobile-first design ensures all functionality is fully accessible without requiring desktop fallback options

User Testing & Feedback

User Testing and Feedback Implementation

To gather feedback, a low-fidelity prototype was tested by five university peers using a mobile emulator. Participants were asked to:

• Navigate the app from onboarding to artist scheduling.
• Save an artist to their custom schedule.
• Locate a venue using the map.

Findings:

Fixes Applied: Onboarding steps were condensed and given clear action buttons (“Next”, “Skip”).

Strengths: Users praised the intuitive bottom-tab navigation and cohesive color scheme.

Weaknesses: Some confusion arose over the initial onboarding steps.

Visual Identity

The site’s palette includes:

• Primary: Rock in Rio red (#E3000F) – energetic and urgent.
• Secondary: Deep navy blue – grounds the visual energy.
• Accent: White text and icons for clarity.

Icons and imagery were sourced from open-licensed festival visuals and then stylized in Figma using drop shadows and color overlays to blend with the theme.

Conclusion

The Rock in Rio website prototype demonstrates a user-centered approach, rooted in UX/UI principles and enhanced by user testing. Future iterations will include dynamic animations and improved microinteractions. The design aligns with modern web standards, ensuring both usability and aesthetic appeal.

References

Lidwell, W., Holden, K. and Butler, J., 2010. Universal Principles of Design. Revised and Updated. Rockport Publishers.

Nielsen Norman Group, 2023. 10 Usability Heuristics for User Interface Design. [online] Available at: https://www.nngroup.com/articles/ten-usability-heuristics/ [Accessed 16 Apr. 2025].

W3C, 2023. Web Content Accessibility Guidelines (WCAG) 2.1. [online] Available at: https://www.w3.org/WAI/WCAG21/quickref/ [Accessed 16 Apr. 2025].