What Did We Do?
My amazing team and I were tasked to redesign a task flow within a mobile application according to usability heuristics and while adhering to design constraints. We decided to examine TimePlay, an interactive gaming experience for moviegoers. TimePlay facilitates various games and movie trivia for moviegoers to participate in before the movie starts. Upon examination, we discovered a few usability issues that we wanted to address.
Platform: Mobile
Duration: 2 Weeks
My Contribution:  Usability heuristic evaluation, initial sketching and screen redesigns
Team: Rochelle, Franka and myself
Tools: Pen & Paper, Figma, Adobe XD
Why TimePlay?
Partly it was because our team loves games, and as much as we loved using Timeplay we also remembered the frustrations of trying to play when we would go to the movies.
Such as missing the game because we forgot our login or was not connected to the the WiFi. 😢
Usability Heuristics
After exploring and testing the application, we decided to focus on the five 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
Each usability heuristic will be rated according to the following severity rating scale. We will be evaluating the flow of updating and viewing account information.
Before We Get Started
While we were aware of the design constraints of keeping with the theme and colours of the application, there were some aesthetic changes we decided were necessary to improve visibility and usability.
Aesthetic Changes

Background Colour
The original background colour had a red, blue, and purple gradient that was constantly changing. We decided to change it to a static dark blue background to maintain consistency and visibility.
Unfortunately, we 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 most closely resembles the original type.
State Colours
We changed the active state colour for icons in the tab bar from dark grey to red to provide more clarity. The dark and faded grey in the original application used to denote "active" seemed to imply the opposite which can be confusing.
Initial Sketches
Our initial sketches of TimePlay. We played around with how to reorganize the different elements on the screen and experimented with moving the menu bar to the bottom of the screen.
Recognition Rather than Recall
Severity Rating: 2
For the first step of our redesign, we proposed to integrate TimePlay as a feature within 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.
Visibility of System Status
Severity Rating: 2​​​​​​​
TimePlay had 2 loading screens, which seemed redundant. So we decided to reduce that down to one loading screen to shorten the wait.
Our new design integrates the animation that was used to indicate that the app was connecting to the server. We felt that this is more appropriate for the loading screen and gives a better sense of consistency.
Flexibility and Efficiency of Use
Severity Rating: 4
In the original app, the main screen goes straight to attempting to connect to a TimePlay server. However, users may not necessarily to be using the app to play a game, perhaps they want to view other information such as their rankings or profile.
We redesigned the main screen to give users 3 quick and essential options to choose from. From here, they can go straight into playing TimePlay, view their rankings or their profile.
We removed the persistent “not connected to 'TimePlay' Wi-Fi” warning banner so that players who are using the app outside of the game playing experience don’t have to be constantly reminded that they are not connected.
Flexibility and Efficiency of Use
Severity Rating: 3
For the profile screen, we started off with moving the tab bar to the bottom of the page to improve usability and to follow more conventional standards.
Next we removed the “Rewards Icon” that is the shopping bag and made it into a button on the bottom of the page to simplify the tab bar
We moved the hamburger icon from the tab bar to the top left corner, allowing us to allocate a space for the settings icon in the tab bar so that the settings icon doesn’t get lost on the page as in the original design
The loyalty program button was also removed since it was a button that wasn’t working at all and can be reintroduced in the hamburger icon instead if needed. 
Lastly we rearranged the user information on the page into a tier to show hierarchy and to create more of a game-like feel that we felt was lacking in the original design.
User Control and Freedom
Severity Rating: 4
We reorganized the information in the menu icon to make it more concise. We noticed that the information provided was not relevant to the user so we simplified the menu selection as to not overwhelm the user. We took the simplified menu and put them under the "Settings" icon in the tab bar.
Consistency and Standards
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 a standardized look, the sorting buttons were changed to rounded edges and the font is matched with the new design. 
Consistency and Standards
Severity Rating: 2
On the "My Rankings" screen, the style of the player statistics in the original was done in the style of a CTA, but they were not functional. So we decided to redesign the statistic information to be more simple, without the rectangles. 
Lastly, we improved the filter option that will allow the user to filter all categories instead of just two out of the four that was in the original version.
Aesthetic and Minimalist Design 
Severity Rating: 3
While exploring TimePlay, we realized that there were multiple ways to update account information. We decided to consolidate it all into one screen and reorganized the information to improve hierarchy.
We added an ‘other’ option to the gender section in case our user didn’t identify as either male or female to promote inclusiveness.
And then we removed the sign out button because we decided to integrate the app within Cineplex to avoid any extra sign-ins.
Before and After Comparison
"Having a good team makes a world of difference!"
Key Lessons
I thoroughly enjoyed collaborating with my teammates. Given the time constraints and other simultaneous projects, we worked very well together, delivered the redesign on time.
Having a good team makes a world of difference!
Our success was due to our open communication, our ability to support and challenge each other ideas.
This challenge taught me to work within given constraints, and if certain changes are needed, being able to have the reasoning to back up those changes. 
Future Opportunities
Since our design challenge only focused on one task flow of the app, we would have liked to redesign the rest of the app to further improve its usability and consistency.  The TimePlay experience can be further elevated with consistency and a simple and minimalist design.

You may also like

Back to Top