TheScore Design Challenge

TheScore design exercise is about designing a mobile experience for moviegoers to browse and purchase tickets on the go. The first part was a wireframing exercise for two pages for selecting a movie and selecting a theatre. The second part was about designing two pages of high fi interface design for selecting movie time and selecting seats. Another part of the task was to record design assumptions as thinking through the problem.
‍
I planned to be aware of my time and avoid overwork, so I timeboxed this task to 5 hours. I started by searching up various movie apps through the app store and tried a few of them to enrich my experiential knowledge to form a pov, then to hypothesize. To narrow my approach I built assumptions based on specific scenarios.

Part 1: Wireframing Exercise

Selecting a movie

• Users are most likely to be booking tickets for the same day. So I’d make sense to filter movies by today as the default for the browsing list.
• To optimize the search experience and personalization for returning users, we might want to confirm their location. This will help us highlight movies in nearby theatres, and tell the user “we’re not always tracking your location.”
• Users would like to watch the movie trailer while browsing the movies.
• Users will be scanning the list by movie posters. So we’ll have to increase the prominence of images in the browsing experience.
• Users are most likely to browse the movies by the most popular ones. So we’ll make “filter by popularity” selected by default.
• Users are less likely to browse movies alphabetically.

Selecting a theatre

• Users get a better sense of space and geolocation of theatres by looking at a map. So might make the map a central piece for browsing theatres.
• Users are most likely to visit the same theatres that are nearby and their favourites.
• Users will want to see showtimes while they’re browsing the theatres.
• User’s distance to the theatres is an important factor for picking a theatre. So will make the distance louder and more prominent.
• Users care about their favourite theatres and want to distinguish them while browsing the theatres.
• Going to movies is a social event, so users would want to share the theatre with their friends. So we’ll provide a sharing function for the list items.

From left to right: Selecting a movie wireframe, selecting a theatre wireframe

Part 2: Layout Design

Select Time

• Users would want to check the theatre's address on the map for reassurance. What if we provide an access link to the map. This will help to share location and planning for arrival.
• The prominent navigational information helps the user orient themselves in the process of purchasing tickets.
• Additional information (e.g. film description, or director name) will help the user learn about the movie and evaluate their decision-making process.
• Users (on the go) will most likely want to reserve tickets for the same day. So we use today as the default filter for the date.

Select Seat(s)

• The name of the movie reassures their choice in the previous step of the process. It also helps navigation and backtracking.
• The representational model of theatre’s plan makes it easier to mentally map the space and decide on preferred seats. So what if we provide the salon’s plan.
• High contrast visual check sings help the user to spot and differentiate reserved versus selected and available seats.
• Seeing the ticket(s) visually as individual items on a sticky footer (the cart) will help users learn better about the number of items and associate them with the total price.
• Chevrons on the buttons help the user to orient in the process and navigate through the app.