Woof off Your Stress

— a dynamic serving web app that helps to engage users' mind and body to divert their attention from anxiety and stress

MFADT project in Parsons School of Design


Designer, Developer
(UI/UX design & prototyping)


Lisa Ho (UI/UX, graphic & motion graphics design)
Seong Jin Park (UX & motion graphics design)


Nov. - Dec. 2018


Digital Product Design


Adobe XD, ProtoPie
Node.js, HTML, CSS, JavaScript, jQuery

Concept Statement
Stress has been a growing force in our society especially in the digital age we are in now. With our group members’ background and interest in mental health, we decided to focus on the issue of stress. For our project, we are creating a website that prompts users to use their phone to play a mobile task-oriented game that requires body movements. This helps to engage their mind and body, not necessarily to reduce stress but to divert their attention from thoughts and problems. In the end, users are prompted to return to the desktop website to smile for the camera and enter a code to unlock a “reward” which is a personalized art pattern with easing motion.

(Click on the phone screen below to woof off your stress!)

Design Process


Research - Technology vs Mental Health
There is no doubt that as technology advances, more products and services are being digitalized, there will be more screen time and use of our phones, tablets, and computers. However, much research has shown that more screen time on our digital devices, the more stress we seem to get. It is an easy solution to say just cutting down screen time, but it’s also hard since so much of our life is tied with the Internet now. With this in mind, how do we use technology as a way for us, not against us?

According to the annual "Stress in America" survey released by the American Psychological Association, American stress levels rose from 4.8 to 5.1 out of 10, between August 2016 and January 2017 among 3440 adults ages 18+ who reside in the U.S. Besides, young Americans continue to report higher stress levels than older generations.

Based on our research, we decided to focus on how technology can address the issue of stress for younger generations.


Target Audiences
Our target audiences are college/postgraduate students and early young professionals who have stress and work/projects in their daily life. They lead a busy and in some ways, a stressful life.  

Anna and Jim are our personas whom we identified through our research and user interviews. We concentrated on their needs through the process of designing the website.

The user was stressed out while working on the computer. He started searching for a possible way to reduce his stress. After the bothering seeking process, he played a one-button game and felt okay to keep working on the computer.

User Journey Map
This user journey map points out the user's every step and experience accordingly in the process. Derived from the map, we understand more about the user's goals/needs and see our opportunities as designers as well.

Opportunities & Design Questions
How might we utilize the devices that users work on the most or already own?

How might we get users to start playing the game/using the tool as soon as they found it?

Based on the personas, we realized that users worked on computers much more often than tablets and mobile phones. According to the user journey map, we found that websites as the tool or game itself were the most efficient way for users to start playing. Therefore, we decided to utilize a desktop website as the start point of the journey of our project.


Key Messages & Takeaways for Audience
  • Shift of the state of mind away from stress
Our main goal of the project is to utilize a desktop website to get users out of a stressful situation and reduce anxiety.

  • Sense of satisfaction
Inspired by one-button games and websites like Paper Planes and Thisissand, we would like to make a task-oriented game for users to get a sense of achievement and satisfaction after interacting with our website.

One-button game - PC Breakdown

  • Encourage physical movement & smile
Based on our survey, our target audience usually sits at the computer and keeps the same pose for a long time. Thus, we want our users to leave their chairs or have body movements with prompts for them to go back to work.

According to research, a smiley facial expression can induce the mood it portrays, so we take advantage of a smile recognition to encourage users to smile before presenting the final reward to them.

  • Mindfulness towards stress
Besides diverting users' attention from the current condition, we also want to provide knowledge for them to understand how to manage their stress in the future.

Dynamic Serving Web App
To include the key messages and achieve our project goal, we decided to design a dynamic serving web app.

“Dynamic serving is a setup where the server responds with different HTML (and CSS) on the same URL depending on which user agent requests the page (mobile, tablet, or desktop).” - Google Developers

While we collected several relaxation techniques to reduce stress, we ended up applying exercise, social support, journaling, and smile and laugh to our project.

A Series of Tasks on Mobile
Users have to finish a series of tasks to generate the code to unlock the final reward.

1. Draw something
2. Share the drawing with a friend
3. Shake your hands for 1 minute
4. Walk 50 steps






First Prototype
(desktop - intro motion rough version)
(created by Lisa Ho)

(mobile - technical prototype)
(created by Anny Chang)

(desktop - reward motions)
(created by Seong Jin Park)



We got feedback that while no clues were showing there would be four tasks in a row, it made users impatient after they finished the second/third mission and saw there were more tasks to do. Based on the feedback, we redesigned and decided that users would only have to complete one task at once to receive the code when they entered the mobile site.

Four Tasks on Mobile (updated)
  • Draw on the canvas to reveal something
Draw something - We realized that some people felt more anxious while asked to draw something without any clues or references. By changing this task to reveal the whole hidden picture, we expect users would have a sense of achievement and satisfaction after finishing it.

  • Write down any negative thoughts and throw it away
Share the drawing with a friend - Sharing with your friends about your thoughts might reduce stress, but we found that sharing a drawing without any words did not have the result we had expected. Therefore, we switched this task to a method that happened in some mental health counseling to distract users' attention from negative thoughts.

  • Shake your hands for 30 seconds
Shake your hands for 1 minute - Some users responded that one minute was too long, so we decreased the time to thirty seconds.

  • Walk 50 steps

Flow (updated)

Introduction Motion
(created by Lisa Ho)

Desktop Screens

Mobile Screens

Four Stress Facts
(display on reward motions)
  • Social Support
Close relationships such as family and friends help you beat stress!
Be around with those you love more!

  • Journaling
Writing down your thoughts has shown to help people better deal with stress & negative emotions.

  • Smile and laugh
Get together with your friends and family to have fun! Laugh and do the things you love.

  • Exercise
Get your body moving! Even just a 20 minutes walk, run, swim, or stretch have shown to help reduce stress and boost up positivity.

Reward Motions
(created by Seong Jin Park)

Design System


Hi-Fi Prototype
(created in Adobe XD & ProtoPie)

Demo Video - Technical Prototype
(created with HTML, CSS, JavaScript, jQuery & Node.js)

Future Iterations
For future iterations, we would like to incorporate the existing function such as smile recognition or other interactive elements to make the final reward more personalized to attract users to keep using our website. Besides, we would like to develop more different tasks to increase users' interest.

© 2020 Anny Chang.
All Rights Reserved.