UX Designer
Growing up, I always wanted to be a movie director or somehow be involved with making movies. When prompted to make an app to sell movie tickets, it was a no-brainer for me to choose this for my project.
With the 2020 lockdowns, the film industry saw an all time low since 1998 with a drop off of 81%. However, once the lockdowns had been lifted, the box office saw a 112% increase for 2021.
Being able to easily, and conveniently, find a movie and reserve tickets at theaters of clients’ choosing.
As part of my research, I found other popular apps in the competitive space. In doing so, I was looking for great interactions, accessibility, and overall ordering experience.
Using the movie’s poster as the button to get more info about the movie. Designing around company branding for contrast. (Fandango and Alamo)
The movie posters in Fandango’s were to small to make out and in Alamo’s they were too large with just 2 movies taking up the screen. Additionally, AMC’s app didn’t even try to incorporate company branding. They just went with black and white.
I created 2 personas based on 2 different types of users. First, a busy single mom and second, a younger guy looking to hangout with his friends.
Once I did all the initial research, I was ready to begin designing some low-fidelity mockups. I started with a simple flow to follow, then worked my way in to low-fidelity wireframes.
To get started, I created a flow diagram to outline the main path users would take. More optional and fail states paths were later added throughout the design process.
Once I had a main flow path for the users to take, I began working on creating low-fidelity wireframes.
Once I had the basic flow down, I did a quick usability study on the low-fidelity prototype to find what else I could improve on. From there, I also had to design a logo, come up with a brand, and define the fonts and colors.
The style of the whole app was meant to feel like going to a movie theater or an award show.
After some time and a few more classes taken, I went back and redesigned all of the screens with all the new skills and knowledge I gained. Accessibility and user concerns were also remedied with the redesign.
I also played around with changing the background to match each screenshot of the movie selected. For the other menus I tested the design with having a secondary dark blue background in addition to black as the background trying to stay with the company colors.
I used an 8 point grid for the whole project. Between groups, I had margins set for 16, 24, 32, and 48. Within the groups, margins were set to 8 and 16.
After connecting my high-fidelity designs into a prototype, I was able to retest it with users to gain their feedback on what I could further iterate on.
I ran another usability study on my high-fidelity prototype with 5 users plus 2 others that had previously peer reviewed my project as part of the certification program. The 5 users of the usability study were asked to preform 4 different tasks, which had them end up going through the entire main flow path of buying and reserving a movie ticket through the app.
The other 2 peer reviewers were asked a host of questions for the certification program. They too were tasked to try and get through the main flow path.
The usability study I ran with the 5 users were all able to get through the main flow path without issue.
However, 1 of the 2 peer reviewers were unable to get past the seat selection. They did not understand what to do when that screen was presented, and they were unable to complete the main flow path because of it.
With having the 1 peer reviewer unable to complete the flow path due to a lack of understanding, I had to keep this front of mind when redesigning the app. For this screen in particular, I tried to make seat selection easier to accomplish by making the icons seats, making them larger, having the title clearly state what action to take, and having a legend showing which seats are taken.
I evaluated the app against the AA standards of WCAG. I found areas of improvement within my app.
One specific example that I improved on was the CTA buttons for selecting a theater. On my first round of the high-fidelity mockups, I used tiny buttons for selecting a time. I also jammed too much info into one screen.
During this project, I was able to evaluate the market, conduct a competitive audit, and create a set of low-fidelity wireframes with which I performed my first round of usability studies. From there I was able to iterate to build out high-fidelity designs for the second usability study. After the last round of the study, I went back and created beautiful UI designs with a focus on consistency with company branding and colors, and a mindset of keeping with accessibility guidelines.
