Skip to content

Latest commit

 

History

History
454 lines (397 loc) · 34.3 KB

README.md

File metadata and controls

454 lines (397 loc) · 34.3 KB

Neuronet

Hackathon Project in partnership with Trust In Soda. Deadline Monday 13th September 2022 @ 3pm.

Contents


Introduction

Neuronet is a way to bring neurodiverse individuals into the light. It is a way for businesses to fill posts from a talent pool that may otherwise go unnoticed or disregarded. Most people are neurotypical, meaning that the brain functions and processes information in the way society expects. However it is estimated that around 1 in 7 people (more than 15% of people in the UK) are neurodivergent, meaning that the brain functions, learns and processes information differently. Highly-focused concentration, careful attention to detail and out of the box thinking are some of the skills often associated with autism, and as such it would be a huge loss to have these incredible individuals go underappreciated. Neuronet seeks to connect employers with these applicants in a way that is both comfortable and empathetic to the needs of those who may not be able to connect in the more conventional ways.

Demo

(Insert image or gif of website in action here)

Collaborators

  • Raevynna El Messaoudi
  • Kevin O'Carroll
  • Ryan Thomas
  • Carrie
  • Deanna Sale
Project Facilitator: Tim Nelson

UX

Strategy

Vision

Neuronet is a specialised multifunctional application catering to the needs of neurodiverse individuals, as well as give the opportunity to companies to employ individuals from an under-represented talent pool. It will give neurodiverse individuals the opporunity to showcase their talents, strengths and weaknesses in a non-judgmental environment, by allowing them to complete an online resume and disclose the unique skillsets they have, as well as diclose the environments and situations that will allow them to communicate and work to the best of their abilities. The website will be highly accessible and take into consideration the requirement for an environment that meets the needs of these individuals through the use of colour schemes, high levels of user intuitiveness and giving the choice of varying means of communication with potential employers. It will allow companies to advertise current open roles via a job board, and arrange the interview process for applicants. The companies will be able to disclose the types of interviews that would be available such as video-call, e-mail, phone-call or face-to-face with stipulations such as only 1 or 2 interviewers or the interviewee may bring a friend or family member with them as support. Our overall vision is to have neurodiverse individuals to not be at a disadvantage because of their unique needs.

Aims

  1. To be a safe non-judgemental environment for neurodiverse individuals to showcase their talents
  2. To be a highly user intuitive application for users with neurodiverse tendancies
  3. To be an environment where companies can advertise their open job roles on a job-board to be inclusive of individuals who are neurodiverse
  4. To be a web application for companies and prospective applicants to use during the job application process where application/interview and work environments can be discussed in advance to suit the needs of the neurodiverse individual
  5. To be highly accessible in terms of colour scheme and contrast to cater for the needs of those with sensory needs
  6. To be a learning tool for companies to ensure they are using best practices to ensure they are catering for the needs of neurodiverse individuals
  7. To enable individuals with conditions such as social anxiety to be more comfortable in highly stressful situations which occur in the job application and interview processes

Target Audience

We have two main target audiences:

  • Individuals who are neurodiverse to include those with conditions such as: Autism, anxiety, depression, bipolar, BDD, OCD, phobias, dyslexia, tourettes and many many more.
  • Companies that want to improve their employee diversity by including individuals that have unique skills that arise from conditions mentioned above.
The application could also be aimed at recruiters that are more aware of the need to have neurodiverse individuals 'in the workplace'.

User Stories

As a new and returning neurodiverse user I want to:
  1. Know the purpose of the website as soon as I navigate to the home/landing page
  2. Navigate the website quickly and effectively
  3. Find everything in the website that I need to find with ease
  4. Have visual aids and obvious calls to action throughout the site to aid in user intuitiveness
  5. Have an up to date job board so I can see which jobs are available to apply for
  6. Be able to log in to the website and create my personal profile for prospective employers to view
  7. Ensure that my profile is viewable ONLY to prospective employers and not other users
  8. Feel safe and understood despite any difficulties my condition may cause with no potential for judgement or discrimination
  9. See the company ideals and values that I am applying for to ensure I will be a good fit
  10. Be able to organise any interview process by describing my needs for the company within the application on my profile
