Cinemate
Responsive Website
Project overview
Cinemate now has a responsive website, so that users can quickly find a movie and book a seat, even if they don't have an app installed. Fortunately, the website includes the same features as the app! :D
I worked on this project by myself from December 2022 to January 2023 while taking the Google course for UX design. I was responsible for conducting interviews and surveys, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility and iterating on designs.
The problem
Adolescents and adults complain that most of the apps or websites for seat reservations are not appealing and sometimes are confusing.
Goals
Design a responsive website that:
-
is intuitive
-
helps the user
-
looks more appealing than existing websites
-
has as many features as the native app
I conducted one usability study, based on the initial designs, using a low-fidelity prototype. This was an unmoderated usability study involving 5 users that were a part of my target audience (teens and young adults who go to the cinema at least once a month).
The study revealed that when choosing the movie schedule, users needed an option to select the date, that the navigation bar had a confusing structure and that, in the mobile version, the offers were actually a little hidden from the users.
Research
Main challenge
Limited research: similar to the Cinemate app, although I conducted interviews and surveys to understand users' needs, there may be a larger audience of movie-goers who have different preferences or pain points that I didn't get to explore.
Wireframes
In the initial design phase I based my design decisions on feedback and findings from user research.
Select the date
Based on the feedback received, adding the date and a button to change it seemed one of the top priorities.
Navigation Bar
Another nº1 priority was making the navigation bar intuitive for the users. At first the navigation bar buttons changed in order to display a "HOME" button. After the usability study I learnt that it was very confusing, so I decided to stick with the same buttons on every page and leave the Logo as a button for returning to the Home Page.
Dark theme
Just like in the mobile app, the dark theme was considered a better option, since it would give more of a cinema vibe and a continuity from the app to the website, keeping its branding.
Size variations
I included some considerations of additional screen sizes in my mockups. Since users shop from a variety of devices, I felt it was important to optimize the browsing experience for a range of devices, such as mobile and tablet.
Results
The target users shared that the website was very intuitive to navigate and that the questionnaire could be really helpful.
Quote from user feedback:
“It looks great and I feel like it’s very easy to navigate. Good job!”
What I learned
While designing the Cinemate website I learned that even a small change can have a big impact on the user’s experience. The main takeaway for me is that focusing on the user will always make the design work more efficient and that there’s no such a thing as a crazy idea. :D
Next steps
-
If possible, conduct follow-up usability testing on the website
-
Identify any additional areas of need and ideate on new or improved features