Labels

Major Project


25.9.2024 - 8.1.2025 (Week 1 - Week 16)
Takuto Hozumi / 0354047 / Bachelor Of Design (Hons) In Creative Media
Major Project

INSTRUCTION

Assignment Overview

The module requires students to produce a standalone portfolio artefact derived from their dissertations in DIS60304 Design Research Dissertation module or a completely new topic. Students are required to apply independent learning skills in a studio environment to tailoring content learned in class to their own work thus generating an effective and skilful design project. The class will be delivered with blended learning materials such as tutorial videos, case study web repositories and videos of expert series. These references are to facilitate the flipped delivery complemented with face-to-face consultation sessions, which is documented and managed online.

1. Submission
  1. Project Management Document
  2. Link to e-portfolio
  3. Proposal Presentation Deck
  4. Final Presentation Deck
  5. Compilation of final designs and collaterals produced for:
    1. Major Project
    2. Design Portfolio (if applicable)

2. Ideation
First, we analyzed the actual job postings that were available to the public based on the profession they wanted to be in. This was done to find out what skills are generally required to obtain that occupation. The position I set as below;

Position: Website designer / developer
In-house designer in any industry, develop company website, owned media or eCommerce

Job 1
Bachelor of Arts in Computer Science, Engineering, Web Design, Digital Marketing, Information Technology, or related field.
3 years in front end web or software development.
Prior experience working in project management and software development environments.
Prior experience using website content management systems and web analytics software.
Prior experience with Adobe Experience Manager is a plus.
Electric cooperative, finance or energy industry experience is a plus.
Master’s degree in a related field is a plus.
Ability to develop websites using HTML, JavaScript, and CSS.
Strong knowledge and experience with industry standard web front end frameworks/libraries such as Bootstrap, Angular and ReactJS.
An understanding of responsive UI, layout, cross-browser compatibility, accessibility and general web functions and standards.
Ability to multi-task and work collaboratively on cross-functional teams, and to perform with minimal direction with tight deadlines.
Strong attention to detail and organization.
Intermediate knowledge of both PC and Macintosh operating systems.
Intermediate MS Office skills.
Ability to work with standard office equipment.

Job 2
Bachelor’s degree required
3+ years experience in eCommerce/website administration or development
Experience in the manufacturing industry preferred
Experience with B2B eCommerce preferred
Strong passion for creating digital shopping and buying experiences
General knowledge of PIM systems and product content management
Knowledge of SEO best practices and current developments
Strong Excel skills preferred
Familiarity with integrations, APIs, and database queries
Familiarity with Google Tag Manager, Google Analytics, Looker Studio and online metrics
Familiarity with HTML, CSS, and website development
Experience with Optimizely Configured Commerce, Salesforce Commerce, Shopify, Salesforce CRM, Syndigo PIM preferred but not required.
Excellent interpersonal, verbal, and written communication skills
Ability to work effectively in a team environment
Ability to think creatively and excellent problem-solving skills
Able to communicate with technical and non-technical people

Job 3
Bachelor's degree in a relevant field or equivalent professional experience.
Proven experience building PHP/Symfony web applications.
Strong understanding of user-friendly design principles and performance optimization for software components.
A solid technical understanding of how to build systems and UI patterns, whilst working within a complex set of technical constraints.
Excellent communication skills with the ability to articulate technical concepts to both technical and non-technical stakeholders.
A self-motivated attitude, with a passion for continuous learning and sharing knowledge with the team.
Demonstrated experience working in or a commitment to fostering an inclusive environment for diverse faculty, staff, and students.

3. Analysis of Requirements for web design position

Required Education and Experience

  • Degree: A bachelor’s degree in computer science, web design, information technology, or a related field is typically required.
  • Work Experience: At least 3 years of experience in web development, eCommerce, or website management. Experience in specific industries (e.g., manufacturing, finance, energy) is a plus.

Technical Skills

  Programming Languages and Frameworks:

  • Proficiency in HTML, JavaScript, and CSS is essential. Familiarity with front-end frameworks/libraries such as Bootstrap, Angular, ReactJS is also expected.
  • Knowledge of PHP and Symfony or other back-end technologies is advantageous.

  Tools and Software:

  • Experience with Adobe Experience Manager and content management systems (CMS) is desirable.
  • Proficiency in Google Analytics, Google Tag Manager, and a solid understanding of SEO best practices are required.
  • Knowledge of Excel and other general office software may also be expected.

