This is a User Centric Development Milstone Project website created as part of a Full Stack Software Development in Code Institute by Michael Greenberry.
I created this static website to provide a fun and engaging way of learning British Sign Language. This website is aimed at families wanting to learn British Sign Language.
The website targets both parents/guardians and their children, along with other adults or children, who would like to learn British Sign Language. The goal of this website is to provide information on British Sign Language, offer lessons at all ages in the family and provide them with sample videos and tutor information to give them confidence in returning to the website and booking lessons and courses provided by the business owener.
This website must be engaging for the target audience and contain the information needed to complete the goals of the business owner and site visitors. It must also stand out and be memorable for future visits and for recommendations to other families or potential users.
- UX - User Experience
- Features
- Technologies Used
- Testing
- Deployment
- Credits
- Acknowledgements
- Author Information
For this website and business I looked online for family friendly sign language courses for British Sign Language (BSL). I found a few companies that provided sign language for babies and adults, but very few that provided for the whole family. Some of the websites taught sign language using Signed Supported English, or Makaton. However, I wanted to provide a website that would cover all ages and still provide a rich and meaningful experience. I choose British Sign Language as it is used by over 125,000 people use BSL as their first or preferred language.
- To provide a easy to understand website for the user to learn British Sign Language (BSL)
- To introduce Happy Hands, a child friendly website in British Sign Language
- To provide British Sign Language lessons to children and their families
- To provide a brief explanation about British Sign Language (BSL)
- To provide a contact form for more information
- To provide a downloadable pdf fingerspelling document
- To demonstrate some sample lessons on video
- To provide a BSL translation of all internet pages
-
As a user visiting the site for the first time:
- I want to be able to use the website on any device I own or use
- I want to able to learn and easily understand what the website is about
- I want to easily understand about the courses provided
- I want an attractive home page introducing HAPPY HANDS
- I want to click on navigation links to be taken to the correct page/section and to be able to return to the home page or another page without using the brower forward/backward buttons
- I want these navigation links to include user friendly menus which are easy to uderstand and use
- I want the content to be easy to read and have a predictable layout so that each page can be navigated easily
- I want to be able to click and visit social media, Facebook, Twitter and others for more content and to keep up to date with future postings and developments
- I want to access sample lessons and other content for various age ranges
- I want to provide make contact with the business owner for more information
- I want to see the people involved with teaching the lessons
- I want to see reviews and testimonials from other users
- I want to access contact information, such as address, phone numbers and location
- I want to be able to access this information if I am deaf and rely on BSL
- I want to know the price for and time for each lessons
- I want to know that my child is safe and that tutors have the necessary qualificaitons and checks in place
-
HAPPY HANDS will do this by:-
- Design a responisive website focussed for mobile devices and responsive to larger screens.
- Design an easy to read home page (index.html) which gives some brief information about the website and it's aims and goals
- Design 2 distinct sections which highlight the language (BSL) and the courses available
- Design 1 section on the home page about the company Happy Hands as an 'about us'
- Design and impliment a navigation bar which contains links to different pages and sections in the website
- Design and label the navigation bar with clear and understandable text to direct users to the correct page
- Design the website to have good readability throughout and avoid using black on white text for those with Meares-Irlen Syndrome, Dyslexia or other reading difficulties
- Design Social Media interactive buttons which direct user to the social media platform they wish to interact with.
- Design and create videos and packs for users to watch and download
- Design a contact form which can be submitted (or cleared if errors made)
- Design a 'tutors.html' page with information on teachers
- Design a reviews and testimonials section
- Design a footer with contact details such as address, phone number and location via a map
- Design a link in the footer to a Zoom call for BSL users and video content
- Design a section within the tutors.html page with information on prices and times
- Design a section within the tutors.html and index.html which offers confirmation of checks and tutor information
-
As a user returning to the site:
- I want to be able to watch video content provided by the business
- I want to be able to easily find content I am interested in
- I want to be able to contact the business owner by various means, such as contact form, social media, video call, etc
-
Happy Hands will do this by:
- Design and provide embedded YouTube videos with user controls
- Design an easy to use and friendly navigation bar and clickable buttons on each page
- Design a contact form section/page. Also provide social media buttons and a contact us on each page at the bottom
For fonts, I used Google Fonts for my website.
I have chosen the font-family: 'Poppins', sans-serif; for the Headings and Menu sections of the website as it is easy to read and has a nice cursive font which matches the style of the website. I also felt this fitted in well with the child and family friendly design of the website.
I've chosen the font-family: 'Roboto', monospace; for the paragraph and other aspects of the site as it is a good match and pairs well with the Poppins font.
For this website I chose a colour pallette that matched similar websites that are colourful and child friendly. The background colour is Cyan, the Nav bar and button text is Cobalt Blue and menus, some text and buttons are Corn yellow as a good contrast to the main colour.
The colours I picked are as follows: -
From: Coolors Palette
All other images were sourced from www.shutterstock.com as part of a free trial to download 10 images.
-
All pages:
- Happy Hands: Hero Image - Happy Hands was designed by Michael Greenberry using the Sketches Pro app by Tayashi on Apple iPad.
-
index.html
- BSL image: Image by Cath Smith from www.letssign.co.uk.
- Sign Language Deaf Disabled People Video Conference: Photo by Andrey Popov from Shutterstock
- Hands Sign Language Circle: Photo by Darelle from Pixabay
-
lessons.html
- Little girl smiling with love hand: Photo by Wisansaya Suksong from Shutterstock
- Smiling indian latin deaf child: Photo by insta_photos from Shuttercock
- Smiling teenage girl deaf: Photo by Leoschka from Shuttercock
- Young black female in hijab: Photo by Prostock-studio from Shuttercock
- Video contect from business owner
-
tutors.html
- All content from business owner
-
download.html
- Fingerspelling/Alphabet download and images: left and right hand alphabet fingerspelling documents/images by Cath Smith
-
success.html
- Thankyou image on success page: Cath Smith from www.letssign.co.uk
All icons for Social Media were sourced form Font Awesome
This website is designed with access from the home page to all other pages from the navigation bar. Some pages also include links to other pages, i.e. index.html links to both lessons.html and tutors.html.
However, the 404.html and the success.html pages are not accessed from the navigation bar or from any of the pages of the website. The 404.html page only displays when a user enters or searches for a page that doens't exist. The success.html page only displays when a user has sucessfully completed the contact form in contact-us.html. Both the 404.html and the success.html pages allow the user to navigate to the main website.
This blueprint was then used to design the navigation and call-out buttons featured in the website.
I have attached mock ups of the original ideas and final design ideas before I used Wireframes to create a prototype. These initial drawings and ideas are here
I used Balsamiq to create my wireframes. I chose to do a mobile version first with the pages I wanted and then create a desktop version after. I did this as this was going to be the way I designed my website, mobile first.
The following wireframes:
Samsung Phone
Apple iPad
- I didn't create an iPad version before I started my website but once I had an index.html, I went back to finalise my design.
Generic laptop
Once I started to create my website I realised I needed a lot more content and that I wanted to have a separate page for the contact-us section. I also decided to add a tutor.html, success.html for the form and a 404.html for wrong address input:
As I wanted to include this on all formats and devices I created my wireframes again for all pages and added the following to show mobile, tablet and desktop:
I then added a 'success.html' page for when the user submitted a completed form. I didn't design a wireframe for this.
I then added a '404.html. page for when the user enters an incorrect page address in the browser. I didn't create a wireframe for this page.
Every page contains the following features at the top of the website as standard: -
- A logo of Happy Hands to the left of the Navigation bar. Allows all users back to the home page by clicking the logo.
- Text as a header reading "Happy Hands"
- A responsive navigation bar, which reduces into a 'hamburger' navigation bar on mobiles. Allows all users to click on the page they want and access said page easily. Each navigation bar has the following links: -
- index.html - allows users to access the home page by clicking the home (index.html) text
- lessons.html - allows users to access the lessons offered by the business by clicking the lessons text
- tutors.html - allows users to access the tutors and see who teaches the lessons and the prices by clicking the tutors text
- free-content.html - allows users to access the free content available on the website and to download some free resources by clicking the Free Content page
- contact-us.html - allows users to make contact with the business by filling in a form and pressing submit. This will open a success page with a thank you message. Users can also clear the form if they make errors and re-submit correct details if required.
- A hero image, or main image of Happy Hands.
- A strapline, or header, which gives the title of the page being visited
Every page contains the following features in the footer: -
- A logo of Happy Hands to the left of the footer. Allows all users back to the home page by clicking the logo.
- Text as a header reading "Contact Details"
- A responsive navigation bar, which reduces into a 'burger' navigation bar on mobiles. Allows all users to click on the page they want and access said page easily. Each navigaiton bar has the following links: -
- Address and link to a map which shows the address. Allows all users to navigate to a google map showing business address.
- Telephone No and link to make an internet phone call. Allows all users to make a phone call if their browser allows this function.
- Zoom link which directs to personal zoom meeting. Allows all users to join a zoom call with the business owner for those users who are hearing impaired.
- Copyright for Enabled Services and Happy Hands
- Social Media tags for Facebook, Instagram, Twitter and linkedin - allows users to interact and make contact with the business by clicking chosen social media platform
Also every page contains a yellow border to separate each section
- This page contains 3 sections as follows: -
- Communicate with British Sign Language - An image of BSL. This allows users to understand what is being taught by the business. The additional text explains what Happy Hands offer regarding British Sign Language (BSL) content.
- Our Courses - An image of a women being taught BSL via video conferencing. This allows users to understand that the lessons are online. The text supports this message with additional information.
- Our Company - An image of some hands doing the love sign (ASL). This section is to briefly introduce the company to the user.
- There is a call-out button under the Our Course and Our Company sections to direct users to other pages in the website. The first 'call-out' button allows users to find out more information about the lessons and prices of the courses offered. The second 'call-out' button allows users to find out more about the tutors that teach the BSL classes. Both buttons require user input to work.
- This page contains 4 sections as follows: -
- Children's Courses Under 7 - An image of a small girl doing BSL. This allows users to quickly identify which course is most suitable for them or thier child/children. The additional text and sample videos provide further information and confirmation of the users and business owner's desired expectations.
- Children's Courses 8 to 13 - An image of a young girl doing BSL. This allows users to quickly identify which course is most suitable for them or thier child/children. The additional text and sample videos provide further information and confirmation of the users and business owner's desired expectations.
- Young Adult Courses 14 to 18 - An image of a teenage girl doing BSL. This allows users to quickly identify which course is most suitable for them or thier child/children. The additional text and sample videos provide further information and confirmation of the users and business owner's desired expectations.
- Adult Courses - An image of an muslim woman learning BSL. This allows users to see that the adult courses are suitable for any adults, any age, and any religion, without discrimination. The additional text and sample videos provide further information and confirmation of this.
- There is a call-out button at the bottom of this page under the Adult Courses. This allows users to access the free content, such as more video content, and downloadable packs such as fingerspelling/alphabet charts.
- This page contains 3 sections as follows: -
- Teacher Michael - An image of Michael. This allows users to see who will be teaching the Young Adult and Adult lessons. The additional text allows users to quickly identify what experience and qualifications the tutor has.
- There are also reviews under the text. This allows users to see what other users have said about the lessons and business.
- Teacher Becky 'B' - An image of Rebekah or 'Teacher B'. This allows users to see who will be teaching the Children's Courses up to 13 lessons. The additional text allows users to quickly identify what experience and qualifications the tutor has.
-
- There are also reviews under the text. This allows users to see what other users have said about the lessons and business.
- Our Prices - This allows users to see how long and how much individual lessons cost. These prices are slightly lower than average in this field.
- There is a call-out button under the Our Prices which encourages the user to contact the business. This allows the user to contact the business to find out more information or preferably to book lessons.
- This page contains 2 sections as follows: -
- Free Alphabet/Fingerspelling Downloadable sheets. This allows users to download, save and review this free downloadable content. This will enable users to practice some aspects of BSL and the aim of the business is to whet the users appetite to learn more
- There is a call-out button under this section which allows users to access more free content from a supporting website. This allows users to download more content and possibly make purchases from the new site. (Presently this links to an outside company that supplied the free content in the website)
- Free Video Lesson. This allows users to watch and learn how to do numbers in BSL. The user also can control this video from YouTube using the buttons contained in the embedded file. This lends itself to a better user experience.
- This page contains 1 section as follows: -
- A contact form with 'First Name', 'Last Name', 'Email Address' and 'Message' fields. This allows the user to input their information and find out more details, ask questions or book lessons with the business.
- There are 2 call-out buttons under this form. The first button Reset resets the form in case of user input error. The second button Submit allows the user to send their form to the business. On doing this they will be taken to a new page to show that submitting the form has been successful. Users will need to provide information in all fields, with a valid @ email address in order to be able to submit forms. This allows the business to only recieve valid customer comments.
- This page is not linked to the Home Page or Navigation Bar
- This page is only accessed on completion of a valid and correctly filled in form which the user has submitted on the #contact-us.html form.
- This page contains the following section: -
- A Thank You image and message. This allows the user to know that they have submitted thier form sucessfully on the contact-us.html form section.
- There is 1 call-out button under this form. This allows the user to return to the form page that they last interacted with
- This page is not linked to any other page in the website
- This page is only accessed if a user types an incorrect web address in the browser navigation bar
- This page contains the following section: -
- A humourous message notifying the user of an error. This then allows the user to recognise that the web address doens't exist.
- There is 1 call-out button in this section. This allows the user to return to the home page of the main website - Happy Hands
- To enable users to book lessons - not able to implement this at present
- To enable users to pay in advance for lessons - requires some form of payment and associated security
- To provide more interactive content, especially for children such as games, interactive packs/content and craft ideas - unsure of how to implement this
- To provide an option to view the whole website in British Sign Language - unsure how this could be implemented
- A more detailed contact form and some sort of CAPTCHA button - think JavaScript required
- A more responsive form sent - JavaScript required
- Add Terms and Conditions, Privacy pages
- A log in/Register form
- A members only area
- New content for returning members.
- HTML Used as the main markup language of the website content
- CSS Used to style the content of the website
- JavaScript Used with Bootstrap for the Navigation menu at the top and bottom of the website
- Bootstrap Used for a mobile first responsive website, display properties such as grid layout, preset css such as for containers, forms, etc
- Wireframes with Balsamiq To create mockups of the website to aid creation
- Github To store and host source code
- Gitpod To write the code
- Font Awesome for Social Media buttons
- Google Fonts for the fonts used in the website
- Coolors to source the main colours for the website
- Favicons to create a favicon for the tab and website title
- YouTube to host videos for the lessons.html page and the numbers lesson on the free-content.html
- hmtl validation to check the html code had no errors
- css validation to check the css code had no errors
- Lighthouse an online validation tool that helps to improve performance and quality of the webpage with helpful tips to improve as each html page is scored.
Testing information can be found here
- To website project was created by going to Github, a code hosting platform, using the following steps: -
- Create an account using an email address and password or a google account
- Log in to account and create a new repository
- Give this new repository a creative name. Then click the green Gitpod button which will take you to Gitpod. Gitpod is an open source platform for code development
- Then open this platform and started coding
- To save the work I had to do the following: - Click 'File', click 'auto save'
- To save the work to github I needed to do the following: -
- git add (either the name of the file, i.e. index.html or '.' which adds everything that has been worked on that day)
- git commit (either the name of the file, i.e. index.html or '-m' and then add a comment in parenthesis "" and enter)
- It is recommended to commit daily. To complete the necessary steps to upload to github I needed to use the command - git push. This then 'pushed' all the saved work back to Github
- The following steps were taken to deploy this site and make it 'live': -
- On Github.com go to the repository, go the the project main page
- Click on 'Settings' and then scroll down to the section 'GitHub Pages'
- Click on the 'Pages' tab and then click 'Source' and choose 'Master' under the 'Branch' tab, then 'Root' and click save
- The link is now available for you to publish above this.
- On Github.com go to the repository, go the the project main page
- If you wish to use this repository as a starting point for your own design, or to contribute to this project, you can fork it. Follow the steps below.
- Navigate to the repository in github.
- Choose the correct repository. In this case it is Happy Hands
- Click 'Fork' in the top-right corner.
- This will then create a copy (make sure you have already created your own github account) in your repository
- Now follow the steps outlined in project creation
- Click 'Pull Requests' and seclect 'New Pull Request' button
- To clone the website please use the following steps: -
- Navigate to the repository in github.
- Choose the correct repository. In this case it is Happy Hands
- Click the 'Code' button
- You will now be given options to make a clone of the website, to download it or to open with GitHub Desktop. You can choose to clone the 'HTTPS', the 'SSH' or 'GitHub CLI'
- Open Git Bash or similar
- Navigate to your desired directory for the cloned project.
- Type 'git clone' followed by the URL copied in step 3.
- Press 'Enter' to create your local clone.
All text content and video content was created for Happy Hands by Michael Greenberry, the business and website creator/owner.
The text for the BSL section on the home page (index.html) was influenced by information about British Sign Language from wikipedia.
- All pages:
- Happy Hands: Hero Image - Happy Hands was designed by Michael Greenberry using the Sketches Pro app by Tayashi on Apple iPad.
- index.html
- BSL image: Image by Cath Smith from www.letssign.co.uk.
- Sign Language Deaf Disabled People Video Conference: Photo by Andrey Popov from Shutterstock
- Hands Sign Languagel Circle: Photo by Darelle from Pixabay
- lessons.html
- Little girl smiling with love hand: Photo by Wisansaya Suksong from Shutterstock
- Smiling indian latin deaf child: Photo by insta_photos from Shuttercock
- Smiling teenage girl deaf: Photo by Leoschka from Shuttercock
- Young black female in hijab: Photo by Prostock-studio from Shuttercock
- Video contect from business owner by Michael Greenberry
- tutors.html
- All content from business owner by Michael Greenberry
- free-content.html
- Fingerspelling/Alphabet download and images: left and right hand alphabet fingerspelling documents/images by Cath Smith
- success.html
- Thankyou image on success page: Cath Smith from www.letssign.co.uk
All icons for Social Media were sourced form Font Awesome
This Bootstrap - Nav Bar page was used to produce the type of navigation menu I wanted. This was then adapted for my use.
<a class="navbar-brand" href="index.html">
<img class="happy-hands" src="assets/images/logos-images/happy-hands.jpg" alt="Happy Hands Logo"></a>
<h6 class="yellow">Happy Hands</h6>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSurpportedContent"
aria-controls="navbarSurpportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSurpportedContent">
<ul class="yellow navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="lessons.html">Lessons</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tutors.html">Tutors</a>
</li>
<li class="nav-item">
<a class="nav-link" href="download.html">Free Content</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact-us.html">Contact Us</a>
</li>
</ul>
</div>
</nav>
.navbar-toggler-icon {
/* From Bootstrap*/
display: inline-block;
width: 5em;
height: 5em;
vertical-align: middle;
content: "";
background: 50%/100% 100% no-repeat;
}
Bootstrap - Buttons was used to provide ideas and some code was used and adapted to create my buttons (call-outs).
.btn {
/*influenced by Bootstrap*/
background-color: #FFFB0F;
border: 2px solid #3066BE;
border-radius: 2rem;
color: #3066BE;
margin-bottom: 1rem;
text-align: center;
font-size: 1.5rem;
margin-top: .5rem;
}
The Hero image by itself was too bright for the strapline and heading. To adjust the 'background-image' I adapted some code found at CSS-Tricks.com.
.hero-image {
background: url(../images/logos-images/happy-hands.jpg) no-repeat center center;
background-image: linear-gradient(rgba(0, 0, 0, 0.40),
rgba(0, 0, 0, 0.40)),
url(../images/logos-images/happy-hands.jpg);
/*background-image influenced by css-tricks.com*/
background-size: cover;
height: 36rem;
width: 100%;
position: relative;
}
The YouTube videos were not responsive when the screen was changed from a mobile device to a laptop. To adjust the size of the video and make it responsive for all devices I used part of the code found at Stack Overflow
.video {
/* Credit - https://stackoverflow.com/a/54924505 */
position: relative;
padding-bottom: 56.25%;
height: 0;
}
Many thanks to the following people for their help with this project: -
My wife Rebekah Greenberry for providing the sample children videos
Cath Smith from www.letssign.co.uk for providing sample images and allowing me to use them in my website and for feedback.
Dave Tyler for his feedback and guidance on colour palettes.
My mentor Spencer Barriball who went through this project with me and provided great feedback throughout
Anna Greaves for her excellent README video and supporting documentation, on which is founded this README and Testing documents.
Code Institute Slack Students for their feedback and help with my questions - special mention to Anthony, Eventyret_mentor, Ed B_Lead and igor_ci plus so many more
Michael Greenberry is the creator and owner of this website and future business. This is a User Centric Development Milstone Project website created as part of a Full Stack Software Development in Code Institute by Michael Greenberry.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
