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:

​

1. Recognition Rather Than Recall

2. Visibility of System Status

3. Flexibility and Efficiency of Use

4. User Control and Freedom

5. Aesthetic and Minimalist Design

6. Consistency and Standards

Severity Rating Scale

No usability issue

Cosmetic issue

Minor usability issue

Major usability issue

Usability catastrophe

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

Key Learnings

For this redesign challenge, I throughly enjoyed collaborating with my two teammates. We worked well under our given time constraint of 2 weeks (while working on another project simultaneously). During our team meetings, we had open communication, supported and challenged each other's ideas to the next level. We were able to successfully divide our roles and efficiently perform them.

I learned how to work within the constraints of an app redesign - in this case, maintaining the brand look as much as possible. It was a pleasure collaborating with my teammates in Figma. It allowed us to work on the same artboards while staying consistent. 

Future Opportunities

Our design challenge only focused on one task flow of the app. If given more time, I would like to redesign the rest of the app to further improve its usability. For instance, the actual Timeplay experience can be elevated with consistency and minimalistic design.

Also, I would like to integrate the Timeplay app into the Cineplex app on a greater scale - as an icon in the tab bar. Given the redundancy between "What's On" and "Theatres", the Timeplay icon can replace one of them in the tab bar. I believe this integration will dramatically improve usability and convenience for the users.