Additional Technical Knowledge

  • APIs and Databases: Basic understanding of API integrations and database queries is beneficial.
  • Performance Optimization and Responsive Design: Knowledge of user-friendly design, system performance optimization, and responsive web design is required.
  • Cross-browser Compatibility and Accessibility: Familiarity with standards for cross-browser compatibility and web accessibility is essential.
Other Skills
  • Communication Skills: The ability to explain technical concepts effectively to both technical and non-technical stakeholders is highly valued.
  • Teamwork: Strong collaboration skills and the ability to work within cross-functional teams are important.
  • Problem-solving and Creativity: A creative mindset and proactive problem-solving skills are expected.
  • Self-management and Multitasking: The ability to manage multiple tasks and meet deadlines is also critical.

4. Project Plan Abstract
Based on the results analyzed, I decided what to create in this project.

Keywords: Equitable, Inclusive design / Interactivity / Design personalization on any age, gender group and disabilities to improve usability for them

Problem Statement

Problem 1: 
Although disability-friendly design scales exist, such as font size regulations useful for presbyopia and low vision, and color schemes that accommodate color weakness, few websites actually cover them.

Problem 2: 
Different designs should be considered depending on the demographic of the target audience, but most of websites are having only one design on one page.

Goal
Theme: DEI awareness website guide

Project Objective: Help visitors understand the importance of DEI and give the educational content of WCAG guidelines, how to achieve user-friendly WEB Design.

Deliverables: Website, project document

Details

Target:
Web designers, planners, PR reps, coders,
and any person in charge of Web regarding task in a company

5. Research on Color Weakness/Blindness
Statistics
There is general agreement that worldwide 8% of men and 0.5% of women have a red/green type of colour vision deficiency. These figures rise in areas where there is a greater number of white (Caucasian) people per head of population, so in Scandinavia the figures increase to approximately 10-11% of men. By contrast, in sub-Saharan Africa there are few colour blind people. Countries such as India and Brazil have a relatively high incidence of CVD’s because of the large numbers of people with mixed race genes in their genetic history.

The 8% of colour blind men with inherited colour blindness can be divided approximately into 1% deuteranopes, 1% protanopes, 1% protanomalous and 5% deuteranomalous. Approximately half of colour blind people will have a mild anomalous deficiency, the other 50% have moderate or severe anomalous conditions.

Numbers of tritanopes/tritanomalous people and achromats is very small, perhaps 1 in 30-50,000 people.

Reliable statistics for people with an acquired form of colour vision deficiency are difficult to find but as many as 3% of the population could be affected because age-related deficiency is relatively common in the over 65s and therefore on the increase in the UK due to the rising numbers of elderly people per capita.

Fig.1: Color Weakness/Blindness

The table shows a gradation of the frequency of occurrence of color vision or higher in Asian males and their color vision. About 5% of Asians, or 1 in 20, are color disability.

Fig.2: Color Blindness Type Ratio

Foundations of Inclusive Design
Inclusive design is based on several key principles aimed at making products and services accessible to all. The first principle is flexibility in use, allowing users to choose how they interact with a product or service. The second is simplicity and intuitiveness, ensuring that anyone, regardless of their level of experience or knowledge, can easily use the product. Finally, another crucial principle is adaptability to the user, where products can be customized to meet the specific needs of individuals.

Integrating these principles into product design not only improves accessibility for people with disabilities but also optimizes the experience for all users. For example, subtitles in videos, initially designed for the deaf and hard of hearing, are now widely used in noisy environments or by those who wish to learn a new language. Such adaptations show that inclusive solutions can benefit a much broader audience.

Universal Benefits of Inclusive Design
Adopting inclusive design principles is not just an act of social responsibility; it’s also a strategic approach that can increase user satisfaction and engagement. By considering the needs of all from the early stages of design, designers can avoid costly modifications during the project and, simultaneously, reach a broader audience.

A prime example of this universal benefit is the interface of Automated Teller Machines (ATMs). Initially designed for use while standing, many ATM interfaces have been adjusted to be accessible from a wheelchair. This modification has improved the experience for all users, including those who prefer to sit or those with children in strollers.

Furthermore, the design of websites that follow the Web Content Accessibility Guidelines (WCAG) benefits all users by improving clarity, navigability, and content readability. Users without disabilities also enjoy these improvements, which reduce eye strain and increase ease of use, even in suboptimal conditions.

These examples demonstrate how inclusive design not only meets the specific needs of certain groups but elevates the quality of the user experience for everyone, thus generating tangible benefits for both users and businesses.

