Tatum Robotics

I led the design of an accessible brand identity and marketing website for our client, Tatum Robotics. This innovative company supports DeafBlind individuals by providing them with an anthropomorphic robotic arm that signs tactile ASL, enabling their first independent communication tool. Our objective was to craft a brand identity and a responsive marketing website designed for tablet, mobile, and desktop that harmonizes the high-tech and social impact facets of their company. Given that some website visitors have low vision or other visual impairments, accessibility was a central focus, driving extensive research and user testing.

Scope

Brand Identity
Web Design + UI/UX
Design Accessibility

Year

2022

Team

Project Lead: Ally McCabe
Design Lead: Naomi Desai
Designers: Maha Almatari, Melanie Barest,
Amanda Lee, Florenz Blancaflor

The Problem

Tatum's previous website was not accessible nor inclusive of their target audience, and their overall brand was not representative of their mission.

The Challenge

Craft a brand identity and a responsive marketing website designed for tablet, mobile, and desktop that blends both the high-tech and social impact sides of their brand and is inclusive of all audiences.

Research and User Personas

We began this project with the intent of educating ourselves on the DeafBlind community. We engaged in direct conversations with and observed interviews with DeafBlind individuals to gain deeper insights into their daily routines, challenges, and experiences with the Tatum product. We also did some secondary competitor and market research. Based on our research and the client’s guidance, we defined the typical users of their marketing site into two distinct personas.

Defining Tatum Robotics

After completing a few brand exercises with our client, we defined Tatum Robotics as approachable, conversational, and informative. We used these key words to guide our visual identity.

Visual Identity

After mood boarding and exploring various visual directions, we narrowed down and began iterating from there. The final visual identity is clean, accessible, and to-the-point, yet has fun in the bright colors and curvy illustrative elements. We made sure to choose a typeface and colors that are accessible for those with low vision and other visual impairments. To accommodate user preferences for light and dark modes, we created two color palettes, ensuring accessible contrast in both and allowing users to easily toggle between them on the website.

Logo

The brand mark, inspired by the 'T' and 'R' in braille and featuring rounded forms, not only resonates with the company's mission but also mimics the design of their product, reinforcing brand coherence.

Sitemap and Lo-fi Wireframes

After developing the brand strategy, we began our website development with a sitemap to organize the information to be displayed on the site. From there, we built out desktop, tablet, and mobile Lo-fi wireframes for each page on the site.

User Testing

While designing our Hi-Fi wireframes, we placed a large focus on user testing and design accessibility. We met with a broad range of people, including some with low vision, colorblindness and full blindness, to understand more about design practices that are most helpful for the visually impaired and to get a better understanding of screen readers. We used their feedback to improve the accessibility of our UI and UX.

Low vision users found our initial buttons non-clickable due to the pill shape and matching background and fill colors. The updated design includes a slightly darker fill color and a more rounded rectangular shape.

Due to visibility issues for a participant with low vision/ colorblindness, we switched our hover color to Tatum teal. This not only improved visibility but also enhanced the prominence of our primary brand color.

The initial timeline UI lacked interactivity and clickability, prompting a revision. The updated version provides clearer user orientation, a simpler overall feel, and improved visibility by eliminating yellow on white.

A key decision with our client was to enhance user interaction guidance. Following user testing feedback, we emphasized directions by incorporating a colored background and explicitly stating "Directions" for better screen reader assistance.

Users requested a key toggle option. In response, we added a tooltip by the toggle, highlighting the use of the Enter key as an alternate trigger.

Hi-Fidelity Wireframes

After making all final revisions, we were done with designing the Light Mode and Dark Mode Hi-Fi wireframes for desktop, tablet, and mobile. The Tatum Robotics brand came to life and we were ready to hand off to the developers.

Conclusion and Impact

The new brand identity and marketing website greatly enhanced Tatum Robotics' ability to communicate its mission, emphasizing accessibility for individuals with visual impairments. The engaging and professional visual identity strengthened the brand's position as a leader in assistive technology for the DeafBlind community, supporting its growth and highlighting its commitment to making a meaningful impact.