Cinemark App Redesign (in progress)

The Challenge

The Cinemark Mobile App was designed in 2015 and needed a fresh look and feel. One of the business objectives for the year was to redesign the app to improve the metrics across downloads, conversion rates, and reviews.

Role

UX / Visual Design Lead

UX Team

2 Designers

UX Sprint

1 Week

Defining Goals

From my previous experience, I knew that gathering KPIs before the design would be critical. This would allow the team to measure our success when the redesign is complete.

2015 App KPIs

  • 1.8 average app rating for iOS.
  • 3.9 average app rating for Android.
  • 2.4% conversion rate.
  • 72% iOS users / 28% Android users.

Goals

  • Create a Visual Design that is modern, visually appealing, and improves UX.
  • Create a Visual Design Language to make the UX Design consistent.
  • Improve monthly downloads.
  • Improve conversion rate.
  • Implement new technological features such as 360 Video Trailers, 3D Touch, and Apple/Google Pay.

Visual Design Process

One of the first steps was capturing the pain points of the current design.

Identifying 2015 App Pain Points

  • Slow loading throughout the app. Our recommendation was to stagger the loading of API calls to improve the perceived performance.
  • Outdated Visual Design. Our recommendation was to define a new design that is modern and appealing.
  • Dark Theme is difficult to read text. Our recommendation was to review the light theme and compare the advantages/disadvantages.

Image description

Light vs Dark Theme


Disadvantages of the Dark Theme

  • Difficult to read white and red text because of the contrast ratio. The Cinemark Red did not pass AA accessibility standards with a 2:1 rating.
  • Secondary buttons are limited to grey buttons. This causes confusion to users because the grey buttons have no clear indication of being active or disabled.

Advantages of the Light Theme

  • Flexibility to use red text for secondary buttons.
  • Easier to use form fields and understand error states.

Creating a Visual Design Language

Image description
Image description

UX Design Process

  • Gather requirements from the Marketing department and Product Manager.
  • Research competitors.
  • Sketch UX Design together as a team.
  • Create wireframes and review with the Developers and Product Manager.
  • Usability test wireframes.
  • Iterate on design and add visual design. Update Visual Design Library if needed.
  • Usability test high fidelity design.
  • Document findings in a Usability Test Report and share findings with team.
  • Prepare final assets to hand off to Developers.

Image description

The Deliverables

(design still in progress...)

Image description