Amber Leaf (JTI)

Interactive Game & Prototype (UI)

Whilst working at Brandwidth (design agency), I designed the mobile version of an interactive game for a rolling tobacco brand.

Designed using Sketch and After Effects, prototypes created in InVision.

Project Overview

What I Did:

  • Developed a simple UI pattern library
  • Created animated elements
  • Mobile layout design - UI
  • Created interactive Prototype via InVision

The Brief & Original Design:
I worked with a developer to create a simple spot the difference game for users registered to JTI. The user has to navigate around a 3D product model to identify the missing element and win a limited edition prize. Before joining the project, the desktop version of the game was already made by a previous agency and so was asked to create a responsive design. In addition I introduced animations and additional components to enhance the design and simplify the overall user experience (please see notes below).

Visual Elements
(UI Pattern Library)

I enahanced and added new elements to the pattern library such as interactive states which were not originally considered when the desktop version was created.

Animations

Box model rotation - created to demonstrate how the user's finger movement can interact with the box model to rotate it.

Correct Answer Reveal

InVision Prototype

An interactive demo, to show how the user experiences the game’s full user journey as well as animations and interactive elements.

Available For Work

If you’re interested in working with me or want to know more about my work, please feel free to get in touch!

Contact Me Back to Portfolio