Fig.3: Examples of color schemes to be avoided: visibility in Type D


Adding font size adjustment functionality alongside color accessibility features for color vision deficiency can greatly enhance the UI/UX of a website.

Enhanced Readability: Users with vision impairments or color blindness may also struggle with reading smaller text. By providing the ability to adjust font sizes, the website ensures content is legible to a wider range of users, improving readability for those with low vision.

Personalization: Allowing users to customize font size helps create a more personalized experience. Users can adjust the interface according to their own visual preferences, leading to greater satisfaction and ease of use.

Improved Accessibility: Combining color accessibility features (e.g., high contrast modes or colorblind-friendly palettes) with font size adjustment creates a more inclusive environment. It supports users who have multiple types of visual impairments, not just color blindness.

Compliance with Accessibility Standards: Implementing these features can help the website meet accessibility standards (e.g., WCAG guidelines), ensuring that it is usable by people with diverse abilities and complying with legal requirements.

Fig.4: Font Adjust Feature

6. Research on Color Simulation Tools
WCAG Color contrast checker
Fig.5: WCAG Color contrast checker

To check the color contrast between foreground and background of the texts

It checks the color contrast between the foreground and background of the elements that are in the page according to the WCAG 2.2.

It evaluates the contrast on all elements of the page considering their computed style for the color and background-color CSS properties. In case of these colors are defined with RGBA values, it also considers the opacity to deduce the real color that finally is show.

It can simulate color blindness and evaluate the contrast for the simulations. By this way, developers can see how the pages look for colorblind users.

The tool also includes two fields in which the colors can be introduced manually to be tested. It also allows to pick the color directly from the documents.

Finally, it auto-refreshes when DOM of the page changes (addition or removing elements), but if the page has many changes, this behavior can be de-activated.

Color Simulator
Fig.6: Color Simulator 1

Fig.7: Color Simulator 2

You can experience a simulation of the color world of people with different color vision from yourself and how they see colors.

You can check the color vision of two types of color vision, Type 1 (P-type), Type 2 (D-type), and Type 3 (T-type), in real time and compare it with the color vision of the general type (C-type).

Both versions for iOS devices (iPhone, iPad, iPod, etc.) and Android devices are available. You can take it with you wherever you go and check color anytime.

This tool is especially recommended for those working in fields where color is important, such as art and design.

Based on the theory of color science and developed by the author, who is a Ph.

7. Research on Web Content Accessibility Guidelines (WCAG)

Abstract
Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines will also often make Web content more usable to users in general.

  1. Principles - At the top are four principles that provide the foundation for Web accessibility: perceivable, operable, understandable, and robust. See also Understanding the Four Principles of Accessibility.

  2. Guidelines - Under the principles are guidelines. The 13 guidelines provide the basic goals that authors should work toward in order to make content more accessible to users with different disabilities. The guidelines are not testable, but provide the framework and overall objectives to help authors understand the success criteria and better implement the techniques.

  3. Success Criteria - For each guideline, testable success criteria are provided to allow WCAG 2.1 to be used where requirements and conformance testing are necessary such as in design specification, purchasing, regulation, and contractual agreements. In order to meet the needs of different groups and different situations, three levels of conformance are defined: A (lowest), AA, and AAA (highest). Additional information on WCAG levels can be found in Understanding Levels of Conformance.

  4. Sufficient and Advisory Techniques - For each of the guidelines and success criteria in the WCAG 2.1 document itself, the working group has also documented a wide variety of techniques. The techniques are informative and fall into two categories: those that are sufficient for meeting the success criteria and those that are advisory. The advisory techniques go beyond what is required by the individual success criteria and allow authors to better address the guidelines. Some advisory techniques address accessibility barriers that are not covered by the testable success criteria. Where common failures are known, these are also documented. See also Sufficient and Advisory Techniques in Understanding WCAG 2.1.
Inclusive Design Conformance Rate
  1. 1.3 billion people globally – 1 in 6 – have disabilities.
  2. About 75% of Americans with disabilities use the internet daily.
  3. Over 96% of the top one million web pages had accessibility issues in 2023.
  4. In 2022, US courts saw over 4,060 web accessibility cases, a 76% increase from 2018.
  5. The estimated cost of a web accessibility lawsuit is $100,000.
  6. Globally, people with disabilities hold $8 trillion in disposable income annually, contributing 20% of website visitors.
  7. 56% of people with disabilities cited accessibility as the reason for choosing one online store over another.