As a new and returning potential employer/company I want to:
  1. Know the purpose of the website as soon as I navigate to the home/landing page
  2. Navigate the website quickly and effectively
  3. Find everything in the website that I need to find with ease
  4. Be able to log in to the website and create a profile for my business/company for potential employees to view
  5. Be able to post jobs to an easily accessible job board for potential employees to view
  6. Ensure that our business profile is viewable to prospective employees only and not to other businesses
  7. Increase our workforce diversity by employing more individuals with a Neurodiverse nature
  8. Have an easy and intuitive application to be able to contact applicants and discuss their needs for the interview process
  9. Highlight the adaptations that we are able to put in place to make the interview and worplace more accessible
As the developers we want to:
  1. Create an environment where neurodiverse individuals are comfortable and are not disadvantaged for thinking differently to others
  2. Provide a platform for businesses who are lacking in diversity to have a way to find unique neurodiverse individuals to fill roles

Feasibility vs Importance

Opportunity/Feature Feasibility/Viability (score out of 5) Level of Importance (score out of 5) In or out?
Obvious role of the website demonstrated with hero image/video and/or capture text 5 5 In
Simple design with straightforward navigation to make it easier for the user to understand where to find information 5 5 In
Up-to-date job adverts on a job-board viewable by prospective employees 4 3 In
A Fully accessible website able to be experienced by customers with visual and sensory impairments 4 5 In
A logon system for potential employees to create a secure profile viewable by prospective employers 4 4 In
A logon system for business/companies to advertise jobs in their workplace and to showcase their company values 4 3 In
A straightforward form for prospective employees to complete enabling them to showcase their talents and skills while disclosing their weaknesses 5 4 In
A way for website users with sensory difficulties to choose the colours of the website they are most comfortable with 4 2 Maybe In
Average Viability x number of features:
31
Sum of Importance:
29
As we can see from the table above, the viability is higher than the importance, which is good because that means most of the features are able to be implemented, however we must be careful not to implemnt features that would be unneccessary for the web application and decrease the usability of the site from a Neurodiverse peron's perspective. We must also be careful to stay within the scope of our own coding limitations - implementing features that we have little experience of could cause a high liklihood of bugs and errors in the web application which would in turn reduce the potential of a positive user experience. The table above has been plotted into a graph (below) to easily visualise the features that will be implemented into the web application and which ones won't be:
  • The features in the pink section will be implemented
  • The features in the grey section could be implemented at a later date but aren't necessary right now
  • The features in the turquoise section will not be implemented as it would be unwise to focus on these features until a later date


Scope

Due to the pitfalls of developing a website based on the MVP (Minimum Viable Product) model such as lack of user experience and enjoyment due to a lack of content, it is sometimes more beneficial to develop a website based on MMP (Minimum Marketable Product). However due to the sprint nature and the time constraints we have for this project (a total of 4 full days from brief to presentation) we have to create the website based on MVP. This will allow the basic functions of the website to be implemented and have the website be usable but not neccessarily complete with all of the discussed features in place. One of the main advantages of creating an MVP is we can gauge the reaction of users before implementing more features, to ensure that the overall necessity for the web application is there, meaning less time is potentially wasted on a product that isn't going to be used by our target audience.

By using the MVP model we will:

  • Create a clear website with enough content for the users to establish the usefulness of the web application
  • Result in a website with medium levels of UX, but still enough to be user friendly for our target audiences
  • Meet the needs of the business and user on the most basic levels
