MyFS Help Center

Refresh and redesign the 7-year-old MyFS Help Center to improve usability, align with modern design principles, and introduce new features to enhance the customer experience for both Web and App.

Why are we doing this?

The MyFS Help Center required an overhaul to meet evolving customer needs and align with Toyota's branding and user expectations. Challenges included inconsistent navigation, unclear information hierarchy, and lack of visual appeal. We aim to redefine the Help Center with an intuitive design, improved navigation, and enriched features for seamless user interactions, and finally reduce customer call volumes.

RESEARCH & ANALYSIS

Get to Know the Pain Points from Current Product and Existing CX Report

The current TFS Support Center, while functional, presents several usability and design challenges that hinder an optimal user experience. These challenges include outdated navigation, limited self-service capabilities, and a lack of cohesive branding, which collectively impact the efficiency and satisfaction of users seeking support.

Here is the current version:

Confusing Navigation

Inconsistent and crowded navigation makes it difficult for users to find and complete tasks efficiently.

Limited Self-Service Options

No integrated FAQs or smart search, forcing users to rely on manual support for common issues.

Outdated Visual Design

The interface lacks clear visual hierarchy and alignment with Toyota’s branding.

Inefficient Request Process

Users face limited guidance, static forms, and restrictive file upload options.

To better understand user needs and identify opportunities for improvement, I had a couple of conversation with the Customer Experience Team who conducted a comprehensive research study. Their findings highlight key areas for enhancement, including the need for more intuitive self-service options, streamlined navigation, and an improved escalation process. These insights provide a clear roadmap for transforming the support center into a more user-friendly and efficient platform. Here is the ideal state vision that we all agree on.

• Goals & Objectives •

To better address the current pain points and align with user needs, we defined clear goals and objectives for the MyFS Help Center redesign. The following diagram outlines the key problems and actionable solutions that guided our design process.

• Information Architecture •

With the goals and objectives defined, I established a clear and intuitive information architecture. By reorganizing content and streamlining navigation, we aimed to create a structure that supports user needs, simplifies task completion, and enhances overall usability. The following outlines the revamped information architecture for the MyFS Help Center.

Creative Design

Always Being Creative and User-Friendly

Building on the foundation of a well-defined information architecture, the design phase focused on creating a user-centric interface that aligns with Toyota’s branding while addressing key usability challenges.

With the problems identified earlier as a guiding framework, this section highlights how each challenge was addressed through thoughtful design solutions.

• Enhance First Impressions with a Streamlined Help Center •

The Help Center landing page is designed to provide a user-centric entry point for all customer service needs. Featuring intuitive navigation, clear categories, and a powerful search bar, this landing page ensures users can quickly find the information or assistance they need.

Align Visual Design with TFS Branding (P1)

Use Toyota branding elements, such as the global header and footer, the bold red accents and clean typography, aligns well with corporate identity.
The clean and modern layout adds credibility and trust.

2. Simplify Navigation (P2)

The prominent use of visually distinct categories simplifies navigation by grouping topics.
The inclusion of a search bar allows users to quickly locate specific information.

3. Enhance Self-Service (P3)

Clear categorization of help topics supports self-service.
The search bar can act as a gateway to FAQs and common inquiries, reducing reliance on manual support.

4. Streamline Submission (P4)

The "Submit an Inquiry" button is highly visible, encouraging users engage directly.
The "My Inquiries" table provides a comprehensive overview of past inquiries.

Consistent with TFS header

Smart search across help center, FAQs, common inquiries

Hover-on effect: Card flips to show help topics

Can expanded with more topics

Highly visible to users to submit inquiries

Click to view the detailed inquiries

Consistent with TFS footer

• Empower Users Through Comprehensive FAQs •

The FAQ section is structured to address user queries proactively, offering answers to frequently asked questions through categorized topics and detailed guides. With quick links and actionable information, the section is designed to enhance self-service capabilities.

