Genesis Cinema App
Genesis Cinema is an independent, family run cinema and arts venue situated in London’s East End. Genesis is committed to showcasing the best in independent and mainstream cinema, supporting local filmmakers and artists and providing a valuable and enjoyable cinematic and artistic experience for the local community. This is a mobile app dedicated to enhancing the booking experience at Genesis.
role:
Product designer from conception to delivery.
Product designer from conception to delivery.
responsibilities:
Usability Testing, User Experience Design (UED), Visual Design, Prototyping, Wire-framing, UX Research, Storyboarding, Design Thinking, Mobile Design, Competitive analysis, Task Flow, User Interface Design, Information Architecture, Affinity Mapping, User Journey Mapping, Personas, Graphic Design.
Usability Testing, User Experience Design (UED), Visual Design, Prototyping, Wire-framing, UX Research, Storyboarding, Design Thinking, Mobile Design, Competitive analysis, Task Flow, User Interface Design, Information Architecture, Affinity Mapping, User Journey Mapping, Personas, Graphic Design.
project duration:
September 2022 to January 2023.
September 2022 to January 2023.
The problem
Cinema goers at Genesis want to be able to book tickets in advance as the cinema gets quite busy, especially with new film releases, causing people to sometimes miss screenings.
The goal:
Design an app for Genesis Cinema that allows users to easily book tickets in advance and watch out for the latest releases and trailers.
Understanding our user
phase 1
- The user research carried out
- The personas we created from the gathered research
- Problem statements we designed from
- Our user journey maps
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working adults who don’t have time to queue up at kiosks for movies.
This user group stated other issues such as the current Genesis Cinema website, and the lack of genre selection.
Other user problems included obligations, interests, or challenges that make it difficult to buy cinema tickets for their favourite screenings in-person.
This user group stated other issues such as the current Genesis Cinema website, and the lack of genre selection.
Other user problems included obligations, interests, or challenges that make it difficult to buy cinema tickets for their favourite screenings in-person.
User research: summary
User research: pain points
Working adults are too busy to stand for long periods of time to book tickets for new screenings
Time
The Genesis Cinema platform is currently not equipped with assistive technologies
Accessibility
Having to queue up for long periods of time to book tickets is an anxious experience for some users.
Anxiety
OUR PERSONAS USED
I’d love to know what’s actually worth watching before leaving the house and it has to be under 2 hours.
-Rachel
"
| Goals
- To enjoy a movie under 2 hours long on her day off work.
- To know the best rated screenings within the last month
- To be presented with movies that are within a desired time frame and time of release
| Frustrations
- “Because of the rota at work, I don’t have set days off, so I don’t have time to look through the best rated movies”
- I don’t want to just see everything and have to read through it all, it would be good to know the best releases from Jan to Feb
| Bio
Rachel is a Nurse who works both night and day shifts on an inconsistent rota, where her days off work shift quite a bit. Due to this and her family responsibilities, it’s quite difficult to keep updated with the latest movie screenings in her local cinema. She loves to watch movies in the cinema when she can and would love to know which blockbusters did well in the last 2 months specifically. She would love if these were also under 2 hours long.
Age: 24
Education: BsC Child Nursing
Hometown: East London
Family: Husband & 4 children
Occupation: Child Nurse
Education: BsC Child Nursing
Hometown: East London
Family: Husband & 4 children
Occupation: Child Nurse
I use social media to keep updated with the latest movie trends, then I watch the trailers.
-Jeff
"
| Goals
- To watch film trailers that appeal to him that will help his judgement on whether to watch the film
- To purchase film tickets without being held up at the counter
- To be presented with movies he finds interest in via social media
| Frustrations
- “I like to watch movies that I can actually relate to, most of these screenings don’t appeal to me”
- “The booking process in the cinema makes me a bit anxious, would be good if there was a way to avoid this but still get my ticket’
Age: 19
Education: Undergraduate BsC Sports Science
Hometown: East London
Family: Lives at home with 2 siblings & parents
Occupation: Student
Education: Undergraduate BsC Sports Science
Hometown: East London
Family: Lives at home with 2 siblings & parents
Occupation: Student
Jeff is an undergraduate university student who loves gaming and movies. He is heavily invested in the movie scene and uses social media a lot to keep updated with the latest releases. He enjoys going to the movies but dislikes the anxiety associated with lining up and ordering tickets, especially with crowded settings and would rather avoid this when ordering tickets. He also loves when he can find film trailers that he can relate to, which influences his decision to view the film more.
| Bio
user journey map
Mapping Rachel and Jeff’s user journey revealed how helpful it would be for users to have access to a dedicated Genesis Cinema app, by understanding the tasks they have to carry out, the feeling adjectives associated with these tasks and the improvement opportunities at hand.
Starting the design
phase 2
- Paper wireframes
- Digital wireframes
- Low-fidelity prototype
- Usability studies
paper wireframes
I had to ensure iteration of the paper wireframes were addressing the user pain points as much as possible before committing to digital wireframes.
For the home screen, I prioritised a quick and easy display of cards and keys with their balances to help users save time.
For the home screen, I prioritised a quick and easy display of cards and keys with their balances 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.
Once the trailer is selected via the play button, a video overlay with a carousel interface is displayed
The filters above will allow the users to choose the genre.
Easy booking of the seating and ticketing was also a priority for the app, as it would need to be more efficient than the process of booking at the kiosk, to ensure the convenience of this app.
This interface will show all available seating for the user to select from which gives them freedom based on their preference of seat and availability. It will also display the total and link to pay.
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was booking a ticket to a film, so the prototype could be used in a usability study.
View the Genesis App
low-fidelity prototype
View the Genesis App
low-fidelity prototype
Low-fidelity prototype
Round 1 findings
Usability study: findings
Two rounds of usability studies was conducted. 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 2 findings
Text and buttons more bigger, felt awkward tapping as they were small.
Genre area was not clear to understand, needed clarity.
Users wanted a confirmation page before and after purchase of the ticket as the payment screen felt too ‘sudden’.
The trailer to purchase makes user feel they have now eliminated the whole purchasing of ticket at kiosk process.
Refining the design
phase 3
- Mockups
- High-fidelity prototype
- Accessibility
mockups
Early designs allowed for iteration,
but after the usability studies, I was able to work on the pain points that arose from our users.
I ensured the main priority pain points were addressed in the designs; one of our P0 was the Genre section being unclear.
but after the usability studies, I was able to work on the pain points that arose from our users.
I ensured the main priority pain points were addressed in the designs; one of our P0 was the Genre section being unclear.
Before usability studies
After usability studies
The second usability study revealed frustration with the size of the buttons, making it heard for navigation, To rectify this, I ensured that the buttons were accessible and clear enough to proceed with.
Before usability study 2
After usability study 2
High-fidelity prototype and key screens
The final high-fidelity prototype presented cleaner user flows for booking a cinema ticket. These were the key mockup screens we needed for showing the basic functionality of the Genesis app.
View the Genesis Cinema high-fidelity prototype
View the Genesis Cinema high-fidelity prototype
Accessibility considerations
Ensured all components passed WCAG AAA accessibility test.
Used clear imagery for seating bookings to help all users better understand the designs.
Used icons and globally recognisable emojis to help make
navigation easier.
navigation easier.
Provided access
to users who are vision impaired through adding alt text to images for screen readers.
to users who are vision impaired through adding alt text to images for screen readers.
Going forward
final phase
- Takeaways
- Next steps
One quote from peer feedback:
"I love how relatable this app is, the emojis as genres, I knew what genre it was even before looking at the title just below and also the seat booking, it's nice to know I can do this from my phone easily, waiting in line for long as I said earlier is not the best experience for me".
"I love how relatable this app is, the emojis as genres, I knew what genre it was even before looking at the title just below and also the seat booking, it's nice to know I can do this from my phone easily, waiting in line for long as I said earlier is not the best experience for me".
What I learned:
I learned that the first initial wireframes can easily change from the final mockups based on the feedback of an intensive usability study. User pain points arose and this indicated changes to our final mockups.
I also learned that design bias can also subconsciously affect the designing process, so it's important to highlight these biases and ensure these are removed when dealing with research and designing, as these can reflect in the final product and may not solve the design. problem
I learned that the first initial wireframes can easily change from the final mockups based on the feedback of an intensive usability study. User pain points arose and this indicated changes to our final mockups.
I also learned that design bias can also subconsciously affect the designing process, so it's important to highlight these biases and ensure these are removed when dealing with research and designing, as these can reflect in the final product and may not solve the design. problem
What did I take away?
Conducting more user research to determine any new areas of need will be the next step. We will conduct another few rounds of usability studies to validate whether the pain points users experienced have been effectively addressed and to see if new pain points arise for us to address and solve.
next steps
Thank you for your time reviewing my work! If you’d like to see more, feel free to browse my projects below or get in touch with me by simply clicking here.
Photo credits: Nikolay, Jake Nackos, Timi David.
