Empowered

Empowered was developed as part of the January 2022 Hackathon: Accelerating the future of workforce well-being and mindfulness, presented by Code Institute and Soda Social.

Click Here to view the deployed site.

User Experience (UX)

Initial Discussion

The theme brief for the January 2022 Hackathon was to rethink solutions to help build an iniative to improve different aspects of mental health and well-being in 2022.

The judging criteria:

Provides a clear and substantial value to the user.
Uses an original or innovative idea, design or implementation.
Has well structured and completed documentation (README and wireframes).
Is well planned and executed using GitHub projects.
Focus is realistic and has an overall sense of completeness.

Key information for the site

We discussed several ideas for our project and decided to create a site that would allow the user to record their emotional state daily by choosing the emoji that best depicts how they are feeling. The user would also be able to add a journal entry to expand on their choice of emoji and to note anything they feel is having an effect on their mental health.

Users would then be able to view their previous emojis on a calendar which would allow them to track their well-being. It would also be a useful tool to be able to show to professionals should the user decide to seek further help. When the user selects an emoji logged in the calendar they would then be shown their journal entry for that day.

As this would be quite personal information it was important that the user be able to make a profile to keep this information private. By registering a profile the user would then be able to utilise the calendar feature.

When a user selects their emoji we will then provide a personalised recommendation for them based off of the selection they have made. So for example if a user is feeling sad they may be recommended a funny video clip or a positive affirmation, if they are feeling stressed they may receive a video on breathing techniques used to relax or a fun game to play to allow them to destress.

User Stories

First Time Visitor Goals:

As a First Time Visitor, I want to easily understand the main purpose of the website, so I can learn more about this website.
As a First Time Visitor, I want to be able to easily navigate through the website, so I can find the content.
As a First Time Visitor, I want to be able to register my account, so I can learn benefits of the website as a user.
As a First Time Visitor, I want to find the website useful, so I can use it according to my needs.

Registered User Goals:

As a Registered User, I want to be able to log in to my account, so I can have a personal account.
As a Registered User, I want to be able easily login and logout, so I can access my personal account information.
As a Registered User, I want to be able to view my profile, so I can see my personal information.
As a Registered User, I want to be able to choose an appropriate emoticon to select as my emotional status for that day, so I can evaluate my emotions for a day.
As a Registered User, I want to be able to add additional notes to my emoticon to allow me to express my state of mind, so I can understand why I felt so over time.
As a Registered User, I want to be able to view my previous emotions, so I can evaluate my emotions over time.
As a Registered User, I want to be able to view my journal entries, so I can see my daily entries.
As a Registered User, I want to be able to view my calendar, so I can see my daily entries.
As a Registered User, I want to be able to view my recommendations, so I can see my daily entries.

Strategy

Developed for those who wish to make track their emotional status over time and learn how to control their feelings.

At present, the site is provided with a calendar and a recommendation system. The calendar allows the user to view their previous emotions and the recommendation system allows the user to see a recommendation based on their current emotional state.

Potential advertisers are encouraged to get in touch to offer their articles and service as long as it is in line of sites main idea to serve people as a platform to record, track, and control their feelings.

Design

Colour Scheme

The main design of the website is based on the colour scheme of the website. The colour scheme is based on the colour scheme of the 2015 American computer-animated film: Inside Out since this file was fundamentally based on 5 core emotions that people may experience in their lives. Therefore, we made a choice not only to use the colours of the film but also to use the images of the main characters of the film.

More information on this movie you can find on wikipedia

Moreover, we researched colour theory and colour psychology to find what colour palettes may be beneficial to someone who may be struggling with their mental health. We discovered that blue are associated with peace, sincerity and gentleness. Darker blues are representative of power, strength and dependability. Greens are associated with growth and have a calming presence.

We feel that this colour palette has a nice balance between the blues and greens to promote calm and peacefulness on the site. The choice of green also ties in with the use of the colour green in the mental health awareness ribbon.

Psychology of Color Explained | Colour Psychology - Green | Colour Psychology - Blue

Typography

Main Font: Roboto

Roboto Google Font was used as the main font of the website in order to increase readability of the content on the pages.

Accent Font: Rowdies

Rowdies Google Font was used to attract viewers' attention to the company's logo, to make an accent on the strong points of the website, and to incentivize visitors to use our website on a regular basis.

Imagery

Wireframes

Wireframes were created for mobile, tablet and desktop.

Features

The website is comprised of a home page, a log in page, a registration page, a profile page and a calendar page. Each page of the site has been designed to be fully responsive on a range of devices.

