Redesign Focused on Accessibility
Finalist in the Bitesize UX Contest for a Redesign Project
Bitesize UX Redesign Contest
I participated in a contest created by Bitesize UX, a hands-on course and community for UX Designers. Surprisingly, I found that my focus gravitated toward those with disabilities and how accessibility can play a role in drop-off rates as well as can impose limitations.
Details
1 Week Solo UX Design Sprint
Tools: Figma, Stark Plugin, Axe Plugin, Jaws Screen Reader
My Focus: Accessibility and Usability
The Brief
Challenge Overview
Bitesize UX Contest Challenge:
Kickstarter is seeing a huge drop-off on completion rate at their "Create Your Own Project" screen. People want to create a project, and then abandon it once they are asked these questions.
You’re a designer at Kickstarter, a crowdfunding platform where people can launch and get funding for creative projects, technology, and inventions.
Problem Exploration
Getting Down to the Problem
Getting down the to nitty-gritty of the problem is my favorite thing to do. I circled important words and brainstormed possibilities: who it affected, how it affects them, and why it mattered. Of greatest importance with my research is that if 15% or more have disabilities, accessibility could play a part for many users.
The Persona Becomes Personal
Heartstrings for Impaired Users
After honing in on accessibility as part of the problem, I created a tech-savvy, vision-impaired persona. This pulled my project in a surprising direction and pulled on my heartstrings for those vision-imparied!
Throughout the design, I felt like I had to make sure every aspect of the design would help Diana meet her goals and needs.
Since I am currently taking a certification in accessibility, I wanted an inclusive design.
A Better Journey
A Journey to Better Things
As I walked with Diana through her journey, I learned that breaking up steps between screens helps those with or without cognitive delays.
Time constraints needed to be mitigated to allow for filling out forms for those with impairments. Future steps needed to be transparent.
Reassuring content, A.I. helps for paragraphs, project previews, third-party help for those unsure or unable, tips and trick, steps for forms all could keep our “Diana” on a path to a happy completion!
Mid-Fidelity Insights
Screen Reader Considerations
As I was laying out the design, I was concerned about too many columns as that makes it hard for those with screen readers or visual impairments to expand text to large sizes.
I had the future steps on the top, but so many navigation items could be confusing so I removed that. When I used a screen reader to check it, too much at the top is not fun to navigate on a screen.
See my Mid-fidelity wireframes
Confidence from A.I. Suggestions
Using A.I. To Build Wording
Users could see suggested content for their product description and subtitles from A.I. capabilities. A.I. can save time as well as help them find wording to make their descriptions catchy and drive backers to donate to their project.
Help Along the Way
Tips and Tricks
Users have tips and tricks to be most effective in each step of the journey.
But What if I Can't?
Help for Impaired or Unsure
What if they cannot see their photos like the persona Diana? Maybe they need to hire a professional. Adding this option for those visually impaired gave them the means to use the platform and get funding for needed projects.
Seeing is Believing
Project Card Preview
At every step, users can see what their project card will look like in a real-time view. When they see ahead to the future and how it looks published, this give them confidence to move forward.
Stepper and Time Mitigator
Stepping the User Through Accessible Content
It was important to have a way for users to see where they were at in the process to relieve fear and encourage them to continue. The accessibility time mitigator allowed for those using the site to choose how long they needed to complete the form so that it would not time out on them and log out.
I learned how to make a stepper that was accessible. It needed wording to show “complete” rather than an icon. It was important not to use only image and color as an indicator.
Styling and Component Accessibility
Form and Function for Clarity
I stayed with the current Kickstarter logo, typography and button style so that I could focus on accessibility and features.
Buttons with focus states help those using assistive tech. I found that the Material Design System met all of the requirements so I used and modified it with AA compliant contrasting colors.
I learned wording and placeholder text are so important for users with screen readers. They have confidence when they focus on and push the button or text input field that is clearly worded.
Hi Fidelity Prototype to Test
A Different Kind of Usability Test
Due to time constraints, I ran a quick usability test by a non-disabled user and gained valuable insights.
I also wanted to try a screen reader test as well as some usability plug-ins for Figma. After installing a screen reader, I was able to test the functionality of the screen from the Figma prototyping accessibility for screen readers.
I was pleased to learn that designers have tools available to them to help “Diana” reach her dreams!
My Accessibility Usability Test
I used JAWS for Windows 2024 Screen Reader to test my prototype. I learned so much about Figma, accessibility and how screen readers work. After many attempts at the Figma accessibility prototyping, I have a video of how to do a accessibility Figma prototype!
My Screen Reader Figma Prototype Testing VideoTest Insights
Post-Test Changes
- The form instructions were very annoying to the user, so the instructions were made collapsable in an accessible button for a screen reader or just for clarification.
- The Card Preview in horizontal mode made some users pass it. When I put it in vertical mode, it alleviated this issue as well as improved accessibility.
- I also realized from my accessibility test that I needed to have alt text for my images. I learned how to annotate my Figma file using Stark Plugin.
See Annotated Figma File here
Final Prototype
Final Prototype - Final Thoughts
- In this case study, I got down in the trenches with my user persona and it helped me learn new technology and accessibility considerations that will help me in the future be inclusive to all users.
- I learned that Figma and Figma plugins are starting to make products to help designers to be more inclusive. It opened my eyes that there is still a great need in this area for designer tools.
- Next steps in all my designs is to be mindful of my personas who may have limitations and move toward tech that serves all-- I found I love Inclusive Design!
More Case Studies from Angelyn . . .
.jpg)
