UX + UI
Personal project: Redesign of Filmoteca's website (& app creation) design for my Product Design course
Filmoteca is a lovely cultural project of Barcelona; primarily it's a modern cinema showing classic films from around the world. The building also contains an exhibition space, a library and a bookshop. It's placed in Raval, in the multi-cultural heart of Barcelona.
The concept is beautiful but the website is outdated (see above). So I decided to do a redesign: to improve the aesthetic aspect as well as the overall user journery. It's website / app should serve as a platform: their users want to find out about the latest films, to buy tickets, to like, to share films and to return on a regular basis.
Who are the clients and what are their expectations?
- Any age group, gender or culture. Primarily for citizens of Barcelona. To have easy access to the latest films and to plan a visit.
How will the user navigate on desktop and mobile?
- The desktop version will put more emphasis on displaying the trailers in great quality.
The mobile verison helps returning users (app) to create a profile, keep a history of liked and watched films, to save tickets etc.
To start the design process I began with drawing the user journey in sketches. It helped with the idea process by understanding how the user will navigate through the site and define the purpose of the experience.
After some brainstorming, I began with the homepage and created wireframes for 8 design ideas; for desktop and mobile. On arrival, the user can instantly browse Filmoteca's latest films. Some designs put more emphasis on individual films, others on a wide selection or a mixture of both. All designs include the option to view the timetable, to like, to share and to purchase tickets.
Icons play a crucial role in cutting down content and visually stimulating the user to engage with the website.
Finally I used these icons to communicate: to purchase tickets (also indicates how many tickets were bought), to like and save films and to share films or recommendations with friends.
I designed the above icons with these categories in mind: purchasing tickets, preordering snacks, view map and view calendar.
Final outcome of 8 design ideas for the filmoteca website:
1st approach: highlighting one film at the top and displaying many films as thumbnails below. The icons indicate the user's interaction with the page.
In this case, the user liked, shared and bought tickets for Zerkalo. Showtime is at 22:30.
In the mobile version I experimented with the icons, the thickness of the fonts and shades of colours for the icons and showtime.
this design distributes text and images equally and gives emphasis on timetables and film description.
this design puts the emphasis on varied layout and timetables with lots of breathing space.
similar to the previous, yet cleaner and more emphasis on the films than times.
This design takes a different approach: here the focus lies on one film at a time with the fullscreen view, giving the viewer all the details of the film at a glance.
This design is similar to the previous, with the difference of thumbnail image preview of other films.
Here we have a mixture of fullscreen preview and details with thumbnail suggestions at the buttom.
Last but not least a pure thumbnail preview selection of all filmes simultaneously.
Further stages of the website / app will be uploaded in the future.