As far as design trends and principles go, Google’s Material Design stands out as a guideline every designer should have a base knowledge of. While the strict nature of the rules Material design sets can make it appear restrictive, the base principles outline a clear understanding of user experience design.  Whether or not you want to follow every rule outlined, the idea of bringing real life elements and motion to digital design can be applied to majority projects.



This study of material design looked into the Material Design guidelines and what this means for designers. As part of this project, a re-design of the Hoyts (A New Zealand & Australian chain of multiplex cinemas. ) app was done to establish the benefits the Material design principles could make and allow the use of A/B testing to be done.

Hoyts Re-design

one line - what it's about

scroll over- before and after

then can have additional info at bottom

Guiding Principles


After developing an understanding of the Material design, these core principles were used as a guide to the redesign of the Hoyts app:


  • Improve the ease of use. The current app does not provide a good user experience. The navigation causes frustration to the user.

  • Bring cohesive branding to platforms. The current app changes colours, fonts and button styles between pages. The continuity between the app and the website is also lacking.

  • Improve the overall look of the applications. The current app is out-dated and busy. Material design principles such as “Bold. graphic and intentional.” And using shadows to convey hierarchy, as well as, motion to provide meaning, will improve this app and the user experience it offers.



Current App

Current Website Home Page  




Critique : 


  • The website and app are not cohesive. The website has a red Hoyts with a black background, while the app uses red and white. The font and over style is also different. 

  • Design changes throughout app. The button style changes from "pick your time" page to the "payment" page.

  • Payment page terms such as Z1 and Z2 are not explained and can cause confusion as to what the user is buying. 

  • The fonts change throughout, as does the shade of red. 

  • App "Movies & Times" page has no visuals, this makes it hard for user to quickly find the movie they are after. 

  • Menu is very busy, lack of white space used. 

  • Makes the user work to purchase a ticket. 

App and website re-design