Inside Out Zoo
I designed a mobile app for a fictional local movie theater from conception to delivery. Through a process involving research, interviews, initial design phases, and usability studies, I ended with a high-fidelity prototype of the app through Figma.
The app is featured in DesignRush's "19 Best Event and Entertainment Mobile Apps" article.
The Prompt
Design a functional prototype of an app for a zoo — real or imaginary — that allows zoo visitors to select and purchase admissions tickets and view special exhibits or events that require additional purchase.
My Responsibilities
As a UX designer designing the mobile app from conception to delivery, my responsibilities included:
ideation and design
paper and digital wireframing
conducting usability interview
high-fidelity prototyping
iterating on designs
Brainstorm
My team brainstormed together to find a theme for our zoo, landing on the film Inside Out as a way for guests to enjoy animals while getting in touch with their emotions. We then came up with features we wanted to include in our app.
AI trained on data from different reliable websites
User is able to swap one activity with a similar one
Search suggests tagged data based on user's selections
Suggested reservations based on travel info inputs
Suggested reservations based on travel info inputs
Conceptual Design
When brainstorming ideas for the design of the mobile app, I came up with features that would be helpful for users:
Suggest travel locations & activities
Organize planned activities into an itinerary
Map will let users geographically view places they have planned to visit
AI will collect data from free sources like the Internet
User can accept or reject suggestions, ask for new ones, or enter their own
Users can search & book flights & hotel reservations
Users can get suggestions based on attributes they want in their travels
Initial Wireframes
Initial sketches of my ideas for the mobile app included those for an Itinerary page, a Search page, a Search suggestions page, a Map page, and a Flights & Hotels page.
High-Fidelity Prototype
I then took the best elements from the paper wireframes to create the initial screen designs in Figma. After the user research, I had found that the trailers page was one that users would often use, so I made sure to make the navigation and visibility of the page easy.
On the Itinerary page, users can scroll horizontally, viewing each day of their travels as planned.
Recommended section based on users' previous ticket purchases for a more personalized experience
Each trailer is the width of the screen, making each one very visible, and making it easy for the user to scroll through the trailers quickly
Recommended section based on users' previous ticket purchases for a more personalized experience
Recommended section based on users' previous ticket purchases for a more personalized experience
On the Itinerary page, users can scroll horizontally, viewing each day of their travels as planned.
Recommended section based on users' previous ticket purchases for a more personalized experience
Recommended section based on users' previous ticket purchases for a more personalized experience
Recommended section based on users' previous ticket purchases for a more personalized experience
Recommended section based on users' previous ticket purchases for a more personalized experience
Recommended section based on users' previous ticket purchases for a more personalized experience
Usability Study
I conducted two usability studies to test the app and discover any user pain points. The first study used the low-fidelity prototype, and the results helped lead the design of the mockups. The second study used a high-fidelity prototype and revealed what needed to be improved within the mockups.
User 1
A back arrow instead of an x in the corner on the movie info pages would be a smoother user flow
Users want an obvious way to get to showtimes from home screen
Trailers section on movie info page would be easier to find above the cast list
1
2
3
User 2
Trailers page would be easier and faster to scroll through with less negative space between trailers
The showtimes page needs a way for the user to pick a specific day
Recommended section and trailer section on home screen look too similar
1
2
3
Revised Wireframes
After the first usability study, I created high-fidelity designs that represented the final product. I then used the feedback from the second usability study to improve upon those mockups.
Before usability study
Changed Now Playing tab to red to draw attention to its function as a button
Decreased negative space to make scrolling quicker and easier
After usability study
Before usability study
Increased size of posters to make them easier to click on and added drop shadow to make them more dynamic
Changed the shape of the recommended section to differentiate it from the others
After usability study
Prototype
The low-fidelity prototype connected the digital wireframes in the user flow of purchasing a movie ticket. It also allowed users to navigate through major pages of the mobile app, so the prototype could be used in a usability study.
More Feedback
I conducted two usability studies to test the app and discover any user pain points. The first study used the low-fidelity prototype, and the results helped lead the design of the mockups. The second study used a high-fidelity prototype and revealed what needed to be improved within the mockups.
User 1
A back arrow instead of an x in the corner on the movie info pages would be a smoother user flow
Users want an obvious way to get to showtimes from home screen
Trailers section on movie info page would be easier to find above the cast list
1
2
3
User 2
Trailers page would be easier and faster to scroll through with less negative space between trailers
The showtimes page needs a way for the user to pick a specific day
Recommended section and trailer section on home screen look too similar
1
2
3
Future Improvements
User research identified pain points users have when seeking information about movies and buying movie tickets.
1
Convenience
Not all ticket purchasing apps provided users with all the information they wanted.
2
Proficiency
Some users found movie apps to be confusing or hard to find information they wanted.
3
Awareness
Some users enjoyed going to movies at their local theater but were not always aware of what was showing.
Takeaways
The mobile app would be successful in allowing patrons of the movie theater to get info about and watch trailers of current and upcoming movies, as well as purchase tickets all in one place.
While designing the movie theater app, I learned that the designs were constantly evolving through every stage of the design process. Usability studies helped guide the designs toward an end result that ensured the app is helpful to users and easy to use.