Back
A school project that focused on bringing in better user interactions to any type of user experience. Focusing on Cineplex, I tackled the challenge of introducing motion graphics on their original static page. This project in particular allowed me to expand my skills using After Effects and learn the importance of motion design principles.
The Cineplex website originally lacked a dynamic flow with very little motion design, making the user experience quite dull, static and unengaging. This is particularly true when searching for movies, theatres and purchasing tickets. As a brand that emphasizes grand, escape-like experiences, I found it important to reflect that ideal digitally.
As an entertainment center, I wanted to emphasize 3 main experiences:
I analyzed the existing issues on the website by exploring the design choices and user experience. Once I had identified the issues, I sketched out potential animation ideas that could solve the lack of dynamic flow on the site.
When sketching, I experimented with various animations and designs to guarantee the best user interactions. Ultimately, simple and subtle animations were what I found to be the most effective methods of translating a better user flow and experience on the website.
.png)
With my hopes to focus on 3 main experiences (searching, choosing and purchasing), I decided on these three animations and created storyboards for each of them to see how they would animate as final products. While making the animations, I referred back to basic motion design principles like easing, offset, overlay, parallax, etc.
When searching, users can interchangeably switch between searching for a theatre or searching for a movie.
Respectively, after choosing a movie, showtimes appear as blocks that become visible based on selection.
Lastly, to mimic real interactive experiences users engage in at a theatre, tickets “print-out” on screen as they would in reality, allowing users to bring digital copy of ticket to scan (rather than reprinting at theatre). I created two different versions of the ticket - one displaying familiarity with old printed tickets and one that takes a newer approach on the appearance of future tickets.
.gif)
