Tatum Robotics
Website and Logo Design
About
Tatum Robotics is a group of passionate hardware engineers, mechanical designers, software engineers, and linguists committed to supporting DeafBlind individuals with the first anthropomorphic independent communication tool for their primary language, tactile sign. The Tatum team consults DeafBlind individuals, including local friends who contribute to community organizations and international contacts who advise us about DeafBlind diversity, language variability, and all components of the Tatum system. The Tatum team is committed to ensuring that discoveries are ethical and promote the advancement of all.
Scope
Throughout the semester, my team would meet weekly with Tatum Robotics owner, Samantha Johnson, to present design deliverables working towards a new Logo and Interface for the company. The designs should represent Tatum Robotics’ mission and product and be designed for use across desktop, tablet, and mobile devices. The website should include a light and dark mode that can be toggled to increase contrast for hard-of-sight users. The site should be designed for potential collaborators, clients, users, and especially members of the deafblind community.
Challenge
Create a logo and website that represents Tatum Robotics’ mission and product while maintaining maximum accessibility to members of the deafblind community. The site should be intuitive to able-bodied individuals and screen readers and offer features to customize the accessibility needs of potential users.
Ininital Brand Exercise and Moodboarding
Within our first couple of client meetings, we worked to establish a clear brand identity and feel for the design. We wrote out an elevator pitch and documented personality levers to be able to pinpoint the direction of the design clearly. We also presented Tatum with competitor research to evaluate what they thought worked well and what they wanted to shy against.
From this, we deciphered that there needs to be a balance between the high-tech and social impact sides of Tatum Robotics. The website should be clean, straightforward, and understated in terms of layout and function, but warm, emotive, and eye-catching in terms of brand personality and visual elements. The text tone should primarily be informative and friendly but lean more towards declarative and smart when it comes to sharing important information about technical specifications and the problem Tatum Robotics is trying to solve.
Since Tatum Robotics is developing a novel product that can have a significant impact on the lives of DeafBlind individuals, the design should lean towards being unconventional rather than traditional and celebratory rather than straight and corporate.
Tatum Robotics’ brand personality should be approachable and conversational, allowing them to connect with their audience and bring a human touch to the world of high tech.
Next, my team created four mood boards based on our meeting notes that ranged from boundary pushing to expected. These boards each show a different combination of approaches that Samatha expressed a likeness twards. She cherry-picked aspects from each board which we then used to curate a final mood board to base our design strategy off of
We then devised a design strategy we would use while designing the rest of our Tatum materials. This consisted of font, font sizing, primary and secondary colors, UI elements and icons, illustration/graphic styles and all variations for light and dark modes.
Logo Design
The original logo that Tatum had was based on the braille letters T and R. For the revised logo, Samantha wanted to stay very close to the original idea just with a new feel. It was essential to her to not only maintain the idea, but a similar compositions so it would still be recognizable to past clients and collaborators continue with this idea for the revised logo
With this, my team and I hit the drawing board, and each sketched out three to four ideas using this direction. We were careful to ideate in both light and dark mode. We then compared and contrasted our various sketches and presented Samantha with four final ideas, varying in style. At this point, colors were not finalized, so we used blue and white. Samantha later expressed that she wanted to keep the original green color of the Tatum logo. This color was already in our design strategy, and so we decided to make it a primary color.
Our final logo, and shown to the left consisted of a dark and light version and a dark mode version. both using the same green color from the original and keeping a consistent feel from the previous logo while also refreshing it with the rest of the site.
Interface Design
Tatum already had a website when we started working with them. However, this website needed several structural additions as well as design ones. After discussing the new website's needs, we mapped out a site map. This included new pages such as a product page, a blog page, how to get involved with Tatum, and a team page.
Because there were a lot of new pages, this required a lot of collaboration with the Tatum team regarding what these new pages should consist of. To maximize efficiency, everyone on the team took responsibility for designing one page.
The page I took responsibility for was the new “Product page” Tatum had never had a product page before. Seeing as their anthropomorphic hand was not yet available for commercial sale, this page needed to inform users of its features and production state and sell itself as a nuanced piece of accessibility tech.
Each page went through many rounds of low-fi wireframes. Here I would map out content to the appropriate size across desktop, tablet, and mobile. This allowed me to have a low-fidelity workspace to collaborate back and forth with the client to delineate this page’s needs.
Once the low-fi’s were finalized, I then moved on to high-fidelity versions of the page. This included the dark and light modes of the page in three different screen sizes. This also included finalized content of the page, such as text, images, and interactive features.
In the finalized version of the page, there are multiple interactive features that I was able to test during our user testing. This was when we had various potential users, such as members of the DeafBlind community, use our prototype to see if the features throughout the site were both accessible and intuitive.