Work
Case study
Wireframing: Designing the structure of a multimedia platform
Multimedia content
Interactive design
Navigation design
High-fidelity wireframes
Content organization
Fast mode
By using 'fast mode', you can read the case study more quickly and less time-consuming :)
What is the project about
Project Overview
This case study focuses on the creation of +MNAC Canal, a digital platform developed for the Museu Nacional d'Art de Catalunya (MNAC). The platform aims to offer users additional content about the museum's exhibitions through videos, documentation, and podcasts. The primary objective was to design a user-friendly website that encourages visitors to spend more time exploring its content, organized similarly to Netflix with infinite horizontal scrolls by categories. Additionally, the website includes a page for museum visits, showcasing activities and exhibitions with a CTA for ticket purchases, linking back to the main museum website.
My Contributions
I was responsible for understanding the project requirements, drawing the navigation tree according to the client's needs, and crafting high-fidelity wireframes after conducting a benchmark. These wireframes anticipated and detailed the interactions users would have with the platform. I also communicated directly with the client to gather feedback and ensure their vision was accurately translated into the design. Additionally, I conveyed the structure and objectives of the website to the UI Designer at Mortensen, ensuring seamless alignment between the UX and UI processes.
UX Process
What stages we followed
Read the
stage
stage
What I have learned
Solution
Due to time and budget constraints, we did not conduct a traditional card sorting exercise. Instead, we conducted a benchmark analysis of leading streaming platforms like Netflix, Prime Video, Apple TV, Disney Plus, and 3Cat. This analysis revealed essential insights into best practices for usability and user engagement, such as intuitive navigation, infinite scroll, high-quality thumbnails, robust search functionality, clear content categorization, and prominent CTAs.
Armed with these insights, I developed the navigation tree that prioritized user experience and usability. After client validation, I created high-fidelity wireframes, considering the unique nature of multimedia content and user interaction patterns.
Armed with these insights, I developed the navigation tree that prioritized user experience and usability. After client validation, I created high-fidelity wireframes, considering the unique nature of multimedia content and user interaction patterns.
Final thoughts
Building +MNAC Canal from scratch highlighted the importance of thorough planning and user-centric design. Considering user interactions in the wireframing phase allowed us to develop the product ecessary aspects in mind. The successful implementation of features like infinite scroll and clear content categories demonstrated the value of aligning the platform's structure with user expectations and industry best practices.
Process
What we have unfolden
1
Empathy
Benchmark analysis
We started with a brief from the client and conducted a benchmark analysis to identify key features and best practices from top streaming platforms. This approach allowed us to understand the standards and usability practices that would resonate best with users.
Key insights included:
- Intuitive navigation
- Personalized recommendations
- Infinite horizontal scrolls
- High-quality thumbnails
- Seamless cross-device experience
- Robust search functionality
- Clear content categorization
- Prominent CTAs
However, not all insights were directly applicable to our product due to its initial development stage and the unique context of museum-related content. For instance, while personalized recommendations are crucial for streaming platforms, our focus was more on categorizing and presenting the museum's content effectively.
When conducting research, it’s crucial to understand that not all that works in one product will fit in the one we are designing. We need to understand the needs and the context of our product first.
Benchmark analysis.
2
Define
3
Empathy
4