following the website design for Rock in Rio, the companion mobile app is specifically tailored for festivalgoers on-site. While the website handles planning and information discovery before the event, the app supports real-time needs during the festival—navigation, scheduling, notifications, and updates. This post details the development of the app prototype using UX and UI principles and insights from user feedback.

Purpose of the App

The app serves four key purposes:

• Real-time schedule management
• Interactive stage and map navigation
• Emergency announcements and alerts
• Seamless user onboarding and accessibility features

User Personas

• Festivalgoer Maria (23, first-time visitor): Needs directions and artist info.
• Regular attendee Lucas (29): Wants personalized schedule and alerts.
• Accessibility user Jamie (31): Needs large fonts and audio cues.

These personas guided design considerations such as font sizing, visual cues, and voice-over compatibility.

Low-Fidelity Sketches

Initial paper wireframes were created to brainstorm screen flows. These included:

• Splash and onboarding screens
• Main dashboard (featuring Lineup, Map, Alerts, Account)
• Artist profile with video previews and schedule

<!– Insert scanned sketch of mobile wireframes –>

Visual Style & Moodboard

Inspired by the website’s style, the app design includes:

• Colour palette: Dark mode with high-contrast neons (electric blue, red, yellow)
• Typography: Montserrat Bold for headings, Inter Regular for body text
• Iconography: Line-based, minimal for clarity

<!– Insert moodboard or visual style image –>

Figma App Prototype

<!– Insert image of mobile Figma artboard –>

The prototype was created in Figma and features:

• Interactive homepage with daily lineups
• Real-time push notifications
• QR ticket integration
• Map zoom and filtering by location and amenities

Usability Testing & Feedback

5 users tested the interactive prototype using Figma on mobile. Insights included:

• “Love the schedule view, but want a ‘My Artists’ feature.”
• “Add more contrast in dark mode.”
• “Navigation buttons were too small.”

Based on this, we increased the icon size, added favourites for lineups, and boosted contrast ratios.

UX/UI Principles Applied

• Fitts’s Law: Increased button and nav sizes to improve mobile interaction.
• Gestalt Principle – Proximity: Grouped related functions, such as maps and location filters.
• Jakob’s Law: Aligned interaction patterns with common app structures for familiarity.

Accessibility Considerations

• VoiceOver tested on iOS
• Colour contrast validated with WCAG tools
• Font scaling enabled via user settings

References

Garrett, J.J. (2010) The elements of user experience: user-centered design for the web and beyond. 2nd edn. Berkeley, CA: New Riders.
Norman, D.A. (2013) The design of everyday things. Revised and expanded edition. New York: Basic Books.
WebAIM (2021) ‘Contrast Checker’. Available at: https://webaim.org/resources/contrastchecker/