Wanting to form a deeper understanding of users' goals, needs, experiences, and behaviours, I selected two personas from a variety of possible choices provided by the course because they seemed like the most likely users of an app like Cinerama. I used these personas whenever I wanted to step out of my perspective and eliminate any potential bias.

Both personas have pain points that an app like Cinerama can provide solutions to, and I made sure that any iteration made on the design didn't stray from these solutions.

Megan is a working mother who needs a quick and simple way to watch trailers of movies she would enjoy before booking because she doesn’t have enough time to spend on researching and browsing.

If Megan uses the Cinerama app, she will have more free time in her hands because the app comes with an advanced filter to help her find movies she will enjoy in a timely manner, and it will also recommend her movies based on those she has favourited in the past.

Joseph is a full-time student, who recently migrated from Kenya, who needs a movie app with more accessibility options because there’s a struggle to understand movie trailers and info without captions and translated text.

Cinerama’s video player has all the playback options that most modern players have, and most important for Joseph, captions. It also has a language option in the settings to change the language across the app.

I began the design process with low-fidelity sketches and wireframes to accelerate decision-making through visualisation without losing time. My sketches included all the basic elements and functions, such as:

- Navigation

- Search bar

- Images/Video carousels

- Text

- CTAs

- Filters

However, as the sketches were transferred to Figma and started to take shape and colour, the order and placement of elements changed, therefore erasing the need for carousels.

Using Figma, I translated my first sketches into low-fidelity wireframes. At this stage, the wireframes were defined enough for some user testing.

Based on two tests, I’ve made a few alternations and then a second round of testing before I moved on to creating high-fidelity prototypes.

I created a fully-functional, low-fidelity prototype and recruited five test subjects for the test, all of whom were regular moviegoers. I did 4 usability tests in the first round and 3 after iterating on the issues that I identified:

Users wanted the option of going from the homepage to a page where they could choose a movie, then proceed to booking tickets without having to watch a trailer. They also wanted the option of booking tickets from the individual movie info pages without having to watch a trailer first.

The CTA was added to both the homepage and the movie info page.

Users felt the payment process required an option to have a saved payment method that could be selected if required to save them time from having to add their card details again or to connect to a third-party like PayPal.

Additional payment methods can be added and saved in the account settings.

Users wanted the option of selecting a month in the first step of the booking tickets journey.

What was being tested was a low-fidelity prototype, so I hadn't fleshed out the booking journey to include future months, as the test was meant to show how simple/confusing users found the booking journey. Still, I added the option of selecting months in the next iteration.

Once the usability issues were resolved, I moved on to design the final screens in Figma. My goal was to create a dark, minimalistic, and contemporary aesthetic, with CTAs that stood out and vibrant visuals. I took some inspiration from IMDb, which I regularly visit (I'm a cinephile, if "movie freak" is too strong a word), but IMDb is a vault of information and media that can be overwhelming.

I initiated the initial wireframes on mobile iOS, as it's a device that rarely leaves my hands, but I do intend to adapt the design for Android, too. Currently, I'm using Adobe Xd to transfer the design to desktop and tablet, so I'll be updating this case study once I'm happy with the design and have carried out at least two users tests on lo-fi prototypes and one hi-fi prototype.

Irrespective of device and software, I will adhere to the same accessibility considerations as I did for the iOS prototype exhibited here.

I created a fully-functional, high-fidelity prototype of the new flows using Figma. I used the same users in the prototype testing as in the low-fidelity tests.

This was a bit confusing to the 3 out of 5 users, as TICKETS could be easily misinterpreted as the destination to book movie tickets.

This was then renamed to MY BOOKINGS.

With the final iterations solidified, I was able to move forward with drawing out the sitemap, which I also used as a base structure for the website layout on desktop and mobile.

Two out of five users suggested a feature of student, underage and senior tickets in the booking system.

This was my first UX Design project, and so it's rather special to me. Every step of this journey was eye-opening and has allowed me to really appreciate the time and effort that goes into designing an app (and I've yet to experience what it's like to build one). UX Design was a discipline I became aware of back in 2018, but I never thought of myself creative enough to be any good at it. It took me a few years to take this step, and I'm glad I did, because it was the step in the right direction with some strong foundations. UX combines elements of data analysis, problem solving and design, and I can't wait to take the next step into more serious territory and test how strong these foundations are.

Want to work with me? Feel free to contact me.

Or just say hello on my social media.