Table of Contents
This website is a project for Code Institute's January 2022 Hackathon, hosted in collaboration with digital recruitment firm SODA and their networking event SODA Social. The theme of the Hackathon was mindfulness and wellbeing in the workplace.
The website was created by Naoise Gaffney, Marina Pavlovic, Goran Kuzma, Eva Kuk and Adam Boley, with the project facilitated by Aisha Bushell. The team collectively decided on the team name "The Mind O'Holics".
The aim of the project is to help digital workers - those working in offices and those working from home - maintain their wellbeing and mindfulness whilst working. When working in an office, workers are often sitting down for long periods, and may not have particularly ergonomic workstations. Those working from home face these issues as well, and more besides - when working from home, it is all too easy for work time to spill over into personal time, with workers constantly in "work-mode", and unable to switch off from work.
Thus, the website's main feature is an adjustable timer with options of for 2 minutes, 5 minutes, 10 minutes and 20 minutes that can be activated by a user. The timer allows users to take some time away from work to focus on their own wellbeing by drinking some water, doing some breathing exercises, or taking a short walk. The idea is to break up the user's day and try to prevent burnout by giving their brain a break. The timer has a selectable background and an audio file of softy music that plays as the timer counts down.
The website also includes a resources page that functions as a signpost to other resources on mindfulness and wellbeing.
The project is deployed at Mindful Timer
The mockup is below:
- As site owners, we want to promote mindfulness and wellbeing
- As site owners, we want our site to be easy to use and navigate
- Visitors should be able to easily navigate the site's pages
- Visitors should be able to easily operate the timer and select from the pre-set timer options
- Visitors should be able to easily determine that the site's purpose is to provide tools to help them focus on their mindfulness and wellbeing at work
- Visitors should be able to easily register an account and log in to that account
- Returning visitors should be able to log in to their account
- Returning visitors should be able to reset their account password if they forget it
- Returning visitors should be able to delete their account if they desire
- Returning visitors should be able to update their profile
The website's chosen colour palette consists of blue, turquoise and green. These were chosen as they are pleasant to look at and may be associated with peacefulness, stress relief, balance and emotional stability.
Referring to the colour psychology websites Very Well Mind and Graf1x:
Blue is associated with calmness, serenity and peace. It is calm, stress-relieving colour. Blue is often used to decorate offices because research has shown that people are more productive in blue rooms.
Green is associated with growth and health. It is a refreshing and peaceful colour. Green is typically the colour of nature. It has a calming effect and is often considered a refreshing, relaxing colour. Green has been found to positively influence not only our emotions but our memories as well. Therefore, green has been employed to help users remember information.
Turquoise is a bright blue-green colour. Hence, it takes on the associations of both blue and green - the calmness of blue and the growth of green. Turquoise is also a bright, energetic colour much like yellow. Turquoise is associated with freshness,mental clarity, femininity, calmness, energy, serenity, creativity, balance and friendship.
Our colour scheme, with hex codes:
The Balsamiq Wireframes app was used to create the initial wireframes and update them through the creation of the project. Wireframes were created for each page, with full-size versions for desktops and reduced-size versions for tablets and smartphones. The project evolved in scope over time, and so these wireframes show the initial concept, not the final product.
Home page:
Timer page:
Register page:
Login page:
Resources page:
Github: Adam Boley's Github was used to host the main project files and folders. Other team members then forked to their repositories.
Gitpod: Most team members used the Gitpod IDE to create and edit the project files. Other team members preferred Visual Studio Code.
Flask: Flask was used to create a framework for the project.
Flask User: Flask User was used to create the registration and login functionality.
Bootstrap: Bootstrap was used to provide a framework for the project
Heroku: Heroku was used to deploy the application
MongoDB: MongoDB was used to provide the database instance for the project, and to store user profiles
Slack: Slack was used to communicate and coordinate the actions of team members, share screenshots, and join video calls to discuss the project
Google Docs: Google Docs was used to create and edit a shared document to note down ideas.
- The site itself serves to promote mindfulness and wellbeing
- The resources page allows users to access other mindfulness and well-being resources
- The site's navigation is built on modern User Design principles that allow for easy navigation
- The navigation bar in the header allows for easy and intuitive navigation
- The timer's operation is simple and intuitive
- The purpose of the site is easily discernable
- Account creation is simple and intuitive
- Account login is simple and intuitive
- Password reset is easily accomplished
- Account deletion is easily accomplished
- Users can easily update their profile
- The JShint JavaScript Validator was used to validate the JavaScript files of the project
- A number of warnings were detected for each file, but these were for code that was added in the ES6 version of JavaScript
- The W3C HTML validator was used to check the HTML by URL input from the Heroku-deployed site
- The W3C Jigsaw CSS validator was used to check the CSS rules by direct input
- The validator shows no errors and 6 warnings. One warning is for imported Google Font which cannot be checked and the other 5 are browser compatibility warnings
- The ExtendsClass Python Validator was used to check the Python files of the project by direct input
- No syntax errors were detected for either app.py or config.py
- The Lighthouse function of the Browser Dev Tools was used to check the performance of MindTimer. The site rates as good, but not excellent.
During on-going testing, one team member accessed the website on their iPhone and found that the sound for the timer function does not work. Other team members access the website on their Android phones and reported that the sound did work. The cause of this discrepancy is unknown.
The website has three main features:
- A timer that times down from 4 pre-set times - 2 minutes, 5 minutes, 10 minutes and 20 minutes. The timer plays an audio track when it times down, and video file plays as the background image.
- A blog page that displays posts. Authenticated users (i.e. those who have registered an account) can add blog posts.
- A resources page that acts as a signpost to other mindfulness, wellbeing and related resources.
- Over time, the team plans to add further content and functionality
- One idea explored during the project planning phase was a timer function that counts down from 8 hours. At various intervals, the timer would flash up a message reminding the user to take breaks from work to do various things, like drinking water, stretching and doing breathing exercises. The 8 hour value measures a normal workday, and would be aimed at users who work from home, where it could be difficult to switch off and stop work after they have done their hours.
- To accompany this function, the site could be expanded to provide guides on these stretching and breathing exercises.
- Users using this feature would then use the existing timer function to time discrete periods for these activities.
- A possible feature would an option for the user to change the audio file that plays when the timer is activated, just as the video backgrounds can be changed.
To run this project locally make sure you have installed the following:
To clone this project and run locally please follow the below steps:
- Login into GitHub with your account
- Go to the project repository
- If using Gitpod click on the "Code" button (located next to the green "Gitpod" button)
- From the dropdown menu copy the HTTPS URL
- In your local IDE open the terminal
- Change your working directory to the location where you want the cloned project saved
- Type
git cloneand paste copied URL from Step 4 - Press enter to create your local clone
- Install project requirements by typing
pip install -r requirements.txtin the terminal and pressing Enter
Register for a free account with MongoDB
- Create a new Project and call it 'mindful timer'
- Create a Cluster, choose the free tier option and select your region
- Create a new database and call it 'mindfultimer_db'
- Create Collections named "user" and "session"
- To run the project locally, in the terminal type
python3 app.pyand press Enter - This will open a localhost address, which is provided in the terminal output
- Either copy and paste the URL into a new browser tab, or hover over it and click the link
The website of this project requires back-end technologies such as a server, an application, and a database, so the website is deployed on Heroku, which is a cloud platform with a service supporting several programming languages, because GitHub Page can only host a static websites.
Before deploying the website to Heroku, there are three important steps to follow to make the application work in Heroku correctly.
- Create
requirements.txtfile that contains the names of packages being used in Python. It is important to update the file if other packages or modules are required for installation during the project. - Create
Procfilethat contains the name of the application file so that Heroku knows what to run. Ensure it is formatted properly or deployment will fail. - Push them into GitHub.
Once above steps have been followed the website can be deployed. Please find the steps of the deployment in Heroku:
- Create an account in Heroku
- Click New & Create new app to create a new app
- Put an app name, which must be unique, choose a region and click create app
- Go to Deploy section and click Connect to GitHub
- Search for the repository by the repository name and connect it
- Before clicking Enable Automatic Deploys, hidden variables such as IP address, PORT, SECRET_KEY, MONGO_URI and MONGO_DATABASE need to be recorded in Heroku. Go to Settings, click Reveal Config Vars and fill out necessary keys and values.
- Once all the hidden variables are recorded, then click Enable Automatic Deploys and click Deploy Branch (Main should be selected unless you want other branches to be deployed).
- When the app is deployed by Heroku correctly, there is a confirmation message and you can access the app.
Note
It is important NOT to set debug=True when deploying the website.
- The audio file for the timer was obtained from Pixabay
- The video backgrounds for the timer page were obtained from Pexels: Ocean background, Rain background, Fire Background, Underwater background, Buddha background
- Blog images from Pexels
- Resource hero image from Unsplash
- Illustration from Undraw by IRA Design
The following resources were used in the Resources page of the Mindful Timer website
The team:
-
Adam Boley (and his cat)
Our Facilitator, Aisha Bushell