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 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:
-
First, the foundation research, including primary and secondary studies, was conducted to understand user needs and the cinema industry specifics in general.
-
The second – design research was conducted to test the low-fidelity prototypes and design system suitability.
-
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.
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?
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.
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
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.
Close-up storyboard
Big-picture storyboard
USER FLOW
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.
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.
FINAL MOCKUPS
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.