The State of Digital Accessibility Report 2023-2024 by Level Access shows that 72% of organizations have a digital accessibility policy and 85% see it as a competitive advantage. So, it is common for IT companies and large corporations to set the AA level of WCAG as a goal. Despite this, only 2-3% of all World's top websites perfectly meet the AA level of the WCAG, indicating that not many companies are aware of accessibility guidelines.

8. Persona Setting

Fig.8: Persona 1 Designer

Fig.9: Persona 2 Planner

Fig.10: Persona 3 Developer

Based on the settings, the user flow was identified.

Fig.11: User Flow Chart

This is the original user flow identified based on the website architecture. The following is a description of the individual flows according to the characteristics of the personas established.

Fig.12: Persona 1 Flow

Fig.13: Persona 2 Flow

Fig.14: Persona 3 Flow

Ensure that all target users can efficiently navigate around the website and then move on to the next competitive comparison.

9. Competitor Analysis

Competitor 1: https://www.accessibility.org.au/

Website operated by an Australian non-profit organization that provides such as website accessibility awareness, educational outreach. They also promote accessibility checking service.

Fig.15: Competitor 1

Pros
The importance of website accessibility is well explained.

Website design follows WCAG guidelines. Accessibility checks were performed and the following elements were met:

1. Color contrast was adequate for a colorblind viewpoint.
2. All pages were keyboard accessible.
3. Text recognition was sufficient and could be deciphered by a text-to-speech software.

Cons
1. The color scheme is not consistent from the viewpoint of a normally colorblind person.
2. There are no interactive animations, “feedback” to users is weak.
The above 2 points contradict their claim that the website's aesthetic beauty and accessibility are compatible.

Lack of alternative content to the video.



Websites that provide educational content on web accessibility by designers, developers, and other professionals. They also provide checklists to help you easily see how well you are meeting the guidelines.

Fig.16: Competitor 2

Pros
The importance of website accessibility is well explained.

Compared to Competitor 1, the content is more designer-oriented, both in content and visually.

Information is provided by professionals from various industries involved in websites, including web designers, planners, and consultants.

Cons
This website was launched in 2013, and while the content is still being updated, the design　looks dated.

There are few interactive elements.

The design does not feel very consistent between smartphone screen and PC.

The website has too many political ideas other than web accessibility, such as endorsing BLM.



Technically this is not a competitor, but it is the original WCAG website guideline. Ideally, everyone should be able to read this website and understand it perfectly, but it is a rather convoluted document that would be difficult for a novice designer or a planner who has not studied web accessibility to understand.

Fig.17: Competitor 3

Competitive Comparison Chart

Fig.18: Competitor Comparison Chart

To ensure the uniqueness of my project, I created a comparison chart with the aforementioned competitors.

10. Wireframing

Wireframe Attempt 1
In the first wireframe, all content was designed to be readable. As such, it would later be heavily modified. At this point, a total of 12 pages were designed for reading information including success criteria.

Fig.19: Attempt 1 Overall

Fig.20: Attempt 1 Success Criteria

Fig.21: Attempt 1 Reading Page

Fig.22: Attempt 1 Top

Color Scheme Setting

Fig.23: Color Universal Design Color Scheme Recommendation Table

At this stage, the art direction is gradually determined. Based on the color scheme reference chart, I set up a color scheme that is friendly to the colorblind. The final colors as follows.

Fig.24: Decided Color Scheme

Fig.25: How It's See from Different Color Visions

These are set in colors that are easily recognized by people who are colorblind, colorblind, or monochromatic. Not only that, by clear contrasts and tonal differences, people with temporary color blindness due to fatigue or illness, and those with age-related vision loss can also see easily.


Wireframe Attempt 2
Even at this stage, feedback indicated that there was still too much content to read. In addition, a detailed page was added for each obstacle, but the content was not sufficient. This will be improved in subsequent revisions.

Fig.26: Attempt 2 Overall

Fig.27: Attempt 2 Top

Fig.28: Attempt 2 Visual Impairment Page

Logo & Font Design

Fig.29: Logo

Fig.30: Logo 2

Fig.31: Font

Prototype 1 (Design in W7 Proposal)
A prototype was presented once at the Week 7 proposal presentation. Colors and fonts were adapted to the wireframe, but several design errors were noted in feedback. Details are in weekly feedback section below.

Fig.32: Attempt 3 Overall

Fig.33: Attempt 3 Hearing Impairment Page

Fig.34: Attempt 3 Reading Page

Fig.35: Attempt 3 Topic Template 1

