Gamifying Personal Health
Research Assistant
August 2018
One month
Design brief
This is a part of my work as a UX designer for the Wellness Technology Lab at Northeastern University, Boston, MA. I worked with PhD student Elizabeth Stowell and Prof. Andrea Grimes Parker to design a health app to promote physical activity. This work involved designing graphical assets for Android in addition to interaction design, interaction-flows, and information architecture of the app. In the resulting app, the user grows a virtual flower and nourishes it using the physical activity data collected from phone and activity tracker (Fitbit) sensors. The final design (as of July 2018) is presented below:
![screen-17.jpg](https://static.wixstatic.com/media/746670_0a8b1c9a8b4947349f9942d4e906cc18~mv2_d_1674_1476_s_2.jpg/v1/fill/w_600,h_531,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/screen-17.jpg)
![ezgif.com-gif-maker (1).gif](https://static.wixstatic.com/media/746670_307ea7ef5aa34269a2c5cbfdda0aaba6~mv2.gif)
![ezgif.com-gif-maker (2).gif](https://static.wixstatic.com/media/746670_530aeffd99f44f638b00148c2ee0d16d~mv2.gif)
[Left] Dashboard screen where the user can see the growth of their flowers. [Right] Plants grow as the user meets their fitness goals.
Process​ and Iterations
​
I first created a UI-flow based on insights and design recommendation from a user research done by PhD students.
![flower app.jpg](https://static.wixstatic.com/media/746670_c1346d4890d849cb9d322add287b967c~mv2_d_8024_10224_s_4_2.jpg/v1/fill/w_1074,h_1369,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/flower%20app.jpg)
User Flow Diagram
The overall longitudinal scenario designed for the app was:
Day 0 (the first day of app usage):
-
User login
-
First run experience (instructional)
-
User selects the flower to plant
-
User sets up a profile(optional)
-
Dashboard is activated
Day N (a given :
-
View dashboard
-
Hamburger menu to access -
-
User Profile
-
Performance Metrics - Fitness stats, data logs, fitness routines, tutorials
-
My garden
-
Community Garden
-
Activity Feed
-
Shop-seeds/pots
-
​​
Day of Bloom:
User can now plant the flower in their garden
Once the scenarios were well defined (that followed health behavior models), I designed the detailed user-interfaces incorporating the behavior change strategies prescribed by the research team and their collaborators. The final design includes the stages of growth for 10 types of different flowers in the app, which grow based on the sensor readings from FitBit devices. Also included are different designs for pots which can be customized by the user.
![ui screens.jpg](https://static.wixstatic.com/media/746670_2d0c76e87f5e4b709c73c6fdf5d794e4~mv2_d_9534_11136_s_4_2.jpg/v1/crop/x_838,y_0,w_7956,h_11136/fill/w_1122,h_1571,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/ui%20screens.jpg)
Finally, I created visual assets for 10 flowering plants (each with 7 stages of growth), and 10 different pot designs for users to choose from. All the assets were designed to be adaptable to different Android phone resolutions.
![123-13.jpg](https://static.wixstatic.com/media/746670_de376ebc3c8a454bae60ef86496e3b2f~mv2_d_15105_10448_s_6_4_3.jpg/v1/fill/w_974,h_674,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/123-13.jpg)
Assets for ten unique flowers with seven growth stages. The pots were also made unique so that the user can unlock new pots each time
Design responsibilities:
Interaction design, user experience design, information architecture, graphic design and illustrations​​
​
Tools used:
Sketch, Adobe illustrator, Wacom tablet