While following the MVP model, to meet the user and business goals, our website will include:
  • A self-designed logo on all pages as assurance to the customer we are a trusted-business with our own identity
  • A nav-bar on all pages to be able to navigate to separate pages on the website
  • Links to associalted social media on all pages within the footer
  • sign up forms for users to be able to create personal profiles
  • Form for prospective employees to fill in as an alternative to a CV to show their talents and skills
  • A job board for prospective employers to post to, to be able to advertise current open roles in their business

Structure

PROVISIONAL We have chosen to carry out a non-linear method of design for this website application as it consists of multiple pages which might not necessarily be viewed in a particular order as each page has a different role to play. By having multiple pages we can separate information into logical sections to make it easier for the user to find what they are looking for particularly for the users that may find it more difficult to navigate websites. The navigation bar at the top of all of the pages allows the user to easily navigate to the page of the website they are most interested in. There are also certain pages (such as on the jobs board) that have their own internal navigation sections as each advertised job will take the user to the full job advertisement when they interact with the 'job card'.

On index.html: Separate sign in/sign up buttons for business owners and prospective employees? Each button brings up separate modal? If user doesn't have an account - link in modal to take to specific sign up page?

On signupbusiness.html: Form to fill in to choose username, email, password

On signupuser.html: Form to fill in to choose username, email, password

On profile.html: Form to fill in for user to state details (name, DOB, address etc etc), qualifications, talents, strengths, weaknesses, talk about themselves etc.

On company.html: Form to fill in for business to fill in business name, values, location etc etc. and a separate form to fill for advertising job posts - job title, job role, person spec, location etc.

On board.html: Page of jobs advertised by companies which are linked to the full job advert

On jobadvert.html: Full job advert including job title, job role, person spec, location etc. (everything the business owner inputted into the form in their profile page)

On contactus.html: Form to fill in to contact Neuronet for any user problems and tech support

On 404.html: Neuronet logo, appologies, redirect to index.html link

Skeleton

The wireframes for the Neuronet website application were made with Canva and Balsamiq, they can be found by viewing the images below. As the trend for mobile browser usage has been on an upwards trend for the last 10 years in Europe culminating in a crossover of hardware usage in the recent year, it could be assumed that these trends will continue and result in users opting more and more for a mobile browser instead of a desktop.

Due to this assumed continuing trend we have chosen to take a mobile-first approch to the design process. A Mobile-First Approach refers to the practice of designing and/or developing an online experience for mobile before designing for desktop web or any other device. Taking a Mobile First approach aims to reverse the workflow of designing for desktop and scaling down the design for mobile afterwards. Wireframes were made for mobile and desktop devices to ensure user friendly UX was employed throughout.

The wireframes were created during the website application's initial desgin process, as such there are changes between the layout of the wireframes and the final layout/design of the finished website.

Surface

Typography

As recommended in various literature, we have chosen to use sans-serif fonts throughout the website as these are more user friendly for users with specialised sensory needs. We used Google Fonts to find the typography that we wanted to use for the website.

PROVISIONAL The fonts we used for the text body of the website was 'Lato' as this font is easy to read which is needed when there is large amounts of information to be read and absorbed by users, it has a modern feel, and is a popular font for many websites. The back-up font is 'Sans-Serif' just in case the font import link fails. The font used for headings is 'Roboto' this is also a very popular font recommended by many websites that cater to the needs of individuals with neurodivesity.

Colour Scheme

We have tried to make the colour scheme as user friendly as possible to cater to the needs of individuals with possible sensory overload disorders such as autism. After carrying out some research it was found that toned down blues and greens were the most favourable for these types of individuals, as well as neutral colours such as greys and beiges.

Icons

The Neuronet logo was handmade by the team "Accessibility All-Stars" during the website development process. We felt this was a very important aspect to get done quickly as this would give us a feel for how the website would take shape. The logo itself is based on the neurodiversity logo which is a rainbow coloured infinity symbol, the neural pathways within the loop were added to symbolise the "Neuro" and to a point also "net" of the Neuronet brand name as this gives the users an inclination as to the purpose of the website. The brand name and tag line underneath the sympol were added to the symbol to again help the user identify the purpose of the website and to encourage inclusion by acknowledging everybody's ability to think differently and that this is a huge benefit to workplaces that are striving to be more diverse.

