This project entails the redesign of the Empire Cinema app, as part of the Ironhackes UX/UI Bootcamp challenge. The objective is to enhance the user experience and interface of the app. Empire Cinema app serves as a platform for booking cinema tickets, browsing upcoming movies, and ordering food.
To gain a comprehensive understanding of the app and its architecture, I began by cloning the original screens. During this process, I identified the main components utilized and analyzed their corresponding margins and padding. This examination proved instrumental in developing a fresh and distinctive identity for the redesigned app. By studying these aspects, I was able to establish a solid foundation for crafting the app's new visual aesthetic and user experience.
In addition to creating a new visual identity for the app, my goal is to address any UI-related issues and improve the overall user experience. To accomplish this, I have started analyzing the screens based on six important aspects:Visibility of the system, Match between the system and the real world, User control and freedom, Consistency and standards, Error prevention and help and Communication
.svg)
Main bar only appears on the main page and does not undergo any state changes users need to zoom in to see the available seats and make their selections Time button on the movie booking page does not change color to indicate selection but automatically redirects the user to the seats page During the process of defining the brand attributes for the app, the primary objective was to cultivate a distinct sense of warmth and enthusiasm among users. The aim was to establish a profound connection that harmonizes the timeless charm of classic cinema with a contemporary flair, all while infusing a spirit of creativity. This strategic approach was intended to foster a compelling and meaningful user experience, effectively bridging the gap between tradition and innovation
Based on the attributes I wanted my design to convey, I proceeded to create a Style tile. This Style tile serves as a visual collage or collection of images, colors, typography, and other design elements that reflect the desired aesthetic and mood for the app. By curating and arranging these elements, I can establish a cohesive visual direction and guide the design process towards achieving the intended look and feel.
I have redesigned the home page to have a similar old cinema vibe. As part of the design, I incorporated old cinema lights as a border for showcasing upcoming movies.
I have corrected the inconsistency in icons on the trailer page. Additionally, if a user wants to save the trailer to watch later, the icon will automatically change to reflect their selection.
I have rearranged the page and made several changes. Firstly, I replaced the trailer video in the "More Details" section. Secondly, I addressed the issue of choosing a time slot. Previously, the user would automatically be directed to the seats page after selecting a time, which limited their freedom. To solve this, I added a button that allows the user to confirm their chosen time and date before proceeding to the seats page. This gives the user more control over their selection. Additionally, I implemented an animation for the seats page. This was my first time working with animations, and I thoroughly enjoyed the process.
On the food page, I have made improvements to enhance navigation. Previously, users had to scroll down to find their preferred popcorn flavor and specific size. To address this, I introduced categories for each flavor with different sizes, making it easier for users to locate their desired options. Furthermore, I'm pleased to share that I had the opportunity to use variables for the first time. I implemented them to create interactivity on the page. When a user clicks to add a product, the total price will dynamically update, providing a more interactive and seamless experience.
3 Days