top of page
VIDEO GAME DESIGN
2022
Cursed Mountain
Developed the UI/UX for an original platformer game with a focus on accessibility for Global Game Jam 2022.
DESC
Redesigned marketing website for users with visual impairments to market Tatum’s assistive communication tool for the DeafBlind community.
DESC
UX/UI Designer
ROLE
TEAM
Project Lead - Ally McCabe
Tech Lead - Lucy Bell
Design Lead - Naomi Desai
Developer - Rei Masuya
WEBSITE REDESIGN
2022
Tatum Robotics
06 / Design System
Component-Based Design System
02 / Empathize - User & Client Research
User Research & Business Goals
Target Audience - Problem Statements
Skip to see full personas
Interviews
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
Accessible
DeafBlind users have unique visual needs, and a conventional website’s content is inaccessible.
Humanistic
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).
Support
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.
Audience
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.
These videos are designed for children with visual impairments, 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.
Studying Current Practices: Cortical Visual Impairment (CVI) Friendly Videos
Takeaways
After analyzing user research, I found that DeafBlind people...
Are eager to contribute and get involved in Tatum’s product development.
1.
Find the website’s structure and content too overwhelming in cognitive load.
2.
Need extra support and visual cues than a non-DeafBlind person to understand website content and functions
3.
Brand Research
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.
Takeaways
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.
1.
Perceive the Tatum brand as very cold and technical, rather than human/social impact, a more accurate brand image
2.
Are on a time-crunch, as Tatum is competing for their attention with other start-ups.
3.
-
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
Design Exploration
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.
Sitemap
Mid-Fi Wireframes
Accessibility
After grounding our research insights, I audited Tatum’s current website with our two personas in mind.
Accessibility Practices Used:
1. Follow Web Content Accessibility Guidelines (WCAG), Level AAA
2. Do not rely on color alone to differentiate and display information
3. Use a color-blind-safe color palette
After the tests, my team and I compiled our notes to highlight significant feedback causing users to struggle with the prototype. I decided on specific solutions for the user problems identified below.
Takeaways
05 / User Testing
User Usability Testing
Sessions
We conducted moderated lab usability testing with four middle-aged testing participants on the spectrum of being DeafBlind to interact with our website prototype and collect qualitative data on its accessibility.
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.
Types of feedback we received:
-
live commentary and feedback as they navigated our Figma prototype using free exploration and our focused tasks (“Where would you go to find product development updates?”).
-
distinct body language and facial expressions they made (such as squinting their eyes or craning their neck closer to the screen).
Affinity Mapping with Questions to Lead Us:
Solution
A redesigned website and branding with a human-centric approach, more succinct messaging for more efficient marketing, clearer navigation, and extra support through visual cues and direction for people with visual impairments.
Process
We used an agile process to track weekly sprints with the developers along with reviews from the design director and client to ensure our work aligned with the goals and expectations of the audience.
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?
About
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.
06 / Final Designs
Tatum Robotics Pages
Homepage & Community Resources - Light Mode
Note: The Homepage and Community Resources are pages I lead design on.
Homepage & Community Resources - Dark Mode
Component-Based Design System - Light Mode
07 / Conclusion
Reflection
I learned to abide by the user’s best interest. When certain design ideas appeared superfluous and unconventional at first glance, it caused us to hesitate to apply them. With a unique audience, however, unique design choices must be made. The convention may be useful for most users, such as only changing the background color of buttons on hover, but is insufficient and hurtful for an extraordinary audience like the DeafBlind community. Especially after the results of the user testing, I learned to set aside my notions and allow the user to guide me towards the most user-centric design possible.
Lessons
Our user testing was conducted with users who had already experienced Tatum as a brand outside of the website, and who knew the founder. This could have caused some bias in testing. My next step would be to conduct a second usability test with users who have never heard of Tatum. That way, we can receive more helpful and raw first impressions of the brand solely based on the website and visual branding.
Another next step would be allowing the user to increase the font size of the website to their preference, which would increase the accessibility. Due to time constraints, that was an idea that couldn’t be pursued by the developers.
Next Steps
Explore Other Projects
bottom of page