BRANDING  |  VISUAL DESIGN  |  UX  

Buy cinema tickets, streamline and download movies

CeltiCCinema is regional movie trailer application (Dublin, Ireland). It is created to help people with lack of time to buy tickets, stream or download specific type of movie.  

DATE

____

Jun 2021 - January 2022 

ROLE

____

Visual UX Designer / Brand Designer / UX Researcher /  UX Writer 

TOOLS

____

Figma, Miro, Photoshop, Illustrator, Corel, Camtasia, MS Office

Goal and Vision

To design CeltiCCinema app that will allow users to find specific type of movie and pick a wide range of movie experiences (theatre, stream, download) depending on the people (families, friends, partners or coworkers) they want to have this experience with.

Intended Audience

I did interviews, formed empathy maps, personas and user stories to understand the users I’m designing for and their needs. A primary user group identified through research were working adults, busy students and family oriented people who don’t have time to search for the movies, movie theatres and tickets with their specific preferences.

Research

Research confirmed initial hypothesis about users, but thorough research revealed lack of good movie apps, limited range of movies and genres. Lack of time was not the only factors limiting users from finding a good movie. Accessibility options, lack of PG (Parental Guidance) choices, specific genres, projection reminders were other problems.

Interview Transcripts

Personas

User Journey Map

Mapping Neil’s user journey revealed how helpful it would be for to have access to unique CeltiCCinema features.

Competitive Audit

Competitive analysis has revealed the weaknesses and strengths of our competitors, as well as gaps and opportunities that CeltiCCinema App can use to its advantage.

Ideation

Crazy 8s

With C8s I tried to push beyond my first idea and to create various solutions for this challenge.

User Flow

Paper Drawings.

Storyboard

Before moving on to wireframes and mocks, I used ideation phase to get a feel for how many different design can arise from creating big picture and close-up storyboards while problem like this is put in front of me. 

Paper Wireframes

Drawing on paper of draft iterations of each screen ensured that the elements that made it to digital wireframes will be well prepared to address user problems and pain points. Priority for the home screen was quick and easy movie reviewing and login process to help users save time. 

Digital Wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and findings from  the user research.

Lo-Fi Prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype.  The primary user flow I connected was finding and ordering a movie, so the prototype could be used in a usability study. 

Usability Study Findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining. 

Round 1 Findings

Round 2 Findings

Affinity Diagram

Challenges

CHALLENGE 1  |


Layout, colors, typography & iconography

Early designs had relatively crowded UI, but after the usability studies, I reduced menu complexity, their distances and changed logo, colors and icon design. I added more negative space so visually impaired users have better UX on the home screen.

Before Usability Study

After Usability Study 1

After Usability Study 2

CHALLENGE 2  |


Comprehending the Data

The first usability study revealed problems with incomprehensible UI. To resolve this, I simplified all containments, made more negative space and adapted buttons for accessibility. Although younger generation understand heart icon, I changed it to STAR icon since mid age generation doesn’t connect this icon with FAVORITE determinant.

Before Usability Study 1

After Usability Study 1

CHALLENGE 3  |


What kind of reminder do you want?

In the second usability study users complained that they didn’t have an option to remind them about upcoming movie projection in case they bought tickets long before the scheduled event. That's why I added a new section with several different options in the submenu.  

Before Usability Study 1

After Usability Study 1

Other Mockups

Style Guide

Utilizing a soft natural Irish traditional flag color palette consisting of natural green and calm orange felt like the perfect fit for CelticCinema brand. The green helps evoke a relaxing feeling for users paired with the orange it creates a nice contrast between calm and energetic.  I felt this typeface Inter is the best fit for the app do to it's extreme versatility through uppercase and lowercase styling, as well as variety of different fonts.

ICONOGRAPHY  |  BUTTONS  |  MENUS  |  COMPONENTS

 COLORS |

TYPOGRAHY  |

LOGOS  |

Hi -Fi Prototype

Takeaways

The app creates feeling in users that CeltiCCinema is really adapted for movie fans and meet their needs. One quote from peer feedback: “In general, I like this application, I have everything in one place: trailers, some major info about the movie, some suggestions, all is categorized.”

While designing the CeltiCCinema app, I realized that my initial design concept was significantly different from the final prototype. Interviews, competitive audits, user feedback, analysis, and synthesis played a crucial role in shaping each iteration of my designs. Ultimately, this journey led to an age-old question: "Are we designing for the end users or all users?" While it is essential to consider both groups, my research and designs primarily focused on the first group. Nevertheless, the level of empathy I invested in each group ultimately influenced the appearance of the CeltiCCinema app.