Scroll up
Picture of project

WCAG kurs

This project researched how one can learn the WCAG requirements in a more interesting and fun way than today. In this project I researched and tested how people like to learn new things while at the same time learning more about the WCAG requirements myself. A focus in this project was user-testing.

Year 2023

Duration 4 weeks

Role Sole UX/UI designer

Tools used Figma, Figjam, pen and paper

The problem

Digdir has a wish to create a service that makes it exciting and clear to learn about universal design. It must be a solution that motivates those who build digital solutions to learn about principles, guidelines and success criteria within the topic. The solution delivered must be a prototype of a mobile first website.

Who is DIGDIR?

DIGDIR is a offical goverment department in Norway that aim to ensure public services to be connected and easy to use, regardless of who offers them. The Directorate of Digitization aims to be the government's foremost tool for faster and more coordinated digitization of society.

What is WCAG?

The Web Content Accessibility Guidelines (WCAG) are recommendations for how digital content can be made more accessible, for example for people with poor vision or limited mobility. The WCAG guidelines include both computers, tablets and mobile phones. WCAG is a technical standard with a lot of content, and is somewhat aimed more at technologists than designers.

Getting to know the users through interviews

Screenshots of interviewnotes

How do people learn the best?

"I usually work with tutorials or example code until I understand everything underlying. If I want to go all out and know that I am doing the best I can, I read the documentation for the systems I use. Maybe I'll also buy a slightly more proper course within it or start a hobby project."

"I think I learn best by listening (audio more than video), and reading. Also, being able to explain to others, improves my understanding. Testing your knowledge and reflecting on it helps as well. Learning with others can prove useful."

What is challenging with WCAG?

"Finding an overview, WCAG is boring, dull, Complicated, and lacks a good overview. There is a lack of examples of good solutions. It is hard to consider when I'm going to create a nice design."

Key Insights

  • User generally knows little about WCAG requirements

  • One needs to be motivated to finish courses

  • Dull contents

  • Not enough time to learn it

  • A lot of information, makes it hard to learn.

Persona(s)

Picture of persona, Malin

Johan

24 / Student /  Oslo, Norway

Studying interaction design at Kristiania University of Applied Sciences. Hobbies include photography and music. He is motivated by helping others and friends and family are important to him. He always starts the day with a coffee. He envisions using the app in the morning when he takes the bus to school to refresh himself before a lecture

Goals

  • Wish to learn about universal design regarding work and studies.

  • To learn in a fun and exciting way.

Motivations

  • Wish to develop inclusive design.

  • To be sufficiently qualified for the job he wants.

  • Have somewhat given up on breeding, because finding stallions has become too time-consuming

Fustrations

  • Find WCAG a bit cumbersome and confusing.

  • It seems like there's a lot to read and keep track of.

Pain points

Post its of painpoints

Ideas

Postits of ideas

Getting more creative with Crazy 8s

Sketches of Crazy 8s

Working towards the solution

My suggestion is to create a course on WCAG that is motivational and utilizes various learning tools such as drawings, illustrations, examples, and links to additional learning resources. In the course, learners would test their knowledge by completing quizzes that award points and show progress. A key aspect of the solution is breaking down the WCAG guidelines into bite-sized or shorter courses, making it more manageable each day for everyone to find time to complete tasks. Additionally, it should have the option to revisit and review completed courses. It could also customize my experience by setting my own daily goals.

User journeys

screenshot of userjourney, Johan

Testing the flow and mainfunctions with lo-fi

When I user-tested the lo-fi prototypes, my main focus was on checking if the app was logical. I didn't pay as much attention to the text content but rather on ensuring that navigation and indicators made sense and that the test participants understood how to navigate through the product. I have a PC with a touchscreen, so I allowed them to navigate while I recorded the screen. The tests took place in a classroom with three interaction design students. I used the results and feedback from this test to create a new lo-fi version.

Screenshot of lo-fi prototype.Screenshot of comments during usertesting of lofi

I tested the second version with an additional test participant. I would have liked to test it on more people here, but due to time constraints, I had to move forward with the feedback I had received and transitioned to a hi-fi version. This test took place in a café in Seoul, where it was quite noisy, and the test participant was not very familiar with WCAG or apps in general. The user used a touchscreen on a PC, and I recorded the screen and audio.

screenshot of lofi v2screenshot of lofi v2

User testing hi-fi

Before testing the Hi-fi version, I received guidance and tested the app with a product owner. Additionally, I had read more about user testing and learned from the lo-fi testing, which was more spontaneous and perhaps a bit messy. Therefore, I chose to write a clear script with questions and tasks for all test participants so that the interviews would be conducted under similar conditions. I tested this with three people; ideally, I would have tested with five, but due to time constraints and difficulties in finding participants, it was limited to three. The first test was conducted remotely using the PC-sharing method, while the other two were done in a classroom where the user mirrored the prototype on a mobile device and tested it on mobile. Recordings of the tests were made.

Screenshot of script for testingScreenshot of hifi v.1screenshot of comments during testing of hi-fi

Test intuitiveness

screenshot of intuitive testing

Test motivation

screenshot of motivational testing

Functions

Mockup of app
Mockup of app

Set goals for yourself

A course with daily goals that you set for yourself. You get an overview of your progression

Mockup of app

Personal profile that keeps track of your progress

You have your own user profile that monitors your progress and directs you to the next logical course.

Mockup of app

Overview of all courses

You have access to all courses from the start, with an overview of completed courses that you can revisit whenever you want to refresh your knowledge.

Mockup of app

Courses with multiple tools/resources.

The courses utilize multiple tools to enhance your learning experience, including audio functionality, videos, illustrations, as well as detailed explanations.

Mockup of app

Test yourself on your knowledge

After each module, you will be tested on your knowledge. Earn points and see if you can complete all the courses!

Mockup of app

Tips and guidance

If you make a mistake, you will receive guidance along the way, so perhaps you'll remember it for next time.

Prototype

Future developement

  • Explore additional ways to motivate users to learn and complete courses. Consider making course pages more interactive and pay closer attention to the hierarchy and content of the courses/modules.

  • It could be exciting to explore the possibility of receiving a type of reward when accumulating points. Perhaps a diploma or certificate for platforms like LinkedIn upon completing all tests in the app?

By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.