---
# System prepended metadata

title: Web App UI Group Project

---

# Web App UI Group Project
# Link to CodePen: https://codepen.io/niur735/collab/NWrqKgj
Members: Chelsea Zhang,Xiaomeng Yang, Ruowen Niu,Linfan Gan
# Problem：Many people have problems with sleep and would like to try meditation to improve it, but they do not have access to enough related resources, such as music, scenario, or tutorial.

# Solution: A web page includes various meditation music and scenarios, as well as a sleep quiz for personalized recommendation and statistical chart for tracking sleep and meditation habits.

# Components of page:
## 1.Benefits of meditation (symbols+like button)-Linfan Gan
**Interactive function: each type of meditation has a heart button, our users will be able to use the "heart button" to mark the types of meditation they'er interested in knowing more about.**
* performance 
* stress
* emotions
* sleep
* health 
* lifestyle
* inspiration 
* relationship
 

## 2. Environment Preference (photos+sound button)- Xiaomeng
**Interactive Function: When users click on the selected image, there's hover affect of the image and animated text info. They can then click the sound button to hear the environment.
* photos of different soundscape 
* "forest, beach waves, home sweet home"
* animated hover image + information text 
* sound buttons to play different sounds

## 3. Sleep Quiz (checkbox+submit+recommendation)- Jiaen

**Interactive Function: Users will engage in the quiz by selecting and submiting answers. The website will generate a meditation plan/recomendation for them.**
* how many hours
* how long does it take to fall asleep

* select options that you care(multiple choice)
  - fall asleep sooner 
  - reduce stress and anxiety
  - new experience
 * "submit for recommendation" button - leads to personalized recommendation according to the given answers above

## 4. Data Visualization(Graph) - Ruowen
**Interative Function:Users will be able to record thier meditation time with a visual and interactive graph**  
* meditation time tracker/graph
* Users can see their meditaion time by day/week within a weekly view/monthly view. 
* Users meditation time are sorted by three different situation: Study /  Sleep / Bath
* Interactions:
     - click week/month button to switch view
     - click export button to export chart as pdf (want to have this function)

* This components can help user understand their needs of meditation better.



# Visual Structure Sketch
![](https://i.imgur.com/OidYYay.png)



