About

iOS Cinema app

Designing and launching CITY iLOVE's cinema native experience.

Background

Baneasa Shopping City is the premium shopping destination in Romania having a 1.4M monthly foot-traffic. In 2015, we built and launched CITY iLOVE, Baneasa's loyalty app for iOS and Android.

With over 25k active users in less than 1 year, CITY iLOVE won numerous prizes in the fields of digital, emerging technology and innovation in retail like "2016 ICSC Solal Marketing Awards: Silver Award for EMERGING TECHNOLOGY, Berlin, Germany".

Introducing CITY iLOVE

CITY iLOVE app is a digital assistant that enhance the shopping experience in Baneasa Shopping City, Romania's favorite shopping and entertainment destination.

The app features 5 sections:

  1. Newsfeed: An engaging feed focused on news, events, and promotions.
  2. Brands: The place for finding mall's brands and stores.
  3. Profile: User's info, benefits, purchase history, and Inbox.
  4. Cinema: The movies and shows running in the cinema.
  5. Scan: A dedicated section for scanning receipts and parking tickets.

The focus of this case study is in the Cinema section for iOS.

cinema screenshots ios

The challenge

Create deeper relationships with customers


Design and develop the Cinema section as native iOS experience.

When we launched the app one year earlier, we decided to focus on building the loyalty features first. The Cinema section was postponed to be upgraded in the versions to come, for v1 we went with a WebView loading the responsive website.

We knew that customers love going to the movies and we had the exact number of how many tickets were sold on each channel. The app channel performed very poorly, so an upgrade to a native experience had to be done asap.

Our goal for the project was to replace the WebView loading the Cinema website with a native experience. More so, our ambitions were to improve the Discovery phase and Post-Booking offline experience.

before
Before (WebView)
after
After (native experience)

Our high-level goals were to:

  1. Increase usage and ticket sales.
  2. Increase new users retention rate.
  3. Create a new benefit to driving new app installs.

Deadline: 3 months from 0 to launch.

My role

I led the UX/UI design & UI development. This was a team effort between Kinecto Isobar and eAD Interactive. In addition, I worked alongside a Product Manager, Project Manager, iOS developer, Android developer, and 2 backend developers.

To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information is my own and does not necessarily reflect the views of Baneasa Shopping City, Kinecto Isobar or eAD Interactive.

User experience

Use cases, not screens.


I began with 3 stakeholders interviews to understand the business requirements and define key performance indicators (KPIs). A full market research wasn't needed to move forward.

Instead, I started the user research process by conducting 1 individual interview session, 1 online survey, and 1 full day spent in the Cinema lobby observing customers and taking notes.

The goal of this exercise was to gather data about customer's behaviour, goals, and pain points.

Baneasa Shopping City
User interview

I started to develop user stories and use-cases with a clear focus on user goals and finding pain points. The findings were used to evaluate design decisions.

User stories

