Mywellbeing Wellness App

CLIENT

New Horizons (Australia)

WHAT WE DID

Web Development
Backend Development
Animation

Overview

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 Challenge

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.

Wellness App

The Process

The users register with their details and contact details.
The users answer a series of interactive quizzes base on the eight domains.
The users are assessed which part of the eight domains they need to improve on.
The results are sent via the user’s email and they can post and share it on Facebook.

User Registration
Quiz
Assessment
Results

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.

Wellness GIF Laundry
Wellness GIF heart
Wellness GIF cage
Wellness GIF boat
Wellness GIF road
Wellness GIF crowd
Wellness GIF face
Wellness GIF body

The Solution

Animated vs Static

 

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.

Responsive Design

 

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.

The Results

Like!

Share: