Lead Website Designer for Gelos Enterprises Assessment

Scenario

You are working as a Lead Website Designer for Gelos Enterprises. Gelos is an IT organisation with a proven track record in web development and cybersecurity. As a policy, the organisation not only serves multi-national companies, but a separate division also caters to the requirements of small-sized organisations.

Gelos has been approached by TipToe Soles, a shoe manufacturing company based in Sydney, Australia. The company has been manufacturing and providing their products as a white label to various other brands. The management of the shoe company now wishes to launch its own brand in the market at affordable costs.

TipToe Soles has contracted Gelos Enterprises to develop and build a responsive e-commerce website for its first range of products to be launched shortly. The objective of this website is to enable customers to view and purchase products online. As the Lead Website Designer for Gelos Enterprises, you are responsible for this project.

TipToe Soles management has a vision for the brand to be the go-to affordable footwear brand in Australia and around the world.

The first range of products that will be launched are comfort or daily wear shoes targeting customers of age 30 and above. The website should have a minimalistic design to avoid any unnecessary distractions.

TipToe Soles management has provided a brief description of how they visualise the structure of their website. The website should have a main menu toward the left side of the screen with a banner across the home page wherein the latest arrivals shall be displayed. The main menu should contain about us, products, services, login, wishlist, contact option tabs, as well as a search bar and feedback form. The footer of the home page should include hyperlinks to return policies, exchange policies, delivery policies, etc. And of course, each page should hold the brand logo at the top left corner. The colours used should be monochromatic but must not be too heavy on the eyes.

The website should be compatible with most platforms and be reasonably backwards compatible. This means that the website should be compatible with computers running Windows (Windows 7 and above) and macOS (macOS 10.12 and above) operating systems, as well as mobile devices running iOS and Android. The website should also support all popular web browsers such as Chrome, Firefox, Internet Explorer, Edge, Safari to name a few. The company also uses Microsoft IIS server as it is a flexible, secure and manageable web server for hosting anything on the web.

For the website’s product section, similar types of products should be grouped together and displayed in a list format and a payment gateway can be eventually integrated as well.

The brand logo and the website content shall be provided by TipToe Soles. Any images included in the website should have an aspect ratio of 4:3.

Since the company is confident about the quality of their products, they’re sure that the website would experience high traffic and don’t want to face any compatibility or performance issues as any downtime would result in loss of business. Further, it should comply with existing state and federal laws. Website accessibility is a key concern for TipToe Soles management as well as Gelos Enterprises. As such, you should ensure that any website development you undertake is in compliance with WCAG 2.0 Standards.

Part 1: Understanding the website requirements

Task 1 – User analysis

Task 2 – Establish TipToe Soles website requirements

Now that we have identified the requirements of the website user, it is now time to elaborate on the website design. This includes identifying and defining the aspirations of the client with respect to the product, as well as the functional requirements of the product.

Review the previous scenario and briefly summarizing the client’s vision for the website and their  functional requirements.

Task 3 – Develop the testing approach

Determine the most appropriate mark-up language to build the front-end of the website and document your response:

Develop testing approach and test cases based on requirements TDC

Develop the testing approach to be used to test the finalised website from the following testing categories:

• Functionality
• Usability
• Interface
• Compatibility
• Security
• Performance
• Database

You should select at least 3 testing categories and:

1. use the following template to define 2 test cases for each testing category
2. create a testing checklist containing at least 8
3. Test Category 

Part 2: Planning the website

Once we have documented the requirements of the user, it is now time to document the product requirements. The client has briefly described in the scenario how they wish their website to look like and, in this part, you will further explore the client’s requirements and plan the website.

Task 1 – Develop a structure of the website

Determine and organise the content required for the website:

1. Analyse the website requirements to:
   • determine any additional content required by the client
   • determine any additional content required by the users.
2. Group and prioritise the content into categories (pages and subpages) so the content will be logical and accessible to users.
3. Using the information from the previous step, create a digital sitemap diagram of the overall website hierarchy based on your grouped content.
4. Create digital wireframes as templates for the page layout, including one for the home page and one or more for internal pages (for both a landscape desktop view and portrait mobile view).

Use may use MS Word or MS PowerPoint to create your diagrams/designs.

Submit the digital wireframe screenshot(s) as evidence.

Task 2 – Accessibility planning

Accessibility refers to the ability of individuals with special needs to perceive, comprehend, navigate, and engage with websites and tools, as well as their ability to contribute equitably and without barriers.

Review the Enterprises Accessibility Policy for Website Development (Appendix 1) and WCAG 2.0 Accessibility Standards and prepare an accessibility checklist to complete as part of the development of the website.

Task 3 – Role-play Scenario: Conduct a client meeting

Student note: Ensure that you have completed Part 1: Task 1 – Part 2: Task 3 before proceeding to this task.

Now that you have identified the requirements of the website, and completed initial website development planning, you will need to confirm your findings in Part 1: Task 1 – Part 2: Task 3 of this assessment with the client.

In order to do this, you will have a face-to-face meeting with the client regarding the website requirements and development plan.

The agenda items for this formal meeting are as follows:

1. Confirm the website requirements that you have documented in Part 1 of this asessment.
2. Discuss the structure of the website by sharing digital sitemap and digital wireframe.
3. Ask open-ended questions for clarification (if needed).
4. Confirm the user requirements and the structure of the website.
5. Obtain client feedback and amend layout if required.

This role play will take approximately 10 to 15 minutes. To understand the assessment criteria for this role play, see the Assessment checklist.

Role of the student being assessed

During the role-play make sure that you use:

• clear, simple language and plain English.
• appropriate conventions, protocols and tone for your audience.
• listening and inclusive questioning techniques.

The Assessor may ask questions while the demonstration is taking place, or if appropriate directly after the activity has been completed.

Part 3: Creating the website

In this part of the assessment, you will be required to develop a website for TipTop Soles. You should refer to and incorporate your findings in Part 1 and Part 2 of this assessment when developing the website.

Task 1 – Develop a website

Using the text editor and the mark-up language identified in Part 2, create the structured and formatted website for the client.

Student Note: You must not use a program that generates code.

1. Create and use an appropriate directory structure for the website.
2. Build the page structure for your web pages using essential basic elements.
3. Create the website homepage, about us page, and contact us page according to the requirements of the scenario.
4. Each page must include:
   • product
   • A footer with appropriate utility links and social media links
   • Company logo, which includes a link back to the home page
   • A current page indicator to clearly show a visitor where they are within the site.
5. Use semantically correct structural mark-up to define sections of each page as needed.
6. Style, format and lay out the pages using CSS:
   • Use one external CSS file for all styles i.e., no inline or internal styles.
   • Use consistent styles and layout across the site, including appropriate use of font stack, colours, line-spacing, etc.
   • Do not add unnecessary elements or attributes – use existing elements as selectors wherever possible.
   • Use ‘class’ and ‘id’ attributes appropriately.
   • Style hyperlinks appropriately for different states, such as visited and hover – do not use the default styles.
   • Style the current page indicator appropriately.
   • Use monochromatic colour theme.

Package your website code in a zip file, and submit a screen recording demonstrating the functionality of your website (with a visible electronic sticky note of your name displayed on screen). Submit the zip file and screen recording to your assessor as evidence of completion of this task.

Part 4: Test and validate the website

Now that you have completed creating the website, it’s time for you to test and validate it. Record your test results (including screenshots where indicated) in a word-processed document to provide to the client. Use specialised language where appropriate.

Task 1 – Test and validate the website

When completing this task please document all responses in the template provided in Appendix 2.

