Shahriar Sadi
UX / UI Designer

Accessibility 101

Application for Information Retention

Accessibility 101

Problem Statement

The problem with teaching accessibility to web developers in one-hour long training sessions

  • users have difficulty retaining information
  • Current digital accessibility concepts are not reinforced 
  • There is no following up past the training session

Hypothesis: We can get users of the program to focus on the content by giving them a competitive spirit and catering to the user's field of work. By making the experience more entertaining and engaging users would be able to recall the information at later dates.

Research Plan 

Focused our research and interviews on students and teachers to get a better understanding of the following:

  • How do users in the seminars stay engaged post-seminar?
  • What methods do they use to study and put into action what they have been taught?
  • How do users respond to notifications?
  • How do users respond to learning from an app or website?

Accessibility 101

User Feedback

From the interviews, several key areas of improvement were spotted. Many users stay engaged while doing group activities and most are familiar with online courses. Most users also respond to notifications on their phone or email but admit that it can be annoying.

Accessibility 101 Persona

Accessibility 101 Persona

Persona

Example

Based on the interviews we set up this persona. We referred to it throughout the entire product development process.

  • This persona was designed to capture the target audience of the seminars 
  •  User interviews were used to create the persona
  • The persona affected the design by giving insight into what features the user of our website or application would want the most
  • The persona was reflected back on several points through the creation process

Accessibility 101



Site Map

This lists the potential pages on the website or application

Accessibility 101
Accessibility 101

Competitive Analysis

These companies were chosen to analyze. To get a better understanding of what is already out there in the market. These particular companies were chosen for their different methods of teaching web accessibility. 

Accessibility 101
Accessibility 101

Final Mobile Interface of App

This is the onboarding process for new users created on Adobe XD

  • The proposed solution is an application that users can download after the seminar to remember what they were taught
  • This screenshot is of the onboarding process

Accessibility 101

Final Main Interface Design

This is the main screen for users created on Adobe XD

  • These screens over a view of the leaderboard so colleagues can compete against one another
  • There is also a quiz section the more questions correct by a user the more points they garner

Accessibility 101

Final Other Sections Design

Example:

These are the other screens created using Adobe XD

  • These screens feature a section to manage your account
  • Also, a screen to learn in case you forget some of the content this screen serves as s refresher you can access anytime
  • The awards screen is there to again build that combative edge we want our users to have