All Pages on the website have:
- A navigation bar which allows the user to navigate to the home page from every page on the website, and other navigational links.
  - If the user is not logged in, the navigation bar will only have a logo, link to the home page, and get started button.
  - if the user clicks on the get started button, they will see a dropdown menu with 2 options: log in or register. After clicking on on of the options, the user will be redirected to the appropriate page.
  - When the user is logged in, the navigation bar will have a logo, a profile button, a calendar button, a log out button, and a link to the home page. After clicking on on of the options, the user will be redirected to the appropriate page.
  - On the mobile version of the website, the navigation bar will have a hamburger menu icon which will allow the user to see the navigation options.
- A footer which contains logo, the hackathon team members, references to 2022 January Hackathon, link to the repository, and social links.
  - On the mobile version of the website, the footer will have a following look:
Home Page The home page has:
- HeroSection, which contains: A welcome incentivizing message which shortly explains why this website is essential for a user with a button "GET STARTED", which leads to registration page. It also has an image of the Inside Out emotional characters to welcome users' emotions.
- About section, which contains a thorough information on the benefits of using this website constantly. It has to section:
  - "Why should I use Empower", which explains why this website is essential for a user wo cope with their emotions.
  - "How can I use Empower", which explains how to use this website on a daily basis and how to withdraw benefits form the website in a long run.
  - "Can anyone else see my information?", which explains that user's privacy is crucial for us and user's data will never be reviewed be anybody, including the creators of the website.
- Testimonials section, which contains a list of testimonials from users who have used Empower to improve their mental health and show the benefits that other people can get from this website.
Registration Page

Registration Page has a form which allows the user to register for the website and message explaining how to become a suer as well as reassuring a suer that their privacy would be protected.

If the user inputs unsafe username or password, they will see the errors in order to increase user's safety:
Login Page Login Page has a form which allows the user to log in to the website.
If the user inputs unsafe username or password, they will see the errors in order to increase user's safety:
Profile Page Profile Page consists:
- a date in the top left corner to remind the user which day is today and which day they are about to evaluate.
- a range of emojis to indicate the user's mood.
- an info button, which will show the instructions on the emojis. When the user clicks on the info button it will open a modal window with instructions on how to use the emojis. .
- Modal will be closed when the user clicks on the X button or outside of the modal window.
- It also contains a section with image and a button, which leads to the calendar page.
- When the user clicks on the chosen emoji, the user will note area, where he or she can add addition notes.
- The user may also choose not to add a note by leaving textarea empty and clicking on the note button to confirm the entry.
- When the suer submits their entries for a day, the suggestion box will appear. There will be some suggestions for a user to watch, read, or listen to according to the emotions that the user entered for a day.
Calendar Page Calendar page consist:

Heading with a short instruction on how to use the calendar page.
A calendar with the days of the month.
2 buttons to navigate to the previous and next month.
A note box. When the user click on a day with emoji, the note box will appear, and the user may see the previous entries with emoji.
If the user didn't left any notes, the user will see a day, emoji, message "You didn't left any notes this day".

Future Implementations.
- In future implementations we would like to provide the option for a user to be able to change their password or choose to delete their account completely. Moreover, we would love companies to take part of our project to participate in providing high quality suggestions to our users in order to improve their mood and feelings.

Accessibility

We have been mindful during coding to ensure that the website is as accessible friendly as possible. This has been have achieved by:

Using semantic HTML.
Using descriptive alt attributes on images on the site.
Ensuring that there is a sufficient colour contrast throughout the site.

Technologies Used

Languages Used

HTML - was used as markdown language.
CSS - was used to add the styles and layout of the site.
Python 3.8.5 - used to manipulate the data.

Frameworks, Libraries & Programs Used, etc

Flask was used as the foundation of the site.
CSS Flexbox - was used to arrange items simmetrically on the pages.
CSS roots - was used to declaring global CSS variables and apply them throughout the project.
Balsamiq - was used to make wireframes for the website.
VSCode - was used as the main tool to write and edit code.
Git - was used for the version control of the website.
GitHub - was used to host the code of the website.
GIMP - was used to make and resize images for the README file.
Mongo DB - was used to store the data.
Chrome DevTools: was used to debug the website.
Tiny PNG To compress images.
Favicon.io To create favicon.
Am I Responsive? To show the website image on a range of devices.
Shields.io To add badges to the README.

Deployment & Local Development

Deployment

The program was deployed to Heroku.
The program can be reached by the link

To deploy the project as an application that can be run locally:

Note:

This project requires you to have Python installed on your local PC:

sudo apt install python3

You will also need pip installed to allow the installation of modules the application uses.

sudo apt install python3-pip

Create a local copy of the GitHub repository by following one of the two processes below:

