introduction
With visual identity and layout structures defined, the next stage of the design process focused on developing mid-fidelity prototypes for both the Rock in Rio website and mobile app. This post covers how I created mid-fidelity wireframes in Figma, integrated interactive functionality, and most importantly, gathered and applied user feedback to improve the design according to UX and UI principles.
What Are Mid-Fidelity Prototypes?
Mid-fidelity prototypes bridge the gap between static wireframes and final high-fidelity designs. These versions emphasize:
- Layout structure
- Functional flow
- Core user tasks
They intentionally exclude detailed visuals (like full images or final fonts), allowing stakeholders to focus on usability and navigation, rather than visual styling.
Prototyping Process in Figma
Using Figma’s prototyping tools, I connected the mid-fidelity screens to simulate real user interactions, focusing on:
For the Website:
- Navigation between homepage, lineup, tickets, and contact.
- Scrollable homepage with CTA buttons (“Buy Tickets”, “See Lineup”).
- Hover states on menu items.
For the Mobile App:
- Bottom tab navigation: Home, Schedule, Map, Artists.
- “Add to Schedule” buttons for performances.
- Clickable onboarding flow for new users.
Interactive links were added to test journeys like finding artist info, planning a schedule, and purchasing tickets.
User Testing and Feedback
To gain actionable insights, I conducted quick user tests with five peers, asking them to complete the following tasks:
- Find the Rock in Rio lineup on the website
- Add a performance to their schedule in the app
- Navigate the map feature in the app
- Access ticket options and select a pass
Feedback Summary
| Feedback | Action Taken |
|---|---|
| Website navigation bar was “too small” on desktop | Increased font size and padding on nav links |
| Users struggled to find artist profiles | Added visual cues and icons for interactivity |
| App schedule page “too cramped” | Increased spacing and used a card layout |
| Map was confusing to use | Replaced with a simplified version using icons and labels |
| Onboarding screens scrolled too quickly | Extended screen timer and added progress dots |
Design Revisions Based on Feedback
Several design changes were made after testing:
- Website Navigation: The navbar was repositioned and enlarged for better accessibility. Sticky behavior was added for easier navigation.
- Artist Info Access: Clicking on artist names now leads to a full bio page with social media and scheduled performance time.
- App Schedule View: Shifted from list view to card-based grid layout, making it easier to see multiple artists at once.
- Onboarding Flow: Refined with progressive screen indicators and a slower transition speed to reduce cognitive load.
All changes were made with the UX design principles of discoverability, clarity, and user control in mind (Lidwell et al., 2010).
UX and UI Principles in Action
- Usability Heuristics (Nielsen, 1995): Visibility of system status was enhanced through hover states, visual cues, and simplified layouts.
- Feedback Loops: “Add to Schedule” now shows a visual checkmark confirmation.
- Consistency and Standards: Standard icons and layouts reduce cognitive friction.
- Mobile First: Designs were optimized at 375px before expanding to desktop sizes.
References
- Nielsen, J. (1995). 10 Usability Heuristics for User Interface Design. NNGroup. Available at: https://www.nngroup.com/articles/ten-usability-heuristics/
- Lidwell, W., Holden, K., & Butler, J. (2010). Universal Principles of Design. Rockport.
- Krug, S. (2014). Don’t Make Me Think, Revisited. New Riders.
- Google (2023). Material Design Guidelines. [Online] Available at: https://m3.material.io
Conclusion
This prototyping stage was essential for refining the UX before moving into high-fidelity visuals. Feedback-driven improvements ensured a more user-centered design, reducing usability issues and increasing intuitive navigation. Both the website and app now provide a more seamless journey for Rock in Rio attendees, grounded in solid UX principles.
