Filmhagen Cinema
As part of my journey towards earning the Google UX Professional certificate, I embarked on a purposeful project that revolved around the development of an imaginative website for Filmhagen, a fictional cinema situated in Copenhagen, Denmark. Although Filmhagen exists only in the realm of our creative minds, it portrays an older cinema with a single screen, grappling with fierce competition from established cinema chains within the city.
KEYWORDS: research, benchmarking, personas, ideation, adobe xd, wireframes, usability study, design refining, mockups, sitemap, responsive web
Project Overview
My Role
Ux designer who develops a new app from the beginning to delivery
Responsibilities:
Desk research, conducting interviews, paper and digital wireframing, low and high prototype, conducting usability tests, iterating on design
About Project
During the Filmhagen website project, I conducted extensive desk research and interviews to gather insights on cinema website design.
Using wireframing techniques, I created low-fidelity prototypes refined through user feedback and usability testing. Transforming them into high-fidelity prototypes, I focused on aesthetics and interaction design.
Through iteration and user-centricity, I aimed to create a seamless user experience, showcasing my expertise in the UX journey.
Challenge
The Problem
Cinema enthusiasts desire a hassle-free experience, devoid of time spent queuing for ticket purchases
The Goal
To create a cutting-edge cinema website that provides seamless access to information and enables convenient ticket purchases and seat reservations
The Research
About
Through conducting interviews and creating an empathy map, I gained valuable insights into the needs of our primary user group: young individuals who prioritize simplicity and efficiency in achieving their goals.
The feedback I received emphasized the importance of a straightforward registration process and a streamlined user journey towards their desired outcomes. Additionally, this user segment expressed a desire for enhanced engagement from the service provider, such as receiving discounts and exclusive offers.
Based on these findings, I am committed to developing a user-friendly website that caters to the preferences of our target audience. My goal is to create a seamless experience that not only meets their needs but also provides them with valuable incentives along the way.
User Research: Pain Points
1
Efficiency is of paramount importance to young users, who prefer to achieve their goals swiftly without spending excessive time within the application
2
Capturing and maintaining the attention of young users can be challenging for applications, as their focus tends to be fleeting
3
Designing the website with accessibility in mind not only benefits individuals with visual impairments but also enhances usability for everyone, ensuring a user-friendly experience for all
Persona
Problem statement:
“Paul is a student who needs quick and easy online registration and purchase of seats in the cinema because the complexity makes him lose focus and interest when buying secondary things.”
Quote:
“If Paul uses a simple, fast and direct shopping application, then he will decide to buy the product.”
User journey map
Problem statement:
“Paul is a student who needs quick and easy online registration and purchase of seats in the cinema because the complexity makes him lose focus and interest when buying secondary things.”
Quote:
“If Paul uses a simple, fast and direct shopping application, then he will decide to buy the product.”
Starting the Design
Starting the design process with a sitemap is crucial for organizing the structure and hierarchy of a website or application. It provides a bird’s-eye view of the content and navigation flow.
Once the sitemap is ready, the next step is to create paper wireframes, sketching out rough layouts and interactions. These hand-drawn sketches help visualize the initial design concepts.
Then, digital wireframes are created using design software, refining the layout and adding more detail. After that, a low-fidelity prototype is developed, demonstrating basic functionality and user flow. This prototype allows for early testing and feedback.
Finally, usability studies are conducted to gather user insights and refine the design further. This iterative process ensures a user-centered and well-structured end product.
Sitemap
With a well-designed sitemap, our focus is to create an intuitive infrastructure that seamlessly guides users from movie selection to ticket purchase.
By structuring the navigation flow and optimizing the user experience, we aim to facilitate a smooth and straightforward journey, ensuring a seamless transition from clicking on a movie to completing the ticket-buying process.
Paper Wireframes
To explore various design possibilities, I engaged in a creative process using paper sketches.
Iterating through numerous ideas, I crafted a range of distinct designs. From this diverse pool, I carefully handpicked components that perfectly aligned with the project’s objectives. By leveraging this thoughtful selection, I ensured that the chosen elements harmoniously blend together, creating a cohesive and compelling user experience.
This meticulous approach allowed me to merge creativity with practicality, incorporating the most suitable design elements into the final product.
Digital Wireframes
Transitioning from paper sketches to the digital realm empowered me to refine and fine-tune the design process.
With digital tools at my disposal, I meticulously positioned each element, carefully considering their placement within the homepage infrastructure.
The goal was to create a user-friendly interface that facilitates quick ticket purchases while also providing swift access to vital information about movies and show times. By leveraging the capabilities of digital design, I ensured a seamless and intuitive user experience, enabling users to effortlessly navigate, make informed decisions, and swiftly complete their desired actions.
This transition from paper to digital not only enhanced efficiency but also empowered me to craft a visually captivating and functional interface that meets the project’s objectives
Low-Fidelity Prototype
With meticulous attention to detail, I linked pages to establish a seamless ticket purchase flow.
Each step, from movie selection to date and ticket type, was orchestrated for a direct route. Smooth transitions and careful integration create a frictionless experience.
User-centric design ensures hassle-free navigation, securing desired tickets with ease.
Link and Usability Task
Link: Explore wireframe
Task: Reserve a seat and buy one adult ticket for any movie
Link and Usability Task
Study type: Moderated usability study
Location: Denmark, in person
Participants: 5 participants
Length: 15 minutes
Usability Study: Findings
1
Homepage filter buttons: large, unattractive, impractical. Need improvement for better aesthetics and usability
2
Ticket & seat selection page: Everything oversized, detracting from user experience. Urgent need to resize elements for improved usability and aesthetics
Refining the
App Design
About
After conducting a usability test, valuable insights were gained. To refine the design, necessary adjustments will be made based on user feedback. This iterative process aims to enhance usability, optimize visual elements, and improve overall user experience, ensuring a more intuitive and satisfying interaction with the product.
Finding 1
Participant quote:
” The buttons are really too big, they take up half of my screen”
Solution:
I took the initiative to enhance the user experience on our homepage, particularly for users with large screens. In order to optimize the layout, I carefully addressed the issue of oversized buttons. Employing a refined approach, I meticulously reduced the size of the buttons, ensuring they are now more visually balanced and proportionate.
To further enhance the aesthetic appeal and usability, I introduced a thoughtful padding on either side of the buttons. This strategically added spacing not only provides a more visually pleasing arrangement, but also offers a sense of clarity and distinction between the different elements on the page.
In my pursuit of creating an intuitive and engaging browsing experience, I took a step further and intelligently grouped the buttons towards the middle of the page. By consolidating them in this central location, users can now effortlessly navigate through the options and find the desired actions without any distractions or visual overload.
Finding 2
Participant quote:
” This is so wide and big”
Solution:
I took great care to refine the selection design on our website, acknowledging the previous challenges of it being too big and cumbersome. With the user’s experience at the forefront of my mind, I endeavored to create a more streamlined and elegant solution.
I focused on harmonizing the elements by positioning them in a consistent and cohesive manner. By aligning everything in the same place, users can now easily establish a mental map of the page, reducing any confusion and promoting a sense of familiarity
High-Fidelity Prototype
About
Hi-Fi prototype is meticulously refined based on the invaluable insights gathered from our usability study.
With every user interaction in mind, I’ve incorporated meaningful changes to enhance the overall experience. From subtle tweaks to impactful improvements, our Hi-Fi prototype now exemplifies a seamless and user-centric flow, offering a delightful journey that aligns perfectly with user expectations.
Get ready to experience an interface that not only looks visually stunning but also effortlessly guides you towards your goals.
Hi-Fi Desktop
Prototype
Hi-Fi Mobile
Prototype
Mockups
About
After conducting a usability test, valuable insights were gained. To refine the design, necessary adjustments will be made based on user feedback. This iterative process aims to enhance usability, optimize visual elements, and improve overall user experience, ensuring a more intuitive and satisfying interaction with the product.
Desktop
Mockup
Mobile Mockup
Conclusion
In conclusion, the Filmhagen website project showcased my comprehensive skills as a UX professional.
Through diligent research, interviews, and benchmarking, I gained valuable insights into cinema website design.
I effectively utilized wireframing techniques to create low-fidelity prototypes, refining them based on user feedback and usability testing. The transformation into high-fidelity prototypes focused on aesthetics and interaction design, resulting in a seamless user experience.
The iterative process and user-centric approach ensured the delivery of a well-designed website for Filmhagen, demonstrating my expertise in the end-to-end UX journey.
Other Projects
Reach Out to Begin a Creative Journey
Don’t hesitate to reach out—I’m just a click away. Let’s connect and make great things happen!