1. Modern Visual Design (P1)

Clean and minimalistic design ensures a professional and cohesive appearance aligned with TFS branding.

2. Streamlines Navigation (P2)

Categories are clearly labeled, reducing cognitive load and improving task efficiency.
Related articles and "Still Need Help?" sections ensure users don’t hit dead ends.

3. Improves Self-Service (P3)

Primary Topics Level: Displays a categorized overview of FAQ topics with links for easy navigation.
Detailed FAQ Page: Answers specific questions with step-by-step instructions, video guides, and related information.

4. Enhances Transparency (P4)

FAQs include contextual guidance on processes (e.g., due date changes), helping users understand options and requirements upfront.
Provide quick self-service entry to the service

• Optimize the Flow to Request Support •

The Submit Inquiry page is designed to make the process of reaching out for assistance as straightforward and efficient as possible. By focusing on simplicity and clarity, this page empowers users to provide necessary details without confusion or frustration.

Help Center_Submit Inquiry_Category Filled-min.png

1. Streamlined Submission (P4)

Clear Input Fields: Users are guided to select a category, provide a description, and upload supporting files, making the process intuitive.
Real-Time Validations: Error-proof inputs ensure accurate submissions (e.g., character limits and required fields are indicated).

2. Encourages Task Completion (P1)

Minimal steps and a progress-oriented layout encourage users to complete the form without dropping off half way.
The pre-filled account and vehicle details reduce user effort while ensuring inquiries are linked to the correct account.

• Seamless Access to Assisted Support •

The Contact Us page is designed to ensure that users can quickly and efficiently connect with TFS when self-service options aren’t enough. Featuring options like live chat with AI support and direct call capabilities, this page provides multiple pathways for users to get the help they need.

1. Modern Visual Design (P1)

Clean, modern layout with TFS branding ensures users feel confident and supported when seeking assistance.
The chat UI integrates with the overall design seamlessly, maintaining a cohesive user experience.

2. More Support Options (P5)

Live Chat: The AI chatbot, Toyo, provides instant responses and guided experience to users when needed anytime.
Call Support: Offer a way to directly speak with an agent for more complex issues.

• Interactive Prototypes •

Try to interact with the web prototype

Try to interact with the App Prototype

REFLECTION

Working on the MyFS Help Center redesign was a transformative experience that allowed me to refine my skills in creating user-centric solutions for a large-scale customer support platform. It was an opportunity to address diverse user needs while balancing technical constraints, business goals, and brand alignment to deliver an impactful and cohesive product.

One of the biggest challenges in this project was addressing Salesforce Lightning Design System limitations while envisioning a modernized experience. The support center had been in use for over seven years, and redesigning it required navigating through outdated workflows, inconsistent navigation structures, and a lack of user-focused features. Additionally, ensuring alignment between technical feasibility and ambitious design goals added complexity to the process.

To tackle these challenges, I adopted a systematic and iterative design approach. By breaking down broad goals into actionable steps, we were able to prioritize improvements, such as improving navigation, enhancing self-service options, and integrating seamless escalation pathways. Regular collaboration with cross-functional teams ensured that the design evolved with both user insights and technical realities in mind.

Throughout this process, I honed key design and leadership skills, including:

User-Centric Ideation: Identifying and addressing user pain points to create intuitive and efficient workflows.
Information Architecture: Restructuring content and navigation for clarity and accessibility across web and mobile platforms.
Design System Integration: Developing scalable and consistent design elements aligned with TFS branding.
Prototyping: Building interactive prototypes to validate and showcase design concepts and refine solutions based on the feedback from larger groups.

This project underscored the importance of collaboration, adaptability, and user empathy. It not only strengthened my expertise in designing for large-scale platforms but also highlighted the value of iterative problem-solving to align user needs with business objectives. Ultimately, this experience reinforced my belief that great design is about creating seamless and meaningful interactions that empower users and drive impact.

Reflection