Wireframe Attempt 3 (Final Low Fidelity)
Once the wireframes were redesigned, the resulting deliverables were as follows;

Fig.36: Final Wireframe Overall

The informational reading content was minimized and compressed to three pages. The site was also redesigned to make it easier for visitors to learn about accessibility visually and clearly, including the presentation of design samples and a more personalized diagnostic tool.

Fig.37: Final Wireframe Top

Fig.38: Final Wireframe Informative Page

Fig.39: Final Wireframe Details of Disability

Fig.40: Final Wireframe Diagnostic Tool

Fig.41: Final Wireframe Tool Result

11. High Fidelity Prototype Design

Fig.42: High Fidelity Prototype

What makes this site different from other WCAG commentary sites is that it combines not only the WCAG Guidelines, but also other design rules such as Human-Centered Design and Gestalt Principles, and combines them into eight simple rules.

Fig.43: Key Visual 1

Fig.44: Key Visual 2

Fig.45: Key Visual 3

Fig.46: Key Visual 4

Fig.47: Key Visual 5

The screen designs are as follows;

Fig.48: Final High Fidelity Prototype Design Top

Fig.49: Final High Fidelity Prototype Design Importance of Web Accessibility

Fig.50: Final High Fidelity Prototype Design DEI Page

Fig.51: Final High Fidelity Prototype Design Guide 1

Fig.52: Final High Fidelity Prototype Design Guide 2

Fig.53: Final High Fidelity Prototype Design Guide 3

Fig.54: Final High Fidelity Prototype Design Guide 4

Fig.55: Final High Fidelity Prototype Design Guide 5

Fig.56: Final High Fidelity Prototype Design Guide 6

Fig.57: Final High Fidelity Prototype Design Guide 7

Fig.58: Final High Fidelity Prototype Design Guide 8

Fig.59: Final High Fidelity Prototype Design Blindness

Fig.60: Final High Fidelity Prototype Design Color Blindness

Fig.61: Final High Fidelity Prototype Design Low Vision

Fig.62: Final High Fidelity Prototype Design Temporary Visual Impairments

Fig.63: Final High Fidelity Prototype Design Diagnostic Tool 1

Fig.63: Final High Fidelity Prototype Design Diagnostic Tool 2

Fig.63: Final High Fidelity Prototype Design Diagnostic Tool 3

Fig.63: Final High Fidelity Prototype Design Diagnostic Tool 4

Fig.63: Final High Fidelity Prototype Design Diagnostic Tool 5

Fig.64: Final High Fidelity Prototype Design Other Design Samples

For all other screen designs, please refer to the following drive;


Prototype on Figma:

WEEKLY FEEDBACK


FINAL OUTCOME


The Google Drive includs; 
1. Art Direction
2. Website Design
3. Research
4. Key Visuals
5. Presentation Deck
6. Documents
Final Design (Figma)

Proposal Presentation W7
 

Final Presentation W16
 

MIRO Ideation & Research Board

REFLECTIONS

Experiences
For this project, I worked on the content of my major to show the culmination of what I had learned in the course. Website design was the area I was most interested in. At first I thought I would create a design for a page about a product, but after some twists and turns, I ended up creating guidelines for the website itself. It was good to learn about the importance of web accessibility through my own research.

Observation
First, I have some reflections on my design. In website design, my ideas tend to stick to the old website-like architecture. For example, the design shown in the final presentation feedback, which incorporates a floating or side menu, is a good way to create a guideline-type website. I adopted the top menu, but install a side menu would have made the website more usable, as it would have made it easier to navigate around the website.

It was also very difficult to find specific examples. Designs should be evaluated in terms of overall harmony, and we had a hard time coming up with a method to explain why this was web accessible by citing just a few examples. I am not confident that I have represented it well in this final outcome, but if I have the opportunity to design a similar project next time, I would like to strengthen my competitive analysis so that I can produce a better one this time.

Findings

While creating a website to educate people about the importance of web accessibility, I learned a great deal about its importance myself. On the other hand, I was also able to understand the difficulty of designing a website that is easy for all to use. As an example, in the process of setting up a color scheme, there were many instances in which a color scheme was easily recognized by one color vision, but was seen as confusing by another color vision. In addition to color, we learned that there are slight individual differences in what layouts are easy to recognize for people with cognitive disabilities. Therefore, the WCAG guidelines will continue to be improved, and it is therefore important to interpret them in an easy-to-understand manner so that new generations will be able to understand them.

Labels:

Comments

Post a Comment

Popular Posts