VIDEO GAME DESIGN
Developed the UI/UX for an original platformer game with a focus on accessibility for Global Game Jam 2022.
Redesigned Tatum Robotics’ website for users with visual impairments to market Tatum’s communication tool for the DeafBlind community.
Project Lead - Ally McCabe
Tech Lead - Lucy Bell
Design Lead - Naomi Desai
Developer - Rei Masuya
06 / Design System
Component-Based Design System
02 / EMPATHIZE - USER & CLIENT RESEARCH
Exploring User Research & Business Goals
We looked through some pre-recorded interviews conducted with DeafBlind people by Tatum to better understand their everyday practices and struggles, along with their sentiments interacting with the Tatum product. Key interview linked here.
“I could understand things more clearly if I use tactile communication with a robot, even if there were no people there visiting me.”
“I am very good at this...I can imagine myself using this (Tatum Robot), especially at my house.” - Winnie
“If I’m stuck at home alone, I can watch TV...but the closed captioning is too fast for me...so I get lost.” - Jaimi
Note: All quotes are interpreted from American Sign Language.
03 / DEFINE - NEEDS & OPPORTUNITIES
User's Major Demands
DeafBlind users have unique visual needs, and a conventional website’s content is inaccessible.
Tatum’s current branding and website come off as cold, technical, and lifeless. With efforts high on social impact, Tatum’s brand image should feel more warm and human (spanning from UX writing, visual brand, and accessibility).
All current content is piled on one page, resulting in a high cognitive load that can leave users overwhelmed and lost. The website needs more structure and support to help users find the information they need efficiently.
From our research, I defined our personas to represent our primary target audience, inspired by a DF person, Casandra, and secondary target, investors and businesspersons.
Studying Current Practices: CVI-Friendly Videos
These videos are designed for children with cortical visual impairment, using reduced visual complexity to present familiar stories and songs. I noticed many of them use a colored border to highlight text and increase legibility, something I kept in mind when designing the UI later in the process.
After analyzing user research, I found that DeafBlind people...
Are eager to contribute and get involved in Tatum’s product development.
Find the website’s structure and content too overwhelming in cognitive load.
Need extra support and visual cues than a non-DeafBlind person to understand website content and functions
Through various brand exercises with the founder and the rest of the team, we identified Tatum’s brand values and needs that would become the foundation, combined with the user needs, to redesign their marketing website.
After analyzing brand research with Tatum, we found that Investors and Businesspersons...
Likely have little exposure to the DeafBlind community, should be educated on the DeafBlind community before Tatum Robotics is marketed to them.
Perceive the Tatum brand as very technical, rather than human/social impact, a more accurate brand image
Are on a time-crunch, as Tatum is competing for their attention with other start-ups.
How Might Wes: Questions that Lead our Design Process
Outreach: How might we reach users and funders outside of TR’s inner circle?
TR’s Impact: How might we utilize the website as a tool to attract funding?
Accessibility: How might we create a website that is accessible to all audiences, specifically those with cerebral impairments?
Education on DeafBlindness: How might we get people to care about this product and cause? How might we educate people about deaf blindness?
User-Centered Insights: How can we allow and support the deafblind community to offer product update suggestions?
04 / IDEATION
The team and I used our research to develop the information architecture, such as prioritizing education on the DeafBlind (“Community Resources”) over the marketing of the product (“Our Product”). In addition, having a “Get Involved” page with sections for distinct user groups.
Below are Homepage and Community Resources wireframes for desktop and mobile, pages I lead design on.
After grounding our insights from our research, I audited Tatum’s current website and homepage with our two personas in mind.
After the tests, my team and I compiled our notes to highlight significant user feedback that was being repeated and causing users' experiences to struggle. I decided on specific solutions for the user problem identified below.
05 / USER TESTING
User Usability Testing
We conducted moderated lab usability testing with four testing participants on the spectrum of being DeafBlind to interact with our website prototype and collect qualitative data on its accessibility. All participants were Tatum connections invited by the Tatum founder, Samantha.
I ran through testing with a woman named Lisa. Lisa is colorblind in one eye (what I called her superpower during our session), and she helped me take note of what exactly her eye could and could not see accurately.
All users gave feedback as they navigated our Figma prototype of the website from their free exploration and our focused tasks (“Where would you go to learn more about product development?”). We asked follow-up questions and took notes of their feedback, including any distinct body language and facial expressions they made (such as squinting their eyes or craning their neck closer to the screen). Post-session, they gave general opinions of the website branding.
01 / PROBLEM BACKGROUND
How might we educate people about the DeafBlind community and promote the Tatum brand, mission, and product while upholding web accessibility standards and focusing on those with visual impairments?
The DeafBlind community (DF) is a historically underserved community with a combined vision and hearing impairment. Tatum Robotics aims to offer them their first independent communication tool through an anthropomorphic robotic system that signs tactile sign languages-- the primary communication method of 150 million DF individuals worldwide.