WORKPLACE WELLNESS
BACKGROUND
Did you know that your quality of sleep is the top correlating factor effecting your mental health state and stress levels? When your sleep quality declines so does the quality of your work.
Welcome to the website that can help all users elevate to a better mental health state with backed by research utilities to get a better night’s sleep and achieve the WHO’s (World Health Organization) daily recommendation of proven catalysts. Additionally, the website is intended for employers to monitor their employee’s health and sleep quality to provide their employees company benefits to accommodate.
Project Objective: Create a website to provide mental health support as an employer for employees such as: mood tracking, stress management, or personalized coping strategies based on provided metrics from a data set.
Target Audience: Employees of all ages struggling with mental health and/or sleep quality, and employers of all ages from any company.
Link to deployed site: https://workplace-wellness.onrender.com/
Usernames: blanfer0 [admin], Jtuminelli1 [user], Dprowsea7 [user]
Password: The password feature is not yet fully incorporated, so you can type anything.
-
MY ROLE
As the sole UX/UI designer on this project, working alongside a data analyst and engineers, I was in charge of defining the MVP. Along with creating the wireframes, sitemap, persona, user flow. I made iteration changes after usability feedback and handed the prototype off to my engineers.
-
RESTRAINTS
As this project was for the 2024 Winter Chegg Skills Hackathon, we had a time restraint of a week and a half to complete it.
We were short one UX/UI designer and a computer engineer, but we put in extra effort to make up for the lack of members.
Our team’s communication was limited to Zoom, Slack, Trello, Google Suite, and Figma commenting as we were working throughout 3 different time zones.
-
RESOURCES
Due to the time constraints all teams were given the scope, user stories, two personas, and coping methods to incorporate as resources.
PERSONA
I created this persona based off of the given user stories for the project.
SITEMAP
In the user stories and personas given there were administrative figures, and this sitemap demonstrates how I decided to organize the website based on the provided materials. With the given personas I believed it was best to have separate categories for “admin” and “user”. Along with the subcategories focusing on the needs given in the user stories.
COMPETITOR REVIEW
Advantages: The colors are very appealing and soothing to the eyes. The implemented audio with the ability to add it to a customizable playlist is a great feature. If users are looking for an app specifically for relaxation and meditation then this platform is perfect for that. The number of “awakenings” is a thoughtful and unique feature.
Disadvantages: The platform solely focuses on meditation and relaxation. Thus, ignoring other factors that could be disrupting a user’s ability to fall asleep. There’s an accessibility issue with the color palette of the platform. Some of the functions are a little vague (i.e. “sleep regularity”).
Advantages: The color palette incorporates colors that both encourage sleep and relaxation. The platform utilizes empty space well. They supply their users coping methods. The graphics for the coping methods are very appealing. The user being able to add their customized routine alarms is a useful feature. The calculation of sleep quality is very clever.
Disadvantages: The adding of other countries’ average sleep quality is interesting information but is not relevant to the user. Besides that, the platform is very appealing and informative.
USER FLOW MAP
For the user flow I decided to make each screen include the features and functions that were given in the user stories to avoid missing any pain points. Additionally, I wanted to incorporate the KPIs given by our team’s data analyst (as he did an amazing job) on nearly every frame.
TYPOGRAPHY & COLOR PALETTE
Reasoning: I decided to go with the classic Arial font, because I knew that for a website for mental health I didn’t want a “ridged” looking font. I decided to stick with a singular font to avoid clashing of styles.
Reasoning: Although research suggests that red and warm hues of red and orange are best for falling asleep while blue is the ideal color for relaxation, calmness, and stress-reduction. Source: Blue lighting accelerates post-stress relaxation: Results of a preliminary study - PMC (nih.gov)
The main goal of the website is to reduce their mental stress along with aiding other factors (BMI, blood pressure, physical activity) that contribute to a lack of good quality sleep throughout the day. I intentionally used darker hues opposed to brighter hues to satisfy need for reduced eye strain for better sleep.
ACCESSIBILITY TESTING
WIREFRAMES
USABILITY TESTING & NEW ITERATIONS
Since we were on a time crunch, we did internal testing. Our three engineers and data analyst went through to check any issues and to make suggestions.
Our data analyst informed me that BMI is not a % so I had made this change for accuracy of input information.
This fix avoided new users from distrust in the research and data collection process.
I had made changes after going in for the second round of iterations as I realized that the "sleep quality guides” didn’t perfectly fit the coping methods that the project was requiring.
For the admin and user homepages I wanted to add a footer, but later realized that resizing the compenents weren’t enough. So, I redesigned them into more empty-space friendly components.
The same was done for the “admin report” pages and “user log activity” pages.
PROTOTYPE & DEPLOYED SITE
Link to deployed Workplace Wellness deployed site.
https://workplace-wellness.onrender.com/
Usernames: blanfer0 [admin], Jtuminelli1 [user], Dprowsea7 [user]
Password: The password feature is not yet fully incorporated, so you can type anything.
Link to my high-fidelity frames in Figma.
TAKEAWAYS
I’m beyond grateful for having this opportunity to successfully complete my first Hackathon and for it being the first Hackathon event of Chegg Skills!
I learned what it truly is like to work as a UX/UI designer alongside data analysts, back-end engineers, and front-end engineers in the real world. Which makes this experience beyond measures so valuable. I really enjoyed working with all of my teammates and collaborating with them. Also, learning how to collaborate when presenting a project with different departments was a very valuable experience.
This was my first project where I didn’t have any hiccups or technical difficulties in Figma so I’m very proud of me becoming so skilled in Figma and organizing my components so neatly for engineers.