top of page

INDEPENDENT MOVIE THEATRE APP

This project involved creating a brand new movie theatre / art-house cinema app, offering movie trailers, networking options and possibility to buy tickets online. For all movie lovers and especially those who appreciate independent cinema.

CHALLENGES:

  • Create an app for a movie theatre with fluid user experience and visual language for carefree browsing and ticket purchasing.

  • Create an app with consistent brand flow and ability to retain long-term customer loyalty.

  • Create an app to also act as a networking and educational tool for movie lovers.

ROLE:

Product Designer

RESPONSIBILITIES:

Product Strategy, User Research, Interaction, Visual design, Prototyping & Testing

DURATION:

2021

Project 01

PROJECT BACKGROUND

Film lovers and enthusiasts have opened a brand new independent movie cinema in Riga. Now they are in need of an appealing app that can provide a seamless user experience while browsing movie trailers and easy to use customer service for ticket purchasing. One important requirement from the client was good design that reflects film festival aesthetics, without compromising the very basics of the Jakob's Law considerations, that is – users prefer websites to work the same way as all the other sites they already know.

KICKOFF AND OVERALL PROCESS

Upon receiving the brief, I realised that it is too vague and there are too many unanswered questions and complexities involved. Therefore, to better understand our research goals and user needs, as well as challenge my own assumptions, I deconstructed the given assignment into tangible subproblems:

Place: Is this cinema suited for all movie lovers, even those who are used to large all-in-one theatres?

1.

Art and design: What does it mean to have a good design? How does it look like?

4.

Content: Why do viewers choose the movies they choose? What defines the differences?

2.

Convenience: The how, where and when of ticket purchasing and check-out process.

5.

Community: How is it built? What topics are film lovers interested in? Production, editing, screenwriting, actors?

3.

Not just a cinema: How the cinema can be used for other events, such as children's activities.

6.

As with most projects, I based my overall work on the design thinking framework: empathise, define, ideate, prototype and test. After conducting interviews (five film theatre customers), I created empathy maps which were further used for the affinity mapping process. All information gathered from the research was later defined by creating personas. Ideation process and prototype testing were also important milestones of the project.

USER RESEARCH

The project included three research phases:

 

  1. First, the foundation research, including primary and secondary studies, was conducted to understand user needs and the cinema industry specifics in general.

  2. The second – design research was conducted to test the low-fidelity prototypes and design system suitability.

  3. The final post-launch research included usability study and A/B testing using final designs for desktop and mobile screens. 

I identified two main user groups: active adult professionals and students with available disposable income who see film as artwork, not only entertainment (typical Hollywood blockbusters or television melodramas). They choose a more independent lifestyle and view art as a part of the conversation regarding all sides of life.

Affinity Map.png

PERSONA EMPATHY MAP

CUSTOMER JOURNEY MAP

Creating a quick customer journey map was important to understand and visualize the story of the customer's experiences with the product across all touchpoints. What actions are necessary and what tasks are performed? How does the user feel performing each task? What improvements are needed and what opportunities exist for better user experience?

Customer journey map.png

USER PERSONAS

After gaining necessary insights from the research, I created personas, whose goals and characteristics represent the needs of a larger group of users. The primary user group identified were students and professionals who are interested in film and media in general. The second user group were also educated students and adults, but with less interest in arts.

James.png
Sarah persona.png
User Story James movies.png
Problem statement James_movies.png
Goal statement_John.png
02.png

During the ideation process I used several methods to generate ideas and solutions for various stages of the website. Brainstorming, Worst possible idea and the Crazy eights method helped me with marketing and communication aspects of the product.

CRAZY EIGHTS

Crazy Eights.png

STORYBOARDS

To better understand and explore the user's experience with the product, I created big-picture and close-up storyboards. The big-picture storyboard focused on questions how and why users will use the product. In the close-up storyboard I focused on the product instead of on the user experiencing the product.

Storyboard1.jpeg

Close-up storyboard

Storyboard2.jpeg

Big-picture storyboard

USER FLOW

User flow.png

SITEMAP AND INFORMATION ARCHITECTURE

Another milestone in the prototype stage of the design thinking process was establishing more user-centered  information architecture as well as a more content-centered sitemap.

I created the sitemap to see how all pages in the website are organized in a hierarchical manner, while information architecture was useful to understand how, where and from where users interact with the content – what is their mental model (what they already know) and what will be their cognitive load (how much information they are handling at once) when browsing the website. I focused on creating information that is accessible, findable and usable.

Sitemap.png

DIGITAL LOW-FIDELITY WIREFRAMES

Another step forward in the prototype stage of the design process was the creation of low fidelity wireframes. With user flow and sitemap in my hands, I wanted to understand and test the basic visual structure of each view. I started with hand-drawn sketches and later moved to digital tools.

low-fidelity wireframes.png
sketching.jpeg
wireframes.png

FINAL MOCKUPS

Movie Mockup_inside.png
ipad film.png

ACCESSIBILITY CONSIDERATIONS

Along the way I followed the Web Content Accessibility Guidelines and made sure I design in a way that is more usable for all users irrespective of their situation, abilities or context. Here are some of the many considerations I included in my designs:

I used meaningful links and tried to avoid content-free text like "Click here" or"More details".

1.

Benefit: Helpful for users with motor impairments, cognitive limitations.

I kept consistency when using user interface components and always made sure they represent the created design system.

4.

Benefit: Helpful for users with difficulty reading text.

I used a combination of text, colour or graphical objects to specify important information.

2.

Benefit: Helpful for users with partial sight or limited colour vision.

I used informative and descriptive page titles and headings for those with limited short-term memory or low-vision.

5.

Benefit: Helpful for users with limited short-term memory, low vision or difficulty reading text.

I made sure the navigation and repeated components stay consistent and in the same order.

3.

Benefit: Helpful for users with cognitive limitations, low vision.

I created and designed content so that it can be also presented in different ways without losing information or structure.

6.

Benefit: Helpful for users who use screen readers and those with low vision.

TAKEAWAYS

This was one of my first projects using the design thinking process. While I was nervous initially, I learned to trust my instincts and previous research experience. I was able to make meaningful contact with study participants and learn important insights along the way. 

The most challenging stage of the process was creating a design system that fits well with flashy and colourful movie posters. The best results came from using enough white space around the saturated images as well as choosing minimalistic light colours for the background.

The final usability study showed that users were able to successfully navigate across all pages and the check out process did not bring up any unwanted issues.

bottom of page