New Horizons (Australia)
WHAT WE DID
Mywellbeing is an online tool that helps users learn about their strengths and weaknesses based on New Horizons Eight Domains of Wellbeing. The users are assessed based on the series of interactive questions in which the users answer by dragging the slider. The users receive an email of their results after the assessment, which they can also share and post on Facebook.
The client already had an existing UI and graphics which can readily be converted to a working website. With a tight deadline, we were given some tasks which were: to develop the front end to make pages work together; to create an animated transition of the illustrations to be used for the quiz; to develop a back-end system that captures the users’ data and send an email to them; to enable Facebook sharing function for the results.
Aside from a tight deadline, we need to make the web app work on mobile devices especially on iPad as it is the device to be used on their events. Because of this, we need to make sure that the scripts and graphics should be as light as possible without sacrificing functionality and interactivity.
To save time and assign tasks efficiently to the team, we broke down the flow of the web app into parts. The front-end and back-end were assigned separately and the illustrations were handled by the animator.
The scrubber is one of the key feature of the interactive quiz. The increments of the scrubber’s position determine the score of the users on each question: from the lowest score on the left to the highest score to the right. Each value corresponds to a specific timeline of the animation. Our solution was to convert the animation into sprite sheets in which specific frames can be controlled using the scrubber.
The web app was intended to be used on an iPad on their event, but the client decided to make the website viewable on desktops and other mobile devices too. The crucial part were the scrubber and graphics which must run and operate smoothly on touchscreen devices. By optimizing the graphics and script, we were able to successfully optimize the web app without sacrificing quality and functionality.