I believe that the current model of defining user stories is broken. Something like "As a user, I want to buy a ticket, so I can access the cinema" doesn’t tell me anything about how the person chooses the movie (knows the title from the start or needs help to discover what's playing), if the hour is a filtering criterion, whether they need 1 or more tickets, and so on.

To inform design, user stories have to tell a story about the person using the product. The person becomes central, not the product. The product exists only to create the tools for her to achieve her goals. Real life goals.

The following are the user stories used into my decision‐making process:

As a single mom, I want to take the kids out to the movies. My kids want to see Spider-Man tonight.

As a high school guy that just escaped the friend zone, I want to take my new GF to a date. It should be a Romantic Comedy sometime Saturday.

As a hard-working, always busy husband and father of three kids, I want to spend some quiet time with my wife. I scheduled 3 hours next Tuesday evening, the title doesn't matter much.

My friends and I as movie lovers, don't want to miss an Opening. I have a Membership Card and I value all the offers and discounts.

From this exercise, it became clear that we could help customers derive more value from the product if we offered multiple ways to find a movie. My focus moved from "thinking in steps and screens" to "thinking in goals and functionality", basically to understand and map the product interactions from user's point of view. Furthermore, the findings helped me to create critearia for measuring design success.

Product features

The next step was to translate the user stories into use cases.

User Task Action
Discover
Find movie by Title Search, Scroll list
Find movies by Genre Filter list
Find movies by Date & Time Filter list
Find Openings Filter, Scroll list
Showcase
Decide if Yes/No Explore, Share movie details
Book/Buy Select showtime
Checkout
Choose tickets Select options
Choose seats Select options
Use
Enter cinema Show barcode
Set reminder Add to calendar
Add guests Share ticket

Sections overview

  1. Discover: Dedicated section to quickly find the desired movie. Home view.

  2. Showcase: Informative way to present movie details and schedule. Movie view.

  3. Checkout: "Hustle-free" process to book or buy tickets. Checkout view.

  4. Use: Optimised experience for offline use. My Tickets view.

UI design

Be lean, iterate and measure.


My process involved sketching and white‐boarding concepts and flows and then translating these directly into high fidelity design comps. Since I was working with many existing design patterns, it was relatively easy to move straight into high fidelity designs.

design process

In the meantime, the development team started to build the API endpoints and backend integration.

Things to keep in mind: our product development approach is to build an MVP, measure it against the KPIs and improve with each new iteration. For measuring specific screens and components we do A/B testing. As a design limitation, the Cinema is just one section of a full-featured app, not the whole app.

Let's dive in into each Cinema section.

1. Discover/Home view

Dedicated section to quickly find the desired movie.

User Task Action
Find movie by Title Search, Scroll list
Find movies by Genre Filter list
Find movies by Date & Time Filter list
Find Openings Filter, Scroll list

I designed the first version following iOS guidelines using native components.

v1

Home v1

View breakdown:

Segmented Control for toggling between Movies and Tickets views.

Prominent Search Bar for searching a movie.

List of movies displayed in grid layout.

Pros: Visual appealing, native components.

Cons: No way to filter movies, hard access to My Tickets.

Testing this version against the use cases failed. Having no room to display a Filter option and hiding it behind Search was a clear NO-NO.

After more sketching, I decided to remove the Segmented Control and Search Bar to design a custom Action Bar.

first version
First version
final version
Final version

Following platform's guidelines is the best practice, no doubt, but rules are meant to be broken when necessary.

v2

Home v2

View breakdown:

Action Bar for filtering and searching movies.

List of movies displayed in grid layout.

Pros: Visual appealing, easy access to Filters, Search, and My Tickets.

Cons: Custom components.

I do prototyping and usability testing not to find what I've got right, but to learn where I've failed.

I built a quick HTML/CSS prototype for usability testing. The outcome of analyzing results is deeply influenced by researcher's goal. If one's goal is only to confirm her assumptions then that's the outcome she'll look for.

But, if your goal is to help the customer achieve her goals, then you'll continue asking questions until your solution will offer the best user experience.

Earlier in the process, I've defined use cases but I've forgotten the most important question: How fast does the user achieve her goals?

So I decided to A/B test the Grid layout against a List layout using the same tasks and different testers.

TIP 1: Hotjar is a perfect solution to mix quantitative with qualitative research. Check it out

Grid vs List

grid
list

The following are the results of the A/B test:

User Task ATTC Grid ATTC List
Find movie by Title 46s 28s
Find movies by Genre 92s 78s
Find movies by Date & Time 124s 102s
Legend: ATTC = average time to completion

The List layout clearly performed better with an average decrease of 20% in time to completion.

Voice of the customer:

  • “ I like big pictures but bigger titles are better.
  • “ I can scan really quickly through the list.
  • “ I love that today's schedule is highlighted, is helping me decide faster.

Discover final version

static

2. Showcase/Movie view

Informative way to present movie details and schedule.

User Task Action
Decide if Yes/No Explore, Share movie details
Book/Buy Select showtime

I began by learning what types of content we'll have access to and what's driving the customer to make a positive decision about watching a movie. Then started diving into the website's historical data, surfacing user behavior on the movie page, pain points and barriers to conversion.

I've found that the most important piece of content for decision-making is the movie Trailer. The second most important argument is the Showtime.

Working on the Information Architecture (IA), I decided to emphasise the Trailer by allowing over 30% of the screen real estate.

Movie details

movie

View breakdown:

Movie title and details, short description, and video.

Pros: Visual appealing, clear IA, highlighted trailer.

Cons: No ratings and reviews.

Schedule component design explorations

User task Action
Compare showtimes for the same day Explore options
Compare showtimes between different days Change dates and explore options
Choose desired showtime Select option

I spent the next several days exploring variants for the Schedule component. The design's high-level goal was to reduce customer's cognitive load to 0.

dropdown list

1. Dropdown list

Terrible solution!

  • Pros: Easy to build.
  • Cons: Options hidden behind multiple taps, hard to compare showtimes.
definition list

2. Definition list

Could work!

  • Pros: Options always visible, easy to compare showtimes for the same day.
  • Cons: Hard to compare showtimes between different days, wasted screen real estate.
timeline list

3. Timeline

Definitely the best!

  • Pros: Focus on day view, easy to compare showtimes for the same day, easy to compare showtimes between different days.
  • Cons: Harder to build.

Schedule final version

schedule

Select showtime

Prototyping early is the most effective way to gain meaningful feedback from the team and approval from stakeholders.

3. Checkout

"Hustle-free" order process. Select tickets -> Select seats -> Book or Buy.

Select tickets

schedule
book
aa
Designing with real content is the way to go, special thanks go to the Invision team for building Craft for Sketch.

4. Use/My Tickets view

Optimized experience for offline use.

User task Action
Enter cinema Show barcode
Set reminder Add to calendar
Add guests Share ticket

My Tickets

my tickets
ticket

Launch

Positive results and much more to do.


  • Increased section usage from 2% to 51%.
  • Increased conversion rate from 3% to 57%.
  • Increased new user retention rate by 31%.
  • Decreased user acquisition cost (UAC) by 34% by increasing the referral rate.