GUESS INDIAN SIGN LANGUAGE ALPHABET

Introduction

Participate in our interactive quiz game to improve your skills with the ISL fingerspelling alphabet. Through interactive and challenging quizzes, you can improve your understanding and fluency in ISL fingerspelling, promoting inclusivity and accessibility in communication.

This project aims to develop an interactive online quiz game for learning and practising the Indian Sign Language (ISL) fingerspelling alphabet. It aims to ensure ISL learning is accessible and enjoyable while also promoting inclusivity and community communication. Through gamification, the project seeks to enhance users' retention and understanding of ISL fingerspelling, ultimately contributing to their language proficiency. Also, this is part of the second portfolio project of the Code Institute course.

Target Audience ⁤

Our main target audience consists of people who want to learn ISL, including students, educators, interpreters, and friends or family members who use ISL. If you are interested in language learning and inclusivity or just want a fun and educational challenge, the game is for you.

Value Proposition ⁤

Discover a fun and interactive way to master the ISL fingerspelling alphabet through our unique quiz game. We enhance engagement and effectiveness by gamifying the learning process. Regardless of your skill level, our game is a valuable tool for improving your ISL fingerspelling abilities.

Click here to view the Live website

Table of contents

1. Introduction
2. UX
   1. Five Planes of User Experience
      • The Strategy Plane
      • The Scope Plane
      • The Structure Plane
      • The Skeleton Plane
      • The Surface Plane
   2. Colour Scheme
   3. Typography
3. User Stories
   1. New Site Users
   2. Returning Site Users
4. Wireframes
   1. Mobile wireframe
   2. Tablet wireframe
   3. Desktop wireframe
5. Features
   1. Existing Features
   2. Future Features
6. Tools & Technologies Used
7. Testing
8. Deployment
   1. Local Deployment
      • Cloning
      • Forking
   2. Local vs Deployment

---

UX

In this project, I follow the Five Planes of User Experience model invented by Jesse James Garrett.

Five Planes of User Experience

This model aids in transforming from abstract ideas, such as creating objectives of the project and identifying the user needs, to concrete concepts, such as assembling visual elements together to produce the visual design of the idea to meet the project's objectives and users' needs.

The Strategy Plane

Indian Sign Language (ISL) has recently been brought to the attention of people in India. The Prime Minister of India, Narendra Modi, made it part of the school curriculum. Also, Narendra Modi launched the first official ISL dictionary, which consists of 4,000 signs. They have launched the third edition of ISL, bringing the total number of signs to 10,000 so far.

Users may look for ISL gamification. Therefore, the main objective of this project is to create a gamification website that encourages users to learn and practice ISL fingerspelling alphabet as a first step in learning ISL. Also, a gamification website includes an external resource for users to learn ISL further. Thus, this project aims to meet the business and the user's needs.

The Scope Plane

Based on the main objective and goals set out in the Strategy Plane, these requirements for developing the website are broken down into two categories:

Content requirements:

• Gamification ISL fingerspelling alphabet
• Facts about ISL
• External resources to learn ISL further

Functionality requirements:

• Easy and interactive gamification
• Easy to navigate the gamification website
• Provide an external link to get more resources for learning ISL

The Structure Plane

The requirements outlined in the Scope Plane were then used to create a structure for the website. A site map below shows how users can navigate the website easily.

The Skeleton Plane

Please refer to the Wireframes section for more detailed wireframing.

The Surface Plane

Click here to view the live site.

Colour Scheme

I used Color Hunt to generate my colour palette

The colour palette represents the flag of India. However, it was crucial for the colour palette to pass the minimum colour contrast set by the Web Content Accessibility Guide (WCAG). The colour palette was tested using Coolors' Color Contrast Checker. The result below shows that these colours passed the minimum WCAG contrast ratio.

:root {
    --saffron: #F9A37B;
    --white: #FAFAFA;
    --green: #1A4223;
    --navy: #06038D;
    --black: #191919;
}

Typography

Laila was chosen as the main font for the whole website. The font was imported from Google Fonts. The font makes the website look and feel cartoony and fun.

Arial and sans-serif were used as step-back fonts if Hind Vadodara failed to load on the website.

User Stories

New Site Users

• As a new user, I want to understand how to play the game, so that I can start learning ISL fingerspelling.

• As a new user, I want to be able to see the immediate result after selecting the answer.

• As a new user, I want to be able to replay the game, so that I can practice and improve my skills.

Returning Site Users

• As a returning user, I want to find resources to learn ISL further.

• As a returning user, I want to see new and varied questions each time, so that my learning continues to be challenged.

• As a returning user, I want to be able to share my scores, so that I can challenge my friends to beat my score.

Wireframes

To follow best practice, wireframes were developed for mobile, tablet, and desktop sizes.

I have used Balsamiq to design my site wireframes.

Mobile Wireframes

Tablet Wireframes

Desktop Wireframes

Features

Existing Features

The Home Page

The Home Page is the first contact users will encounter when visiting this website. The page appears with the title welcoming users to the website. Also, there are three buttons that leads users to the Rules page, the Facts page, and the Contact page. Click here to view the home page

Header

At the top of the website is the header appears the name of the website.

Footer

The footer is at the bottom of the website appears the copyright message.

The Rules page

The Rules page explains the rules of the game. There are two buttons that leads users back to the Home page or continue to the Game page to start the game. Click here to view the Rules page

The Game page

The Game page is where the user can play the game. The top of the box container consists of the current question number, the countdown timer of 15 seconds, and the X button to quit the game. In addition, the image appears in the centre of the box container, which shows ISL fingerspelling alphabet for users to guess. At the bottom of the box container consists of four answer buttons for users to choose one of four buttons. Once user choose their answer, it will appear a green colour to indicate that this is a correct answer. Otherwise, it would appear a red colour to indicate that this is a wrong answer, and a green colour to show which answer was correct. Then, the next button will appear to allow users to move to the next question. Upon the completion of the game, the result container will appear and give users choice to restart the game or quit to the home page. The game quiz was also made for responsive across different screen sizes. Click here to view the Game page

• Tablet version

• Mobile version

The Facts page

The Facts page features a short list of facts about ISL. There are two buttons that take users back to the home page or take users to the external link (Indian Sign Language Research and Training Centre) for more ISL learning resources. Click here to view the Facts page

The Contact page

The Contact page features a contact form for users to input their first name, su