Relax
Early Ideation
Intro Page
This is a wireframe of the intro page where users are given a brief explanation of what Relax is and what it can do for them.
Selection Page
When the user presses the continue button, it leads to the prompt and time selection page.
Users select one or more prompts they wish to be included in the reminder they receive when the alarm goes off.
Users then select how much time they want to elapse before they are given a reminder and press the submit button.
Alarm Modal
Once the prompts and time are selected and submitted, and the time the user selected has elapsed, a modal with a reminder to take a break pops up.
The user sees a prompt based on six of the eight dimensions of wellness. These prompts are shown based on the length of the users' break.
The user can dismiss this prompt to start again.
About Us Page
This is an overview of the project, the team, and the tools used to make this project.
It appears when the user presses the universal menu icon in the upper right hand corner of the page and selects about us.
Figma Prototypes
Intro Page
Users read an introduction to Relax and what it is; once they click the "Learn More" button, they move to the Selection page.
Selection Page
On the selection, page users select which activities for which they want reminders. These options represent six of the eight dimensions of wellness.
They can select one or more of these options and are given prompts in the alarm modal from those selections.
After this, the user selects the amount of time they want to elapse before their reminder and prompt and click the refresh button.
Alarm Modal
While the user waits for the time they selected to elapse, they see visual feedback of how much time is left represented by the clock image on the left.
Once the time has elapsed, a reminder modal pops up and prompts the user to complete a wellness activity. Only accomplishable tasks within the timeframe appear. Links to resources and activities can appear here.
The user can close the modal and restart the timer.
Coding the Prototype
Dev/ Designer Collaboration
We collaborated as a team on the CSS/ HTML and Javascript coding of the site.
We used Anima, an extension to Figma, to export the UI and interaction design of the site to HTML/ CSS. From there. We added Javascript to make the site fully interactive.
