top of page


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:  

  1. 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

  2. Create webpages for Toyota’s Used Vehicle Marketplace that offers customer support for different services

  3. Developed an image matrix to assist in content creation for Toyota’s personalised e-brochure during the customer buying decision-making process



February - April 2023 (3 months)  


Creative Director - Anita Forte (AU)
Senior Visual Designer - Fraser Daniell
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
•  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
exercise of the webpages
•  Sourced appropriate images to be used as
    sensory visual assets for a personalised
    Toyota e-brochure

Group 4603.png


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 

Group 4612.png


Refining Toyota's design system by using the atomic design method to allow consistency and scalabil​ity 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.


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

Frame 1 (1).png

Over 340+
designed UI components

sprints filled with designer + developer collaboration

cohesive design system




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

toyota (1).gif

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

Screenshot 2023-04-26 at 6.22.03 PM.png
Screenshot 2023-04-26 at 6.21.54 PM.png
bottom of page