PINNED
AlteaCare: Small changes, big impact
AlteaCare brings patients and doctors together on a single platform. You can…
Work
OTHER
Medivet: Finding the right style
In this design process, I have made sure to incorporate a friendly and professional asp…
Work
Stop TB: Elevate UX and develop with WIX
I have worked to enhance the user experience and improve site maps to ensu…
Work
Workable: Developing approaches to inclusive design
Workable is a platform dedicated to helping people with disabilities find work. With the…
Work
Klikfranchise: Creating a franchise directory system
I have been assigned the responsibility of developing a business and franchise direct…
Work
Workable: Developing approaches to inclusive design
Work / user experience, visual design
Share
Project Summary
Workable is a platform dedicated to helping people with disabilities find work. With the assistance of the Bandung disabled communities and foundations.
Most of the work I’ve done for Workable isn’t disclosed to the public yet. In this case study, I have excluded and obfuscated sensitive information. All information in this case study is my own and does not necessarily reflect the views of Workable.
Role: UX Designer, UI Designer
Sector: Job, Recruiter
Time: 2 Months
Project Category: Work
Design Approach
The platform is intended for people with disabilities. It means that inclusivity is the primary focus in designing the experience. I used user-centered design, which focuses on the user. It entails deeply understanding the users through research, visual design, and all with the goal of meeting user needs eloquently.
○ Research
Conduct preliminary user research to better understand the target audience's capabilities, limitations, goals, and expectations, as well as their tasks. During this phase, I concentrate on determining the type of users and developing personas. Then define the challenges they will face.
○ Design
Insights from user research are used to help generate ideas and early designs. I asses which designs are suitable for these users.
○ Evaluation
It is critical to collect user feedback and measure delivered UX throughout a project, not just at the end.
Vision Impairment #Persona 1
Anya is a recent high school graduate with a passion for graphic design. She is visually impaired, making it difficult for her to find work. In the following one, you will learn about Anya's experience on Workable due to her loss of peripheral vision (people with low vision).
How do I design for people with vision impairment?
Color
I use Web Content Accessibility Guidelines (WCAG) 2.1 as a guideline to make a better user experience for people with disabilities. WCAG defines how to make Web content more accessible to people with disabilities. Accessibility involves a wide range of disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities.
○ Level A is the minimum level. — some impact on design [25 criteria]
○ Level AA. — medium impact on design [ 25+13 criteria]
○ Level AAA includes all Level A, AA, and AAA requirements. — high / extreme impact on design [25+13+23 criteria]
I use the level AAA because it indicates the highest level of accessibility the minimum requirement.
Workable color that I made based on the requirement
This Workable color design system has been carefully created following the Web Content Accessibility Guidelines (WCAG) 2.1. These guidelines help improve the user experience, especially for people with disabilities. By using these guidelines, the system aims to ensure better accessibility and usability, making the experience more inclusive and user-friendly for everyone.
How should I choose a font that is accommodating for those with vision impairment?
Font Size, Line Space, Line Height
It considers all the line height, line spacing, and also the font size because the readability should be clear and not require a lot of thinking.
○ Font size is at least 8 px;
○ Line height (line spacing) to at least 1.5 times the font size;
○ Spacing following paragraphs to at least 2 times the font size;
○ Letter spacing (tracking) to at least 0.12 times the font size;
○ Word spacing to at least 0.16 times the font size.
Workable Font Family
When designing for this condition, there are several factors to consider. From the simplest thing, font family. It should not be:
• decorative,
• make it difficult to distinguish one letter from another. For example, has similar shapes in uppercase and lowercase. With that consideration, I use Helvetica.
No Hidden Element on Workable Image Upload
They are already having difficulty navigating the website. Accessibility issues arise when the user is unable to locate the action because the element is hidden. So, I make the website perform in predictable ways.
Physical Disability #Persona 2
Niko is a business graduate looking for jobs as a business analyst. He has physical disability. It is difficult for him to precisely control a device.
How do I design for people with physical disability?
One-Direction Movement
I make the experience quick and easy. It allows users to move down the form in one direction. It can mean the difference between users finishing or abandoning a form. This type of movement is also beneficial for low-vision users.
Workable Form
I have organized the form into a single column layout, allowing users to move smoothly through it in one direction. This can make a difference in whether users complete the form or not, and it's especially helpful for those with low vision as it simplifies their interaction.
Non-Physical Disability #Persona 3
Rudy is a passionate content writer. He has nonverbal autism. He is easily distracted and has epilepsy.
How do I design for people with non-physical disability?
Less motion design
For people who are blind, have low vision, have epilepsy, or are cognitively disabled. Motion design can be overwhelming to users, so we can use a more subtle motion, that is beneficial to provide feedback, make changes, or the next phase.As an example, in page transitions and when clicking a button.
For a more detailed case study of Workable
I only show a few designs and explanations in public because it is a work project. Please contact me if you would want additional information about the Workable case studies.
Workable: Developing approaches to inclusive design
Work / user experience, visual design
Share
Project Summary
Workable is a platform dedicated to helping people with disabilities find work. With the assistance of the Bandung disabled communities and foundations.
Most of the work I’ve done for Workable isn’t disclosed to the public yet. In this case study, I have excluded and obfuscated sensitive information. All information in this case study is my own and does not necessarily reflect the views of Workable.
Role: UX Designer, UI Designer
Sector: Job, Recruiter
Time: 2 Months
Project Category: Work
Design Approach
The platform is intended for people with disabilities. It means that inclusivity is the primary focus in designing the experience. I used user-centered design, which focuses on the user. It entails deeply understanding the users through research, visual design, and all with the goal of meeting user needs eloquently.
○ Research
Conduct preliminary user research to better understand the target audience's capabilities, limitations, goals, and expectations, as well as their tasks. During this phase, I concentrate on determining the type of users and developing personas. Then define the challenges they will face.
○ Design
Insights from user research are used to help generate ideas and early designs. I asses which designs are suitable for these users.
○ Evaluation
It is critical to collect user feedback and measure delivered UX throughout a project, not just at the end.
Vision Impairment #Persona 1
Anya is a recent high school graduate with a passion for graphic design. She is visually impaired, making it difficult for her to find work. In the following one, you will learn about Anya's experience on Workable due to her loss of peripheral vision (people with low vision).
How do I design for people with vision impairment?
Color
I use Web Content Accessibility Guidelines (WCAG) 2.1 as a guideline to make a better user experience for people with disabilities. WCAG defines how to make Web content more accessible to people with disabilities. Accessibility involves a wide range of disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities.
○ Level A is the minimum level. — some impact on design [25 criteria]
○ Level AA. — medium impact on design [ 25+13 criteria]
○ Level AAA includes all Level A, AA, and AAA requirements. — high / extreme impact on design [25+13+23 criteria]
I use the level AAA because it indicates the highest level of accessibility the minimum requirement.
Workable color that I made based on the requirement
This Workable color design system has been carefully created following the Web Content Accessibility Guidelines (WCAG) 2.1. These guidelines help improve the user experience, especially for people with disabilities. By using these guidelines, the system aims to ensure better accessibility and usability, making the experience more inclusive and user-friendly for everyone.
How should I choose a font that is accommodating for those with vision impairment?
Font Size, Line Space, Line Height
It considers all the line height, line spacing, and also the font size because the readability should be clear and not require a lot of thinking.
○ Font size is at least 8 px;
○ Line height (line spacing) to at least 1.5 times the font size;
○ Spacing following paragraphs to at least 2 times the font size;
○ Letter spacing (tracking) to at least 0.12 times the font size;
○ Word spacing to at least 0.16 times the font size.
Workable Font Family
When designing for this condition, there are several factors to consider. From the simplest thing, font family. It should not be:
• decorative,
• make it difficult to distinguish one letter from another. For example, has similar shapes in uppercase and lowercase. With that consideration, I use Helvetica.
No Hidden Element on Workable Image Upload
They are already having difficulty navigating the website. Accessibility issues arise when the user is unable to locate the action because the element is hidden. So, I make the website perform in predictable ways.
Physical Disability #Persona 2
Niko is a business graduate looking for jobs as a business analyst. He has physical disability. It is difficult for him to precisely control a device.
How do I design for people with physical disability?
One-Direction Movement
I make the experience quick and easy. It allows users to move down the form in one direction. It can mean the difference between users finishing or abandoning a form. This type of movement is also beneficial for low-vision users.
Workable Form
I have organized the form into a single column layout, allowing users to move smoothly through it in one direction. This can make a difference in whether users complete the form or not, and it's especially helpful for those with low vision as it simplifies their interaction.
Non-Physical Disability #Persona 3
Rudy is a passionate content writer. He has nonverbal autism. He is easily distracted and has epilepsy.
How do I design for people with non-physical disability?
Less motion design
For people who are blind, have low vision, have epilepsy, or are cognitively disabled. Motion design can be overwhelming to users, so we can use a more subtle motion, that is beneficial to provide feedback, make changes, or the next phase.As an example, in page transitions and when clicking a button.
For a more detailed case study of Workable
I only show a few designs and explanations in public because it is a work project. Please contact me if you would want additional information about the Workable case studies.
Research and Design
Tags
#user experience
#visual design
#usability test
#interview
#interaction design
#web development
#analytics
HC
I’m online
Adinda Cahaya
Contact me
Noice: Exploring Ways to improve…