INTRODUCTION
In this final stage of the development process, I moved from mid-fidelity layouts to high-fidelity, fully branded user interfaces for both the Rock in Rio website and mobile companion app. This post documents the integration of final UI elements, typography, color palette, visual consistency, and accessibility best practices to ensure that the user experience is both intuitive and inclusive.
Visual Identity and Branding
Rock in Rio’s global reputation is built on high energy, iconic performances, and vibrant celebration. I used this brand personality to inform my visual design, keeping in mind how the aesthetic supports the user journey rather than distracts from it.
Key Branding Elements:
- Logo Usage: The Rock in Rio logo is used in headers and splash screens while maintaining legibility and spacing.
- Typography: I selected a bold sans-serif font (Poppins) for headers to reflect modernity and energy, paired with Open Sans for body text to maximize readability across devices.
- Color Scheme: A lively red (#E50914), deep black, and subtle grey gradients were used to echo the dynamic feel of music festivals while maintaining strong visual contrast for accessibility.
Website Visual Layout & Features
The website has been finalized with a responsive design optimized for both desktop and mobile. Key visual improvements:
- Hero Banner with Call-to-Action: The homepage now features a large-scale hero image with a “Buy Tickets” CTA and smooth scroll interaction.
- Lineup Section: Each artist tile includes an image, genre, and link to detailed performance info.
- Sticky Navigation Bar: A persistent nav bar helps guide users through tickets, lineup, location, and contact sections.
- Footer with Social Integration: Integrated Instagram, Facebook, and X icons for community engagement.
I maintained a 12-column grid layout for consistency and responsiveness across breakpoints.
Mobile App Final Visuals
The Rock in Rio app provides quick access to schedules, maps, artist profiles, and a personalized festival planner.
Final App Features:
- Onboarding Screens: Animated onboarding introduces app functionality and allows user customization.
- Tabbed Navigation: Home, Schedule, Artists, and Map tabs provide quick access to features.
- Schedule Interaction: Users can tap an artist and “Add to My Schedule,” with confirmation feedback.
- Map Page: Custom icons represent food stalls, stages, and restrooms in a simplified visual layout.
Animations were added in Figma to demonstrate screen transitions and button feedback (microinteractions).
Accessibility & Inclusive Design
Accessibility was a core focus throughout the design process:
- Color Contrast: All text passed WCAG AA minimum contrast ratio standards (4.5:1).
- Text Hierarchy: Consistent use of H1-H3 ensures screen reader compatibility.
- Touch Targets: Buttons and interactive elements meet minimum size guidelines (44px).
- Alt Text & ARIA Labels: Implemented in Figma notes and documented for dev handoff.
Following guidelines from W3C and Google Material Design helped ensure that all users, including those with impairments, can access the content effectively.
UI/UX Design Principles in Final Execution
This final stage pulled together multiple key UX/UI concepts taught in the module:
- Consistency and Standards: Repeated UI elements (e.g., buttons, nav tabs) follow visual and functional consistency.
- Aesthetic & Minimalist Design: Visual clutter was reduced in favor of clear, scannable interfaces.
- Recognition Over Recall: Icons and labels simplify navigation, especially on mobile.
- Affordance: Buttons and interactive cards were designed to clearly indicate that they are clickable.
References
- W3C. (2023). Web Content Accessibility Guidelines (WCAG) 2.1. Available at: https://www.w3.org/WAI/WCAG21/
- Google (2023). Material Design Guidelines. [Online] Available at: https://m3.material.io
- Lidwell, W., Holden, K., & Butler, J. (2010). Universal Principles of Design. Rockport Publishers.
- Krug, S. (2014). Don’t Make Me Think, Revisited. New Riders.
- Nielsen, J. (1995). 10 Usability Heuristics. NNGroup. Available at: https://www.nngroup.com/articles/ten-usability-heuristics/
Conclusion
With all pages built in Figma and informed by user feedback, visual design best practices, and accessibility standards, the Rock in Rio website and app are now fully conceptualized. This process emphasized how great design isn’t just about how something looks — it’s about how well it works for real users. Every decision made in this final phase supports the festival’s goal of delivering a world-class experience through digital platforms.