1. Using the test approach and test cases that you created in Part 1, test your website and complete your testing checklist according to organisational procedures. Make sure that your testing includes the following:
   1. Test your website in two common browsers; if you have difficulty accessing different browsers and versions, you can use an online testing site such as Browserling (Long URL: https://www.browserling.com/ )(include screenshots).
   2. Validate your website (W3C Markup and W3C CSS validation) to ensure it meets web standards (include screenshots).
2. Correct any cross browser testing issues and re-test your website to ensure these have been resolved. Discuss the difference in test results and what work was done to fix the issues (including screenshots of the different testing results).
3. Explain the testing process and the results, including any outstanding issues and corrective actions.
4. Check text equivalent for every non-text element and confirm text-only pages are logical and accessible.
5. Check that the document can be read without style sheets, and confirm information and pages are not dependent on colour (operating in a monochrome environment).
6. Verify pages operate on a text-to-speech browser using a screen reader.

Part 5: Obtaining feedback and sign-off

Once the desired product is ready and delivered to the client, it is important to obtain feedback and sign-off from the client.

Feedback can tell you how you have performed, if the requirements were met within the time and budget, and how satisfied the client is with your work.

In this section, you will be required to create a feedback document and a project sign-off document.

Task 1 – Prepare the feedback form

Use MS Word to create a feedback form to provide to TipTop Soles.

Task 2 – Prepare the sign off form

Use MS Word to create client sign off form to provide to TipTop Soles.

Assessment checklist

The following checklist will be used by your Teacher/Assessor to mark your performance against the assessment criteria of your project. Use this checklist to understand what skills and/or knowledge you need to demonstrate during this assessment event. All the criteria described in the Assessment checklist must be met.

Appendix 1: Enterprise Accessibility Policy for Website Development

The following is an outline of Enterprise accessibility considerations with which must be complied with when developing a website either internally or for a client.
 

1. Images

Unless your photographs are solely decorative, ensure they have alternate (alt) text. The alt text for solely decorative pictures, such as a bullet point or border, should be blank or null. The long description attribute can only be used for alternative content that is particularly extensive or descriptive (longdesc). Unless the picture is part of a logo or brand name, the text should be utilised rather than an image.

Verify your alt text by hovering your mouse pointer over the image; a yellow box with a description of the image should emerge (unless it is for decoration).

This is because those who are blind or visually impaired listen to the alt text to determine what the image symbolises. When people, particularly those with vision impairments, raise the picture size of text given as an image, the text becomes illegible.

2. Audio and video recordings

Ascertain that video and audio content is accompanied by subtitles, captions, or, at the very least, textual transcripts. If a website has audio that plays automatically, ensure that users may pause or stop these sounds. Verify that your audio and video contain open captions (captions that are always available) or written transcripts and that your pages provide a pause or stop button for automatic audio.

Reason: persons who are hard of hearing rely on captions and subtitles to read what they hear. Automatically playing sounds without pausing or stopping them can be perplexing for consumers listening to the material.

3. Colours

Ensure that the colour of the text provided contrasts sharply with the colour of the background. Ascertain that colour is not utilised only to convey information (e.g., refrain from saying "choose the red circle to proceed"). Contrast your work by using dark backgrounds with bright writing or vice versa. To check your contrast, use the free programme (Colour Contrast Analyser) offered by Vision Australia.

Reason: Low contrast (e.g., light grey writing on a white backdrop) makes web pages difficult to view for everyone, but especially for persons with vision impairment. For persons with colour-related vision impairments, using colour to convey information is inappropriate.

4. Text

Verify that your text may be enlarged without impairing the page's or site's content or functionality. Avoid using text pictures just for ornamental purposes. Check that your text can be resized in Internet Explorer by selecting "view" and then "text size" and selecting "biggest."

Reason: Individuals with low vision must increase the text size on websites to read the material. The text should be text; graphics can become illegible when enlarged; therefore, use straight text and style appropriately unless it is a logo or brand name.

5. Links

Ensure that your links clearly state where they are going, what they are, and why they are there. If you include a link to a document, be sure to include the kind of document (DOC or PDF) and the file size.

Reason: Individuals listening to links must understand what the link is or signifies to decide whether to proceed to the destination or open the document. The file size informs users with sluggish connections how long the document will take to download.

6. Site navigation and structure

Ascertain that all areas of your website may be viewed without the use of a mouse. Ascertain that the order of reading and navigating is reasonable and intuitive. Ascertain that information can be accessed in a variety of ways.

Verify that the webpage can be accessed using the keyboard's "Tab," "Shift + Tab," and "Enter" buttons. Verify that the site makes sense and shows correctly by viewing pages in a text-only browser such as Lynx View, Charlotte Web Browser, w3m, browse or WebbIE. Look for a site search, a site map, relevant links, and basic navigation on your pages.

Reason: Individuals who use only their keyboard or speech will not access portions of the website that require a mouse click. Poorly created sites are difficult to navigate and make it tough for users to find what they're looking for. Individuals access websites in various ways, and providing several paths to your content results in a more intuitive and usable website.

7. Forms

Forms containing text entry fields, buttons, and checkboxes Assign labels immediately adjacent to fields you want visitors to enter or click on. Check that fields that require input (e.g., name, email, comments) have a label next to them that describes the data that should be entered.

Reason: Individuals who use assistive technology must recognise what goes into each field and will listen to the instruction or prompt to determine what goes into each field.

Appendix 2: Website test results documentation template
Issue rectification

Correct any cross browser testing issues and re-test your website to ensure these have been resolved. Discuss the difference between your initial test results and updated test results, as well as the work completed fix the issues (including screenshots of the different testing results).

Explain the re-testing process you undertook, including any outstanding issues and corrective actions which may be required.

Final testing checks

1. Text equivalent for every non-text element and text-only pages are logical and accessible. (Tick one box).
   
   Yes ? No ?

2. The website can be read without style sheets, and information/pages are not dependent on colour (operating in a monochrome environment). (Tick one box).
   
   Yes ? No ?
3. The website operates on a text-to-speech browser using a screen reader. (Tick one box).
   
   Yes ? No ?