Moonview Cinemas UI/UX Project

Project Description

When my group members and I were first discussing ideas for what our project would be about, we weren’t entirely sure. I ended up suggesting to make the project about a fake drive-in movie theater chain. Once we agreed on a theme and brand name, we then went to work on creating a color palette and logo. We decided on using different shades of blue, contrasted with white text and light orange and light purple highlights. The color choices helped add to the nighttime/sunset aesthetic we were looking to capture. For the project, we had to create four different wireframes and prototypes for each kind of platform that the brand would appear on. Those platforms included an iPhone, Android, Tablet, and Website. I was specifically responsible for the Website wireframe and prototype. I heard awhile later after the project was completed that it became a sample project used in explaining the assignment for the User Interface/User Experience course.

Before we started working on the different wireframes and prototypes in Figma, as a group we decided that some of the main features of the app/website would be that a user could sign into/create an account, redeem for rewards, and purchase tickets. One of the main sources of inspiration for how the app/website would look and work was the AMC app/website. For the website home page, I broke up the navigation bar into the following tabs, a Login/Sign Up tab, Pick a Movie tab, Our Drive-Ins tab, Rewards tab, About Us tab, search bar, and a Showtimes tab. At the bottom of the home page, I included several movie posters of movies that would be available to be seen. These posters would allow the user to quickly pick a movie. With the Our Drive-Ins page, I wanted to display to the user all of the Moonview Cinema locations and their addresses so the user could decide which venue would be closest to them. The Rewards page displays all the different rewards that a user could redeem and the progress that they had acquired so far for rewards. With the About Us page, I wanted to have a spot to address any questions that a user would have about Moonview Cinemas, such as theater layout, how sound works at the theater, Covid-19 policy (the project was made while everyone was doing remote learning due to Covid-19, so it was a main point to highlight at the time), and how the pricing works.

You can view the project files directly via the button below or select from the different interactive previews at the bottom of the page.

Interactive Previews