TOBIAS DESIGN
Creating a new Visual Identity and Website
TOBIAS DESIGN provides strategic design services to partner with organisations, together they uncover opportunities, tackle complex problems, simplify systems and deliver transformation and products people love.
Some background
During my employment at TOBIAS DESIGN, I led a team of designers to create a new visual identity for TOBIAS and align their brand within the digital space. This involved developing a comprehensive design system, defining the brand’s design principles, creating a new visual language, and bringing it all together in a new website.
Accessibility was a key focus of the website’s development—ensuring it met inclusive design standards and was usable by people of all abilities. The design system unifies Tobias’ brand presence and streamlines future design efforts across all platforms.
Beyond the visual aspects of the project, my work also included supporting the research team in gathering insights through internal and external interviews to understand what the website needed to achieve. I facilitated workshops, helped structure content and define design principles, and ultimately built the website in WordPress to bring it all to life.
Areas of involvement
Key highlights and visual examples
TOBIAS website – individual page headers for each team member
Listen to the research
One thing we heard consistently during the research process—from both internal staff and external users—was a desire for detailed information about the people who work at TOBIAS. To honour that request, we created a concept where each team member has their own dedicated page on the website.
The hero section of each profile page is customised: staff can choose their favourite background colour, which is paired with their photo, their initials integrated into the background, their official job title, and what they would personally call themselves.
Each team member also shared their passion as a designer and their superpowers, which are showcased alongside a short story about what brought them to where they are today.
Monograms
Derived from the TOBIAS logo, we developed a series of monograms—a modular system of visual artefacts designed to work across a wide range of brand expressions. From full-colour background graphics that enhance and define content structure, to smaller animated and/or subtle outlined versions that highlight and draw attention to key messages, the monograms are used throughout the website, social media presence, and both internal and external communications.
Colours
We developed a colour system driven by accessibility from the outset, ensuring that hues, shades, and contrast combinations met or exceeded WCAG standards. This meant prioritising legibility and clarity across all digital touchpoints, particularly for users with low vision or colour vision deficiencies. The result is a palette that not only aligns with the TOBIAS brand but also empowers inclusive experiences, balancing aesthetic expression with functional readability.
Typography
For typography, we selected “Söhne“: a typeface by Klim Type Foundry, based in Te Whanganui-a-Tara/Wellington, Aotearoa/New Zealand. In Söhne, we found an excellent balance between legibility and creative impact. Its clean, modern forms offer clarity and accessibility across digital and print applications, while its nuanced character adds just the right amount of personality to reflect TOBIAS’s voice – professional, confident, and approachable.
Other Considerations
storytelling
A non-linear, non-ordered and non-personal experience with NO narrator (schematic)
In designing the Tobias website, we embraced the nature of digital storytelling—non-linear, narrator-free, and user-led. Each piece of content was crafted to stand on its own while contributing to a broader narrative. Links, tags, and subtle prompts were used to encourage exploration without enforcing a fixed path. Key messages were echoed across touchpoints, and calls to action were designed to feel contextual and invitational rather than prescriptive.
Some visual examples
Tobias website – accordions
Tobias website – Service section example
Tobias website – mobile light mode example
Tobias website – mobile dark mode example
TOBIAS website – 8pt grid considerations as design principles
TOBIAS website – CTA section
Results
Together – Researchers, strategists, Brand Specialists, Visual designers and developers – we created brand alignment across strategy, visuals and laid the foundation for a splendid user experience.
In the end, we delivered more than just a visual identity, we gave TOBIAS DESIGN a way to look and feel as trustworthy and forward-thinking as their mission statement promises.