Images (if used)


Videos (if used)

Technologies

Languages

  1. HTML
  2. CSS
  3. JavaScript
  4. Python
  5. Markdown
  6. Bash

Version Control

  1. Git & Github
  2. Gitpod & VS Code

Applications

  1. Wireframe software
  2. Slack
  3. Hackathon App

Frameworks & Libraries & Programmes

  1. Django
  2. Chrome Developer Tools
  3. Colormind.io
  4. Google Fonts
  5. Favicon.io
  6. W3C Markup Validation Service
  7. Jigsaw W3C CSS Validation Service
  8. JSHint JavaScript Code Quality Tool
  9. PEP8 ONLINE
  10. Am I responsive
  11. WAVE Web Accessibility Evaluation Tool

Features

Implemented Features

Features Left to Implement

Testing

Functionality

Compatibility

User Testing Stories

Code Validation

Issues Found During Deployment

Accessibility

Performance Testing

Deployment

A live demo of the website can be found HERE

Project Creation

This project was created on GitHub and Edited in GitPod by carrying out the following:

  1. A new repository was created using 'Code-Instutute-Org/gitpod-full-template'
  2. A meaningful name was given to the new repository and 'Create Repository' was selected
  3. The repository was then opened on GitHub by clicking the 'Gitpod' button to build the GitPod workspace which would allow us to build and edit the code used to make the SNeuronet website/application
  4. Version control was used throughout the project using the following commands in the terminal using Bash
    • git pull origin main - to pull the latest updated files from the main branch to the local repository
    • git checkout -b "branch name" - to move to a new branch off the main branch
    • git add . OR git add "file name" - to stage the changes and get them ready for being committed to the local repo.
    • git commit -m "Description of the update" - to save the change and commit the change to the local repo
    • git push origin "branch name" - to push all committed shanges to the GitHub repo associated with the GitPod workspace
    • The pushed changes were then reviewed by fellow collaborator(s) and merged with the main branch
  5. Project Deployment

    This project was deployed via Heroku by carrying out the following:

    1. Create the gitpod repo from the template via the gitpod button in github.
    2. Log in to Heroku and create a new app.
    3. Set the buildpacks in the Heroku app to Python and NodeJS in that order.
    4. Complete the config vars section
    5. Link Heroku and GitHub accounts together
    6. Select the repo (via Heroku) that I wanted to make an app of and give it a name in Heroku.
    7. Click on deploy.
    8. Manual deployments were employed to reduce the risk of errors and failed website updates

    Local Deployment

    There are many ways to deploy the project locally on your own device. The ways we will explain here are: Forking, Cloning, GitHub Desktop and Zip Exctraction, the steps in these processes are outlined below:

    Forking the GitHub repo

    If you want to make changes to the repo without affecting it, you can make a copy of it by 'Forking' it. This will make sure that the original repo remains unchanged.

    1. Log in to your GitHub account
    2. Navigate to the repository HERE
    3. Select the 'Fork' button in the top right corner of the page (under your account image)
    4. The repo has now been copied into your own repos and you can work on it in your chosen IDE
    5. If you have any suggestions to make regards to the code to make the site better, you can put in a pull request
    6. If you want to create a web-app from the repo please follow the instructions in "Project Deployment"

    Cloning the repo with GitPod

    1. Log in to your GitHub account
    2. Navigate to the Repository HERE
    3. Select the 'Code' button above the file list on the right had side
    4. Ensure HTTPS is selected and click the clipboard on the right of the URL to copy it
    5. Open a new workspace in GitPod
    6. In the bash terminal type 'git clone [copy url here from step 4]'
    7. Press enter - the IDE will clone and download the repo
    8. You can then type 'python3 -m http.server' to host the website locally - this will not run the python file, only allow you to check how the web-app looks.
    9. If you want to create a web-app from the repo please follow the instructions in "Project Deployment"

    Github Desktop

    1. Log in to your GitHub account
    2. Navigate to the Repository HERE
    3. Select the 'Code' button above the file list on the right had side
    4. Select 'Open with GitHub Desktop'
    5. If you haven't already installed GitHub desktop application - you will need to follow the relevant steps to do this
    6. The repo will then be copied locally onto your machine
    7. If you want to create a web-app from the repo please follow the instructions in "Project Deployment"

    Download and extract the zip directly from GitHub

    1. Log in to your GitHub account
    2. Navigate to the Repository HERE
    3. Select the 'Code' button above the file list on the right had side
    4. Select 'Download Zip'
    5. Once you have the Zip downloaded, open it with your prefered file decompression software
    6. You can then drag and drop the files from the folder into your chosen IDE or view/edit them on your local machine
    7. If you want to create a web-app from the repo please follow the instructions in "Project Deployment"

    Research

    DEFINITION:

    Neurodiversity is defined by Dictionary.com as, “the variation and differences in neurological structure and function that exist among human beings, especially when viewed as being normal and natural rather than pathological.” To take it a step further, the Autistic Self Advocacy Network states, “Neurodiversity refers to variation in neurocognitive functioning. It is an umbrella term that encompasses neurocognitive differences such as autism, attention deficit hyperactivity disorder (ADHD), dyslexia, Tourette’s syndrome, anxiety, obsessive-compulsive disorder, depression, intellectual disability and schizophrenia, as well as ‘normal’ neurocognitive functioning, or neurotypicality. Neurodivergent individuals are those whose brain functions differ from those who are neurologically typical, or neurotypical.”

    FACTS:

    The neurodiverse population remains a largely untapped talent pool. Unemployment runs as high as 80% (this figure includes people with more-severe disorders, who are not candidates for neurodiversity programs). When they are working, even highly capable neurodiverse people are often underemployed. Finding and keeping top talent is an ongoing challenge for employers, especially in high-tech sectors. The Harvard Business Review reported in 2017 that the European Union (EU) was facing an impending shortage of 800,000 information technology (IT) workers, many in strategically important and rapidly expanding areas. Increasing demand for candidates to fill jobs in specialized fields like information technology, banking and financial services, and healthcare is producing talent shortages. More and more, employers are turning to previously unexplored talent pools to help meet staffing needs. A growing number of companies have created programs specifically focused on recruiting and hiring neurodivergent people, including those on the autism spectrum.

    A growing number of prominent companies have reformed their HR processes in order to access neurodiverse talent; among them are SAP, Hewlett Packard Enterprise (HPE), Microsoft, Willis Towers Watson, Ford, and EY. Many others, including Caterpillar, Dell Technologies, Deloitte, IBM, JPMorgan Chase, and UBS, have start-up or exploratory efforts under way.

    BENEFITS FOR THE BUSINESS:

    Employers who hire neurodiverse employees note their aptitude for roles that require attention to detail, ability to detect patterns and capacity for inferential reasoning, as well as strong skills in mathematics, coding and other data-driven processes. Neurodiverse employees are also often lauded for exhibiting loyalty and timeliness, and for offering innovative, creative perspectives to improve policies and procedures that can increase a company’s bottom line. Employers consistently report that their neurodiverse teams prove more effective and productive than those without neurodiverse representation. Other capabilities that people with neurocognitive disabilities possess that benefit employers include:

    • Keen accuracy and ability to detect errors
    • High levels of concentration
    • Strong recall and detailed factual knowledge
    • Reliability and persistence
    • Technical strengths
    • Appreciation for routine/repetition

    While neurodiversity hiring programs are often known to seek out employees that prefer technological duties such as software engineering or tech operations, or repetitive tasks, such as data-entry or filing, there are a wide variety of jobs and responsibilities that neurodiverse employees can perform. These include (but are certainly not limited to) product management, human resources, banking and customer service.

    In addition, research has shown that consumers prefer doing business with companies that employ people with disabilities. Given the high percentage of neurodivergence within the average customer base, having people on staff that represent the communities a company serves demonstrates thoughtfulness and good customer service.

    Neurodiverse people frequently need workplace accommodations, such as headphones to prevent auditory overstimulation, to activate or maximally leverage their abilities. Sometimes they exhibit challenging eccentricities. In many cases the accommodations and challenges are manageable and the potential returns are great. But to realize the benefits, most companies would have to adjust their recruitment, selection, and career development policies to reflect a broader definition of talent.

    BENEFITS FOR THE EMPLOYEE:

    Neurodiverse hiring also offers benefits to other employees. Many people with neurocognitive disabilities, specifically those with autism, share experiences of discrimination and stigma, both in hiring processes and work settings, based on their perceived traits. However, many organizations find that having neurodiverse employees improves overall employee morale and positively affects organizational culture. Often, neurotypical employees appreciate being educated about neurodiversity and say they tend to experience a greater sense of company pride when part of an inclusive workplace. Moreover, when neurodiverse employees are given job responsibilities that align with their skills and abilities, they—like most neurotypical employees—often report greater confidence and self-esteem. Finally, neurodiverse employees frequently express greater comfort with interpersonal interactions when employers consider workplace environmental factors and make appropriate accommodations for their needs, such as providing social skills, teamwork and office behaviour training.

    WHY IS THE WEB APPLICATION NEEDED?

    Being neurodivergent will usually amount to a disability under the Equality Act 2010. This means the organisation has a legal obligation to make reasonable adjustments to the workplace and the individual's role that will remove or minimise any disadvantage to them.

    Having a workplace that is set up to proactively think about what can be done to support the needs of each employee can make it much easier to identify and implement adjustments for neurodivergent staff.

    Remember, a person is disabled if they have 'a physical or mental impairment' which has 'a substantial and long-term adverse effect' on their 'ability to carry out normal day-to-day activities'. Therefore, someone may not have been diagnosed with a neurodivergence but still be considered to have a disability under the Equality Act 2010.

    Neurodiversity is an aspect of diversity that enhances the workplace in numerous ways. People with neurocognitive disabilities have talents, perspectives and skills that can be distinctly beneficial in many work environments. More and more employers are beginning to understand these benefits and develop hiring initiatives that focus on recruiting neurodiverse workers. While these efforts are more common in larger corporations, they have proven beneficial for businesses of all sizes in a variety of industries. Hiring neurodiverse employees can provide companies with a competitive edge that brings measurable benefits, both financially and in terms of workplace culture.

    Askearn’s Neurodiversity in the workplace inclusion checklist states that it is fundamental for employers to create applicant referral, inclusive interview and screening processes by:

    • Consider developing an alternative interview process for neurodivergent applicants
    • Design a process to assess applicant skills to match these skills with required tasks
    • Identify a local/regional service provider(s) who can assist with identifying applicants

    SUPPLEMENTAL READING:

    Catherine Bean tells her personal story of working in the Office for National Statistics: https://www.gov.uk/government/news/neurodiversity-in-the-workplace

    Credits

    Code

    Content

    Images

    Video

    Acknowledgements

    Screenshots

    References

    [1] "Neurodiversity in the Workplace", Askearn.org, 2021. [Online]. Available: https://askearn.org/topics/neurodiversity-in-the-workplace/. [Accessed: 11- Sep- 2021].

    [2]Webarchive.nationalarchives.gov.uk, 2021. [Online]. Available: https://tinyurl.com/tv3wt3d8. [Accessed: 11- Sep- 2021].
    [3]"Neurodiversity Is a Competitive Advantage", Harvard Business Review, 2021. [Online]. Available: https://hbr.org/2017/05/neurodiversity-as-a-competitive-advantage. [Accessed: 11- Sep- 2021].