Joshua Briley
UI Designer & Front End Dev

NHL Hat Trick Challenge

NHL Hat Trick Challenge NHL Hat Trick Challenge

NHL Hat Trick Challenge


Design and Develop a multi-platform game for Android and iOS devices, as well as mobile and desktop web.

My Role

Primary designer and front end developer in AngularJS environment.

Creative Process

NHL wanted a very slick native looking interface for this app, so I went directly to the ios human interface guidelines, and material design style guides for ideas. The scope of the game was fairly straight forward – answer three questions each game day; if you get them right, you earn a hat trick. After having read through the opinions of iOS and Google, we stumbled across Ionic. This turned out to be the perfect application for our app store products. It was just a matter of designing the game interface within the scope of Ionic, and making desktop match (mobile first!).

Project Duration

Design and development cycle was 6 weeks.

Design Challenges

While Ionic presented a pretty awesome foundation for laying things out for mobile and tablet, it also presented a highly opinionated method of development. Simple changes to things like headers became a serious undertaking.

Challenge Resolution

Once I grasped how Ionic used overflow on their containers, and figured out their method of using design variables, it became easier to bend the framework to my will. The way Ionic injects platform specific classes into the body element is wonderful, by the way.

grade-a platform-browser platform-ios platform-ios8 platform-ios8_0 platform-ready

Business Result

Follow up contract awarded for NHL Bracket Challenge fantasy game.

Back to Portfolio