Timeplay

Heuristic Evaluation

Role: Designer
Context: Heuristics evaluation and redesign on any application
Duration: 2 Week collaborative project

The Project

On this project my team and I had to select any digital application/website and conduct an effective heuristic evaluation. With the evaluation we gave recommendations for improvements and applied them into a new digital design. Since this was a heuristics evaluation we focused on improving the application without changing the physical design of the application.

My team and decide to evaluate Timeplay a live interactive gaming platform for moviegoers within Cineplex movie theaters. The user task flow that we decided to focus on was updating and viewing account information.

Heuristics

We started to explore Timeplay and tested the application. After reviewing the application we noticed a few a 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 Standard

Although we were aware of the design constraints keeping within the design theme of the application. We as a team decided that there were some changes to make to the aesthetic of the application to improve the interface.

Aesthetic Changes

Background Color

The applications had multiple backgrounds, one being an ever changing gradient of pink, blue and purple and the other being a static blue. The background colors showed inconsistency so we decided to keep the static blue background to maintain consistency and visibility throughout the application.

Typeface

Unfortunately the original typeface and the Cineplex typeface FF Mark Pro was unavailable to download free of charge. Due to the limitations, we chose Metropolis which most closely resembles the original typeface.

State Colors

We also decided to change the active state color. Since the color was a dark grey it blended in with the background. We decided to change the color to the same bright pink color used on the buttons within the app. To provide more clarity and consistency.

Severity Scale

When evaluating the application my team and I used a severity scale to help us prioritize the heuristics throughout our task flow. Our scale ranged from 0-4 and worked as followed:

0

1

2

3

No usability issue

Cosmetic issue

Minor usability issue

Major usability issue

4

Usability catastrophe

Initial Sketches

Before

Before

Before

Before

Before

Before

Before

Before

Evaluation

After

After

Recognition rather than recall

Our first step of our redesign was to implement the Timeplay app within the Cineplex app. Since Timeplay is a game played within Cineplex theaters we thought it would be more convenient to have one app that is related to the theater experience.

 

We also noticed that when you enter the Timeplay application to log on to play the game you have to enter multiple login information which can be frustrating and causes customers to miss the cut off time to enter the game. With this integration  it is expected to have an increase in the app usage.

Severity scale:

2

Visibility of System Status

We suggested the application only needed one loading screen. Since the application had two it made the waiting period feel longer and frustrating to enter the app to play the game. .

 

We suggested that the  animation that was used for connecting to server. We feel that it is more appropriate for the loading screen instead.

Severity scale:

2

After

Flexibility and Efficiency of Use

We redesigned the flow to allow users land on a welcome screen with three options to choose from to help them easily navigate to where they want to go. From here, they can choose to go straight into the actual Timeplay game, view their rankings or view their profile.

 

We removed the wifi modal so that users who are using the app outside of the Cineplex theaters don’t have to be constantly reminded that they are not connected to the wifi. 

Severity scale:

4

After

After

After

Flexibility and Efficiency of Use

On 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, and was inserted as a button on the bottom of the screen.

 

The hamburger icon was moved to the top left corner to clean up the tab bar. We moved the settings icon into the tab bar so that it is more convenient to use and doesn't blend into the background.

We also rearranged the information on the screen into a tier which generates hierarchy and provides a more game-like feel to the application.

Severity scale:

3

User Control and Freedom

As a team we decided to reorganize the information that was provided in the hamburger icon. The information architecture was ill-sorted and displayed unrelated topics.

So we decided to group the information and separated the most important and most used information into the setting icon. Any extra information was moved under the hamburger icon. This simplified the application and made it more user friendly. 

Severity scale:

4

Aesthetic and Minimalist Design

Within the original design you were able to change your profile name on two different occasions. We fused the two options into one under the "settings' icon we then rearranged the information to provide better hierarchy and removed the gender selection since there was no need for that.

We changed the background to the static blue to keep the application concise. We also removed the sign out button since the application is integrated into Cineplex app and we want to avoid a repetitive action.

Severity scale:

4

After

Consistency and Standards

So for our task flow the user is able to change their avatar .

We updated the design and rounded the buttons on the buttons to keep the application consistent.

Severity scale:

1

After

Consistency and Standards

On the rankings screen we noticed that the top provided information looked like buttons. So we changed it to bold text that it is not confusing to the user. We changed the background to the static blue and updated the tab bar and icons. Lastly, we created a filter button that is more visible and easy to use for the user. 

Severity scale:

2

Final Prototype

Key Learnings

With the redesign challenge I had a lot of fun collaborating with my teammates. I learned how to schedule and manage our meetings and work along side other multiple projects. We challenged each others ideas and helped elevate our project to its fullest potential given the 2 week deadline.

 

I learned how to stay within a redesign constraints in this case with keeping the brand style and aesthetics. I learned how to evaluate heuristics and had the chance of improving my skills. I also thoroughly enjoyed collaborating on Figma where we were able to design on multiple art boards helping us staying consistent thourought our collabiration.

Future Oppertunities

For a future task I would like to focus on the actual game playing experience. This is a task that we did review but due to time constraints we decided to focus on a task that was manageable. 

When we looked at the game playing experience we noticed a few heuristics that could improve to make the experience more flawless. I think this task has a lot of opportunity to explore different designs and experiences.