Toyota
Web design and crafting design systems
Tasked to assist in building webpages and refining the design system for Toyota Australia website to enhance user experience, streamline workflow and enusre overall visual consistency across Toyota's large digital ecosystem
R/GA Australia has worked with Toyota closely to revamp its websites to align with the company's values across its webpages. With the current extensive services and offerings, we were tasked to:
-
Refined Toyota’s existing design system and created a comprehensive library that serves as source of truth for all designers involved. Optimising the workflow between design and development teams by providing thorough documentation for handoff. Ensuring overall consistency by designing and validating necessary UI components
-
Create webpages for Toyota’s Used Vehicle Marketplace that offers customer support for different services
-
Developed an image matrix to assist in content creation for Toyota’s personalised e-brochure during the customer buying decision-making process
OVERVIEW
DURATION
February - April 2023 (3 months)
ROLES
Creative Director - Anita Forte (AU)
Senior Visual Designer - Fraser Daniell (AU)
Product Designer - Fenella Alfri (SG)
As the Product Designer I worked closely with the team on:
Design Systems
• Assisting in building design system for Toyota
Australia main website to enable collaboration
and maintain consistency across all teams.
• Designing and provided documentation for UI
elements
• Worked in agile methodology and led regular
meetings with development team to
review progress of development build, give
feedback and validate designed screens
UIUX Design
• Worked closely with designer and
Business Analyst to create webpages for
various Toyota offerings and services for
Toyota Certified Pre-Owned (TCPO) and
non-TCPO vehicles
• Spearheaded the wireframe and visual
design exercise of the webpages
• Sourced appropriate images to be used as
sensory visual assets for a personalised
Toyota e-brochure
BUSINESS PROBLEM
Multiple design inconsistencies, outdated UI components, and higher business costs due to longer project delivery time in Toyota's unmaintained design system
Toyota Australia website is expanding rapidly and with multiple new projects coming in and multiple designers and developers, the design system needed more attention.
The impacts of not having a cohesive and well-maintained design system results in multiple inconsistencies across webpages results in various negative impacts to the team including:
1. Missing states or annotations - longer project delivery time and friction collaborating with
development team
2. Changes aren’t updated in a single point - duplicated efforts from design team
3. Design inconsistencies - greater effort in design and development
4. Overall reduced efficiency and productivity within design and engineering team
PROJECT GOAL
Refining Toyota's design system by using the atomic design method to allow consistency and scalability across Toyota's digital ecosystem
As Toyota Australia's offering grows, they will continue to introduce new products or features - the current method of working would be inefficient in the long-run.
The goal is redefine a design system that enables scalability that can be extended and adapted to accommodate future project briefs and user needs. New components and patterns can be added to the system, ensuring a cohesive user experience, cutting business costs and reducing the time and effort required for design and development.
DEFINING KEYPOINTS
What are some of the guiding principles?
⚒️ Maintenance
-
Constantly updating UI components
-
Updates can be published across multiple files
💬 Efficiency
-
Providing pre-designed components for new project briefs
-
Removes need to design from scratch
-
Teams can work faster without needing to duplicate efforts
🎨 Visual Consistency
-
Ensures users get a cohesive user experience across all of Toyota’s different touch points
-
Builds user trust and familiarity
📐 Scalability
-
Flexible and robust design system
Simple to navigate
-
Scalability for future requirements and features
.png)
Over 340+
designed UI components
6
sprints filled with designer + developer collaboration
1
cohesive design system
WHAT DO WE NEED?
HOW DID WE ACHIEVE THIS?
Sourcing appropriate images and developed an image matrix for sensory visual assets for a personalised Toyota e-brochure
Prototyping various user interactions and component behaviours across different webpages
Defining electrified UI design components for Toyota's hybrid electric vehicle
Refining Toyota system and featured icons to maintain overall consistency that communicates brand's value and purpose
Designing focus states for accessibility considerations for users navigating using keyboard functions
Create webpages for Toyota’s Used Vehicle Marketplace that offers customer support for different services
I'd be happy to share more about my process of building webpages and design systems.
Let's get in touch
