Cinemagic

Cinemagic homepage screen.

This project is about designing a native mobile app for both iOS and Android phones, that solves a specific user problem. It aims to assist young adults, who enjoy watching movies at cinemas, to book and buy movie tickets at their convenience, so they can watch the respective films.

My Process

Objective

The aim of this project is to create a native mobile app design for both iOS and Android mobile phones. The design for iOS phones must follow the Human Interface Guidelines. The design for Android phones must follow the Material Design Guidelines.

User Flow

Google Drawings was used to create the user flow. It shows how users can move from one webpage to the next on the movie ticket booking app.

Cinemagic user flow.

Low-fi wireframes

Balsamiq Wireframes was used to arrange the placement of different components and elements used for each page.

iOS

Cinemagic 'ios-home' low fidelity wireframe. Cinemagic 'ios-films' low fidelity wireframe. Cinemagic 'ios-specific-film' low fidelity wireframe. Cinemagic 'ios-booking' low fidelity wireframe. Cinemagic 'ios-payment-method' low fidelity wireframe. Cinemagic 'ios-card-payment' low fidelity wireframe. Cinemagic 'ios-confirmation-modal' low fidelity wireframe. Cinemagic 'ios-tickets' low fidelity wireframe. Cinemagic 'ios-profile' low fidelity wireframe.

Android

Cinemagic 'android-home' low fidelity wireframe. Cinemagic 'android-films' low fidelity wireframe. Cinemagic 'android-specific-film' low fidelity wireframe. Cinemagic 'android-booking' low fidelity wireframe. Cinemagic 'android-payment-method' low fidelity wireframe. Cinemagic 'android-card-payment' low fidelity wireframe. Cinemagic 'android-confirmation-modal' low fidelity wireframe. Cinemagic 'android-tickets' low fidelity wireframe. Cinemagic 'android-profile' low fidelity wireframe.

Mid-fi wireframes

Figma was used to edit the arrangement of the selected components and elements used for each page. Real text was added to buttons, titles, sub-headings, paragraph sections, etc.

iOS

Cinemagic 'ios-home' mid fidelity wireframe. Cinemagic 'ios-films' mid fidelity wireframe. Cinemagic 'ios-specific-film' mid fidelity wireframe. Cinemagic 'ios-booking' mid fidelity wireframe. Cinemagic 'ios-payment-method' mid fidelity wireframe. Cinemagic 'ios-card-payment' mid fidelity wireframe. Cinemagic 'ios-confirmation-modal' mid fidelity wireframe. Cinemagic 'ios-tickets' mid fidelity wireframe. Cinemagic 'ios-profile' mid fidelity wireframe.

Android

Cinemagic 'android-home' mid fidelity wireframe. Cinemagic 'android-films' mid fidelity wireframe. Cinemagic 'android-specific-film' mid fidelity wireframe. Cinemagic 'android-booking' mid fidelity wireframe. Cinemagic 'android-payment-method' mid fidelity wireframe. Cinemagic 'android-card-payment' mid fidelity wireframe. Cinemagic 'android-confirmation-modal' mid fidelity wireframe. Cinemagic 'android-tickets' mid fidelity wireframe. Cinemagic 'android-profile' mid fidelity wireframe.

Hi-fi wireframes

Figma was used to add colour to the wireframes, using a colour scheme from the style guide. The style guide's typography was also applied at this stage.

iOS

Cinemagic 'ios-home' hi fidelity wireframe. Cinemagic 'ios-films' hi fidelity wireframe. Cinemagic 'ios-specific-film' hi fidelity wireframe. Cinemagic 'ios-booking' hi fidelity wireframe. Cinemagic 'ios-payment-method' hi fidelity wireframe. Cinemagic 'ios-card-payment' hi fidelity wireframe. Cinemagic 'ios-confirmation-modal' hi fidelity wireframe. Cinemagic 'ios-tickets' hi fidelity wireframe. Cinemagic 'ios-profile' hi fidelity wireframe.

Android

Cinemagic 'android-home' hi fidelity wireframe. Cinemagic 'android-films' hi fidelity wireframe. Cinemagic 'android-specific-film' hi fidelity wireframe. Cinemagic 'android-booking' hi fidelity wireframe. Cinemagic 'android-payment-method' hi fidelity wireframe. Cinemagic 'android-card-payment' hi fidelity wireframe. Cinemagic 'android-confirmation-modal' hi fidelity wireframe. Cinemagic 'android-tickets' hi fidelity wireframe. Cinemagic 'android-profile' hi fidelity wireframe.

Mockups

These mockups illustrate how the devices look on mobile phones when users are on the app at various locations.

Cinemagic 'android home' mockup Cinemagic 'ios home' mockup Cinemagic 'android films' mockup Cinemagic 'ios films' mockups Cinemagic 'android specific film' mockup Cinemagic 'ios specific film' mockups Cinemagic 'android booking' mockup Cinemagic 'ios booking' mockups Cinemagic 'android payment method' mockup Cinemagic 'ios payment method' mockups Cinemagic 'android card payment' mockup Cinemagic 'ios card payment' mockups Cinemagic 'android confirmation modal' mockup Cinemagic 'ios confirmation modal' mockups Cinemagic 'android tickets' mockup Cinemagic 'ios tickets' mockups Cinemagic 'android profile' mockup Cinemagic 'ios profile' mockups

Conclusion

A native mobile app was successfully created for both iOS and Android mobile phones. Both the Human Interface and Material Design Guidelines were followed to ensure the app met their standards. Feedback from users also helped in making the design of the app intuitive.