The Lavender Project

home page
welcome
breathe
5 senses
additional resources
about us

Inspiration

This project was inspired by the lavender flower, which has calming properties. We hope that this is reflected by our project as well through the design and implementation. In addition, as college students, we face stressful situations very often and we believe that using technology to implement a solution to promote mental health care would be beneficial as we all use tech.

What it does

This website takes the user through a series of activities aimed to ground them. They are first taken to the welcome page which allows them to click “Let’s Get Started”. Then, they are taken to the “Welcome” page which allows them to denote how they are feeling from a range of “I could use some support” to “I’m doing great”. This allows them to reflect and think about their emotions. Then, they click “Submit” to move to the next page. They are taken to a breathe page, where they are encouraged to breathe in accordance with the animated flower. When they are ready, they can then move to the next page. The next page works to ground the users in accordance with their senses. As they finish each activity, they click the space bar and will be greeted with a message encouraging them to continue moving to the next question. Finally, when they finish, they click the next button to see additional mental health resources. Users are also able to navigate to the home page and the about page through the links at the bottom of the page.

How we built it

The application was built using HTML, CSS, JavaScript, adobe illustrator, and microsoft one note. Using HTML, we designed the text of the website which also tied the stylistic elements to CSS.This included transitions such as the flower rotation. The user interaction element of clicking the space bar for user interaction was done using JavaScript.

Challenges we ran into

Some challenges we ran into were implementing advanced CSS techniques such as for the animated flower and the color changing screen. We also wanted to make the website as friendly as possible which required us to research designs that would be best implemented for a mental health care app.

Accomplishments that we're proud of

We are proud of creating a good UI/UX experience. This was done by overcoming challenges such as using animations and aesthetically pleasing color schemes. Overall, it is able to support our main purpose of serving as a relaxing and comforting tool to help someone who is struggling.

What we learned

We learned how to animate objects within CSS and how to use CSS techniques to deliver a pleasant experience for users. In addition, we strengthened our JavaScript skills by using onAction events to personalize the experience for users.

What's next for The Lavender Project

For future iterations, we’d like to expand this project by providing more exercises for users to practice. In addition, we hope to have more user input to personalize the experience. Also, this project is designed as a web application, and performs optimally on a computer screen. In the future, we hope to design a mobile application, which will increase convenience for users.