THE PROBLEM
Cinema websites tend to have a very cluttered interface, or don't provide enough information about the movies. They also often lack interactivity.
THE SOLUTION
Design a user-friendly website with clear navigation and an uncluttered interface, that puts movies front and center. Offer an easy way to book tickets online. Add the possibility to share movies with friends within the website to increase interactivity.
RESEARCH
In order to understand the issue and challenge my assumptions, I reached out to 7 people in my network who went to the cinema at least twice a year to talk about their habits, troubles, and needs regarding the topic. I chose people of varied ages and genders, both city-dwellers and people from the countryside. 2 described themselves as movie fanatics, the rest were more casual movie-goers.
​
​
The findings:
​
Unclear interface. All of them expressed their frustration with the cinema websites that they usually visit, either because the information is minimal or because the design is too cluttered. This sometimes leads them to give up.
​
Social element. Most of them confirmed that a recommendation from a trusted friend or family member is the strongest motivation to go see a movie. They also enjoy sharing their likes and dislikes with said friends and family members in return.
​
Choosing isn't always easy. When having to choose a movie in the absence of a recommendation, most of them explained they rely on trailers and on the cast's popularity to make their decision.
​
​
Thanks to these insights, I created a persona:
MIRANDA
GOALS
To discover movies both mainstream and unknown
To share their passion with their like-minded group of friends
FRUSTRATIONS
Finding movies and screen times, and sharing them with friends requires several different apps/sites
Remembering one's watchlist can be difficult
Since Miranda retired from their stressful job at a high-end parisian restaurant, they like to spent their time enjoying the cultural life of the city. In particular, they love to go to the cinema with their friends to discover hidden gems from all over the world. But they sometimes have a hard time tracking what movies they liked and disliked, which ones they can recommend and for which reasons.
Age: 66
Hometown: Paris, FR
Family: Married, 2 adult children
Occupation: Retired
Miranda is a retiree and movie-lover with a large group of friends who needs to share their likes and dislikes with them because they love to have interesting conversations about movies.
In light of this information and with the help of the persona, the main takeaways are:
​
Clarity. A clear, straightforward interface with easily accessible information is the priority.
​
Interactivity. The site should allow users to easily make recommendations, rate movies, and find movies to watch based on their tastes.
​
Reminders. The people going most frequently to the cinema also expressed a wish to receive reminders for release dates, which would help them keep track of the movies they are waiting to see.
WIREFRAMING
With research done, I first planned the site map for the website. I added interactive elements such as the "feed" displaying friends' activity and recommendations, but still kept the focus of the website on movies and screen times.
Next, I sketched several versions of the homepage on paper, then transitioned to digital wireframes, keeping user pain points in mind. The aim was to create an interface as clean and straightforward as possible, while keeping it visually pleasing and engaging.
I prioritized simple navigation with only the four main categories visible, the rest being hidden in the side menu.
USER TESTING
With the low-fidelity prototype, I conducted moderated usability studies with 5 participants, 3 on-site and 2 remote.
​
Here are the findings:
​
Accessibility. Accessibility information about movies and the cinema itself wasn't prominent enough.
​
Booking. Having to click on a chosen showtime in order to book a ticket wasn't obvious enough to users.
​
Missing information. In the "coming soon" section, users wanted to know the release date of the movies.
MOCKUPS
When transitioning to high-fidelity, I decided to entirely rework the home page to present the three main menus on the same page, letting movie posters speak for themselves. I also included a very large hero image that shrinks up when the user scrolls down the page, to give a welcoming, cosy feel.
Before
After
Thanks to insight from usability studies, I simplified the date selection and filtering system, I moved the showtimes at the bottom to give more space to the interactive elements, and I added the “book your ticket” mention to make it more clear.
Before
After
STYLE GUIDE
Main colors
#FFFFFF
#141414
Secondary colors
#E00912
#595959
Typeface
I chose to use the same color scheme as Netflix to give users a familiar feel. The dark background and red accents also create a muted and cozy atmosphere reminiscent of cinema theaters. The Due Credit typeface used for titles is a nod to the typeface typically used for the credits at the bottom of movie posters. Open Sans is used for the rest of the text as it is a highly legible typeface with a neutral appearance.
CONCLUSION
Final usability studies showed that users found the visual design pleasant and the site easy to navigate. Users enjoyed the "reminders" option and wished to see it implemented more broadly in cinema websites in general.
WHAT I LEARNED
I learned to use Adobe XD, and that images and visuals have a huge impact on users’ enjoyment of a website.
I created a logo for the first time.
I also learned that wanting to simplify a process by reducing the number of pages isn’t always the best solution as it can create confusion or the feeling of having missed a step in users' mind.
NEXT STEPS
Conduct additional research to determine if users would prefer to book a specific seat or not.
Add a snack menu and the option to buy snacks upfront while booking a ticket.
Provide the possibility to buy tickets in batches at a discounted price for large groups of people, such as schools, clubs, or organizations of any kind.
