Delightful visual designs for TTTech Auto, a global company providing next generation automotive solutions.
TTTech Auto
Overview
TTTech Auto: Engaging website with CMS capabilities.
A website showcasing TTTech Auto's futuristic vision and robustness through impressive visual elements, crafting a design system to reduce time and have a consistent visual language. Use of CMS platform that gives the wider TTTech group flexibility to tailor website content according to their needs.
Duration and Status
Jul 2022 - Aug 2022
Launched in Dec 2022
Platform
Responsive website
Tools used
Figma
My role
Visual design
Design system
Prototyping
Team
1x Design Lead
1x Technical Architect
1x Project Manager
Outcome
The new and modern website not only improved the look and feel, design aesthetics and user experience, but also increased sales inquiries and business opportunities.
Background
TTTech Auto provides innovative solutions to tackle future generation vehicle challenges. They design and implement safety-focussed and future-ready platform-centric solutions for leading brands like Audi, Porsche and Lamborghini within the automotive sector. Their cutting-edge technology can be found in millions of automobiles globally.
TTTech Auto has a rich history in automated driving and functional safety. They have a vision to drive safe autonomous mobility for everyone.
Challenge
TTTech Auto's next-generation vision and software solutions should speak through their website.
To develop a responsive website that aligns with TTTech Auto's futuristic approach, serving as a vibrant showcase of their groundbreaking software innovations.
Solution
The challenge was addressed by establishing a clear visual language and a comprehensive design system that is modern and elegant. The website was later developed on the Drupal platform utilizing content management system (CMS) for a complete design flexibility.
Approach
After a heuristic evaluation and reformation of website's information architecture by our team, I started my focus on revamping the aesthetics and vibe of their web platform. Created a design system on atomic principles that meets WCAG guidelines, creation of reusable components, ensuring consistency and efficiency throughout the website's interface.
Way forward
The transformation of TTTech's website included having a high-tech, futuristic aesthetic. Hence, the design process involved benchmarking, moodboarding and the strategic use of colour and typography to convey its richness and reliability. High-tech photography and lozenge-shaped design elements were used for a modern and elegant appearance, with ample white space for clarity. A comprehensive design system was implemented to enhance CMS efficiency.
Design system
The foundations of a design system comprising of spacing and grids, logo, color, typography and iconography that are the base defining an unified visual design.
Buttons and form elements
For TTTech Auto, I designed 3 types of buttons with 4 different states in 2 sizes for desktop and mobile. Each were designed using variants and states, hence it was easy to switch between types, with/without icons and more.
Form elements consisted of input text, dropdown, checkbox, radio button, toggle, pagination, accordions, data tables, breadcrumbs and more.
Navigation
A sophisticated navigation featuring up to four levels, with a primary focus on maintaining simplicity and clarity. The goal was to ensure an intuitive user experience while avoiding clutter. To achieve this, the navigation was thoughtfully structured to optimise usability on mobile devices and links were strategically incorporated into the footer menu.
Breadcrumbs were incorporated to provide a clear indication of the user's location on the TTTech Auto website, aiming to enhance navigation efficiency and accessibility across platforms.
Components
Hero banners
For the ease of CMS and uniformity across website, we had few unique designs of hero banner.
Prototype
TTTech Auto website was implemented on Drupal platform, with the new and improved look of the website.
Learnings
Having an unified design system needs planning. When designing for CMS platforms, its better to define blocks and patterns once a look and feel is finalised.
TTTech Auto gave me an opportunity to learn about Drupal CMS which can help speed up development, give flexibility and bring design consistency.
Client's testimonial
"Our website has been given a much fresher, more modern and brighter look. It is much easier to navigate, which improves the user experience, leading to interest in our solutions and business opportunities."
- Technical Content Manager, TTTech Auto
