TATUM ROBOTICS
Tatum Robotics is a company which supports DeafBlind individuals with an independent communication tool: an anthropomorphic robotic hand which allows users to communicate in tactile sign language. The Tatum team asked that we create a brand identity and marketing website for them which prioritizes low vision and vision impaired users. Thus, accessibility, research and user testing played a central role in this project
TEAM
Project Lead: Ally McCabe
Design Lead: Naomi Desai
Designers: Florenz Blancaflor, Maha Almatari, Melanie Barest, Amanda Lee
Developers: Florenz Blancaflor, Lucy Bell, Rei Masuya
USER PERSONAS
To embark on the process of working on this project, we began by learning more about the DeafBlind community. We held interviews and watched conversations with individuals to better understand their needs and frustration. To better assist identify our primary and secondary users, we created two user personas.
DEFINING TATUM
We created an elevator pitch with the client to define the company and worked together to place markers on a list of personality levers to get a sense of how the website and brand identity should feel. We agreed that our goal was to balance the high tech and social impact of Tatum Robotics. The website needed to be clean, straightforward, and understated while also being warm, emotive, and eye catching.
Brand Identity
After many iterations, we landed upon the visual identity below. The colors are clean and accessible while the illustrations are fun and inviting. We chose a typeface that better accommodates for dyslexic and low vision users. Our fonts and colors all pass AAA accessibility standards on the WCAG (Web Content Accessibility Guidelines) scale.
Site Map + Low Fidelity Wireframes
While the design team completed the visual identity, the developers created a site map to outline all of the pages needed. From this site map, we created low fidelity wireframes that we could use for our initial user testing.
User Testing + Revisions
When transitioning from low to high fidelity prototypes, we focused largely on accessibility and legibility. We met with a large range of users, many of which had low vision, colorblindness, and full blindness. Here are a few of the notable changes we made in response to their feedback.
Due to low contrast between yellow and white, we switched the hover color from yellow to teal for our primary button. The pill shape also seemed unclickable to some users so we added a slightly darker fill color and eased the rounded corners.
Some users found that the timeline was difficult to navigate. The switch from white text on a dark background to dark text on a light background was jarring for low vision users to adjust to. The yellow outline was also too faint to distinguish against the background. So, in our final iteration, We simplified the selected state for stages on the timeline, filling in the border of the circle with a dark color.
To accommodate for users with screen readers, our directions needed to be as descriptive as possible. We ensured that we used active verbs and descriptive nouns such as "timeline of milestones" instead of "desired section."
High Fidelity Wireframes
After many iterations, we completed the wireframes which included a Dark Mode, Light Mode, and responsive design for desktop, tablet, and mobile.