Download ZIP file:
1. Go to the GitHub Repository page.
2. Click the Code button and download the ZIP file containing the project.
3. Extract the ZIP file to a location on your PC.
Clone the repository:
1. Open a folder on your computer with the terminal.
2. Run the following command
- git clone https://github.com/AwsSG/empowered.git
Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.
1. Install Python module dependencies:
  1. Navigate to the folder madlib_with_python by executing the command:
  - cd madlib_with_python
  1. Run the command pip install -r requirements.txt
  - pip3 install -r requirements.txt

To deploy the project to Heroku so it can be run as a remote web application:

Clone the repository:
1. Open a folder on your computer with the terminal.
2. Run the following command
- git clone https://github.com/AwsSG/empowered.git
1. Create your own GitHub repository to host the code.
2. Run the command git remote set-url origin <Your GitHub Repo Path> to set the remote repository location to your repository.
3. Push the files to your repository with the following command: git push
4. Create a Heroku account if you don't already have one here Heroku.
5. Create a new Heroku application on the following page here New Heroku App:
6. Go to the Deploy tab:
7. Link your GitHub account and connect the application to the repository you created.
8. Go to the Settings tab:
9. Click "Add buildpack":
10. Add the Python and Node.js buildpacks in the following order:
11. Click "Reveal Config Vars."
12. Add 1 new Config Vars:
  - Key: PORT Value: 8000
  - This Config was provided by CODE INSTITUTE.
13. Go back to the Deploy tab:
14. Click "Deploy Branch":
  - Wait for the completion of the deployment.
15. Click "Open app" to launch the application inside a web page.

Testing

Click Here to view the full testing steps that were completed on every device and browser.

Bugs

Solved Bugs

The calendar didn't represent the data of notes when clicking on the day:

Solution: Add code to calendar.html and calendar.js in order to connect data

let dataArray = []
let emoji_number;
let tempDate;


{% for emoji in emoji_tracker %}
tempDate = new Date({{ emoji.datetime }} * 1000)
dataArray.push({
  date: tempDate.toLocaleDateString("en-US"),
  emoji: {{ emoji.emoji }},
  note: "{{ emoji.note }}"
})
{% endfor %}

console.log(dataArray)

The babble js functionality didn't work: while clicking on the day number or emoji in the calendar, the 'click' eventListener didn't work.

Solution: Add if statement to target children elements through parent element.
```
if (item.date === e.target.closest("div").dataset.day ||
    item.date === e.target.parentElement.parentElement.dataset.day ||
    item.date === e.target.parentElement.dataset.day
)
```
Notes notes in the calendar didn't disappear if the user clicked on the day without entries recorded:

Solution: Add code to calendar.html: variable "entriesDates" to store the dates of entries and if statement to check if the date is in the array.
```
  if (entriesDates.includes(e.target.closest("div").dataset.day) ||
      entriesDates.includes(e.target.parentElement.parentElement.dataset.day) ||
      entriesDates.includes(e.target.parentElement.dataset.day)) {}
```
Calendar notes were showing special characters instead of " ' ":

Solution: Change textContent to innerHTML.
```
  document.querySelector(".note__container--text").innerHTML = `" ${getNote} "`;
```

Known Bugs

None

Credits

Pete Docter for creating such a wonderful film "Inside Out", which inspired us to choose the main characters from his creation as main theme of our project.
ColorSpace for providing a myriad of color scheme to choose from as we did;
Code And Create channel for givind us the inspiration to use single month calendar representation in this project;
pngfind for providing a myriad of images to choose from as we did;
Heroku for providing a platform to deploy our project;
MongoDB for providing a database to store our data;
CODE INSTITUTE for organizing such event like HACKATHONS where students are encourage to learn and grow;
GitHub for providing a platform to host our repository and to collaborate with other developers;

Collaborators

Team Inside Out members of the January Hackathon 2022:

Iuliia Konovalova:
- GitHub
- LinkedIn
Aws Sabah Gheni:
- GitHub
- LinkedIn
Kera Cudmore:
- GitHub
- LinkedIn
Theo Wright:
- GitHub
- LinkedIn
Anna:
- GitHub
- LinkedIn

Acknowledgments

We would like to acknowledge the following people who helped us along the way in completing this project:

Dave Bowers, our hackathon facilitator.
CODE INSTITUTE, our event organizer.
Trust in SODA, our event organizer.
Our families - for their patience and support while we disappeared for another long weekend of coding.

Name		Name	Last commit message	Last commit date
Latest commit History 400 Commits
.github		.github
.vscode		.vscode
documentation		documentation
static		static
templates		templates
.gitignore		.gitignore
.gitpod.dockerfile		.gitpod.dockerfile
.gitpod.yml		.gitpod.yml
Procfile		Procfile
README.md		README.md
TESTING.md		TESTING.md
app.py		app.py
requirements.txt		requirements.txt

kera-cudmore/empowered

Folders and files

Latest commit

History

Repository files navigation