FoodReel: Responsive Web Design

  • Problem

    Ordering snacks and movie tickets at theaters can often be overwhelming and confusing. Some users don’t have a mobile device.

  • Solution

    FoodReel is a one-stop solution for easily ordering movie tickets and snacks so users can focus on having fun at the movies. By providing a responsive website design, more users than ever can experience the joy of moviegoing.

  • Role and Responsibilities

    Lead UX/UI Designer and Researcher

    Conducted usability studies and developed overall design language and user flow.

Made for the big screen.

The FoodReel website design follows the same design principles and color scheme as the mobile app with unique features that are made to adapt to larger laptop and desktop screens. This gives even more users to opportunity to order snacks and tickets and enjoy their movie.

Understanding the User

In order to improve the overall user experience, it was important to establish empathy maps, user personas, and user journeys. This helped identify our key demographic of users, namely moviegoers than go to the movies 2-3 times a month.

The research conducted did, in fact, support our assumptions that moviegoers want a more intuitive method of ordering their snacks and tickets. This research also showcased the fact that users want granular control over individual items in their order.

Starting the Design

When drafting the initial wireframes for the responsive website design, I wanted to create an experience that greets users with a simple interface that is immediately reminiscent of the mobile app design. This creates continuity and consistency with the application brand across platforms.

Digital Wireframes

For the initial homepage design, it was important to keep a simple layout that didn’t overwhelm the user as per user feedback.

A key component was to have the website experience adapt to different screen sizes. This is an example of a user accessing the FoodReel website on mobile.

Based on user feedback, it was also crucial to effectively and clearly communicate each component of the user’s order as well as provide them with clear actionable buttons to edit and/or move forward in the process.

For FoodReel, two usability studies were conducted. The first round was mainly focused on improving the overall experience of the low-fidelity prototypes and implementing those improvements in the high-fidelity mockups. The second round focused on testing the effectiveness of the high-fidelity prototype and mockups.

Usability Studies

Refining the Design

After conducting the first usability study, it was important to give the user the option to either add food or skip food altogether while ordering if they wished to only get tickets. The color palette and assets reminiscent of the mobile app were then introduced.