time play
Design Challenge

The Challenge
The project required my team and I to evaluate the usability of an existing digital product, conduct an effective heuristic evaluation, and recommend design improvements (with constraints of typography and colour).
As a team of 3, we decided to examine Timeplay - a live, interactive gaming platform for moviegoers in Cineplex theatres. We focused on one user task flow: updating and viewing account information.
Role: Heuristic Evaluation, IA & Screen Redesign
Tools: Pen & Paper, Figma, Adobe XD
Platform: iOS iPhone 7
Timeframe: 2 Weeks
We started off by exploring and testing the application. Then we assessed a number of usability issues and established the following usability heuristics:
-
Recognition Rather Than Recall
-
Visibility of System Status
-
Flexibility and Efficiency of Use
-
User Control and Freedom
-
Aesthetic and Minimalist Design
-
Consistency and Standards
Usability
Heuristics
Severity Rating Scale
No usability issue
Cosmetic issue
Minor usability issue
Major usability issue
Usability catastrophe
3
2
1
0
4
Initial Sketches





Evaluation
& Improvements
The app is designed to fit an iPhone 7. Our team focused on the task flow of updating and viewing account information. We are fully aware of the constraint of the redesign. However, we are proposing to make a few small changes to the aesthetic of the app in order to improve visibility.
The original background colour had a red, blue, and purple gradient that was constantly changing. Our design is proposing a static dark blue background to maintain consistency. We are also proposing to change the active state colour for the tab bar from dark grey to red to provide more clarity.
We unfortunately couldn’t find the original typeface and the cineplex typeface FF Mark Pro was unavailable to download free of charge. Due to those limitations, we chose metropolis which closely resembles the original type.
Recognition Rather Than Recall
Before

Severity Rating: 2
As the first step of our redesign, we proposed to integrate Timeplay as a feature inside the Cineplex app - since Timeplay is typically used during the theatre experience.
This provides convenience for users who already have the Cineplex app and eliminates the need to download and sign in on another app. Often at times, users tend to forget their login information and miss the cut off time to play the game. With this integration, it’s reasonable to expect a considerable increase in app usage.
After
Visibility of System Status
Before

Severity Rating: 2
We propose to reduce the original two loading screens down to only one. There is absolutely no need to have a second loading screen as it was a bit confusing to see the message “Welcome to Timeplay” and then having to wait again.
Our proposed design integrates the animation that was used for connecting to server. We feel that it is more appropriate for the loading screen instead.
After
Flexibility and Efficiency of Use

Before

Severity Rating: 4
The flow was redesigned to allow users land on a welcome screen with three quick and essential options to choose from. From here, they can choose to go straight into the actual timeplay game, view their rankings or view their profile.
The jarring wifi modal was removed so users who are using the app outside of the game playing experience don’t have to be constantly reminded that they are not connected. Our proposed design also provides a more minimalistic appearance.
After
Flexibility and Efficiency of Use

Before

Severity Rating: 3
To improve the usability of the profile screen, we moved the tab bar from the top to the bottom of the screen. The Rewards icon (shopping bag) was removed to simplify the tab bar. It was inserted as a button on the bottom.
The hamburger icon was moved to the top left corner to allocate space for the settings icon. The new Settings icon doesn’t get lost on the page as in the original design.
As a group, we noticed the app was lacking a game-like feel. To fix that, we rearranged the information on the screen into a tier which generates hierarchy.
After
User Control and Freedom

Before

Severity Rating: 4
The original hamburger icon was reorganized to display information in a more concise way. The
information architecture looked mismatched and displayed unrelated topics.
We decided to create the Settings icon by grouping
together the topics that are most important to the user. This simplified design will not overwhelm the customer with to much information.
After
Aesthetic and Minimalist Design
Before

Severity Rating: 3
The original design had two ways for changing the user's Timeplay name. We consolidated the two options down to only one into "Settings" and reorganized the information on the screen to improve hierarchy. The gender option was removed as there was no need for it.
The background colour was changed to keep the page consistent within the app. The sign out button was removed due to the app's integration within the cineplex app, avoiding sign-in and sign-out redundancy.
After
Consistency and Standards

Before

Severity Rating: 1
For this screen, the user is able to choose an avatar of their liking. The tab bar and hamburger menu were updated to maintain consistency throughout the app. For standardization, the sorting buttons were changed to rounded edges and the font is matched with the new design.
After
Consistency and Standards

Before

Severity Rating: 2
On the My Rankings screen, we changed the style of the player statistics from button to bold text to maintain consistency and provide clarity. Lastly, we improved the filter option that allows the user to filter all categories instead of just two out of the four that was in the original version.
After
Final Prototype
