Customer Self-Service

Yellow Freight

My Role:

Product Design
UX Research

Team:

1 Product Designer (me)
1 Manager of Digital
1 Product Manager
3-4 Engineers

Tools:

Sketch, Invision, Photoshop, Illustrator, Mural, Pendo, MapBox, Adobe Experience Manager

Duration:

2022 - 2023

Project Overview

One of the struggles Yellow Freight faced in providing great customer service was the lack of readily available information for both customers and customer service representatives. As part of the Digital Transformation of Yellow’s website, my team was tasked with developing a modern customer service experience that significantly enhanced customer self-service and real-time awareness. This effort consisted of multiple projects that were planned as a Q4 2023 feature launch on Yellow's New Website.

Research & Learn

During our "Customer Council Review" sessions Yellow clients were interviewed in (remote) open forums to gain insight into their pain points and primary needs to establish user personas. The insights gathered from the interviews were used to identify challenges they faced and to generate potential solutions to address them.

Research on our LTL Competitors was also carried out to establish best in class customer service portals and to explore emerging trends on how the industry is providing self-service options to their customers.

Challenges

  • LTL companies still rely on outdated legacy systems that are often not user-friendly and lack modern features.
  • Outdated processes result in frustrated customers and decreased service quality.
  • Manual processes and paper-based documentation can create communication gaps and hinder real-time visibility.
  • Poor user experiences lead to difficulty in customers trying to self-serve, resulting in heavy call volumes and longer resolution times.

Solutions

  • Enhanced Self-Service tools through user-friendly design and intuitive online portals and websites.
  • Integrate Live Chat and Chatbots that can guide customers through self-service processes.
  • Service Maps to enhance visibility of carrier service areas and potential delays caused by adverse weather.
  • Provide a Help Center with comprehensive documentation and in-app guides for customers to troubleshoot common issues.

Ideation / Help Center

The complexities of the LTL Industry and its terminology can cause confusion for customers who are not familiar, leading to struggles in navigating and understanding of company processes. A Help Center is a central hub that plays a pivotal role in solving this by serving as a guiding force to help users better acclimate to the website. This is achieved through a collective User Interface utilizing… In-App Guides, FAQs, User Onboarding, User Feedback, Feature Notifications, Chat Bot, and Accessibility.

Design / Help Center

The initial implementation of the Help Center design used "Pendo" (Digital Adoption Platform), as the overarching framework. Within "Pendo" both the Help Center and additional content would be crafted and published within the application’s dedicated design environment.

The objective for the Chat Bot's user experience aimed to emulate the familiarity users have with text-based interactions on their mobile phones. Prototyping involved aligning Customer Service flow taxonomies with a UI that was consistent with the overall Help Center user interface and the Yellow Design System.

An added bonus was my advocacy of "Accessibe" an AI-powered web accessibility tool that offers a business-friendly and affordable solution for achieving comprehensive ADA and WCAG 2.1 compliance within an impressive 48-hour timeframe. This can be rapidly implemented on the site by engineering ensuring compliance and accessible navigation across your site for people with disabilities.

Ideation / Contact Us

The Contact Us page on the former website faced challenges in user intuition, leading to frustration for customers seeking information or assistance. Drawing inspiration from client feedback and competitor research the focus centered around clarifying contact options and guiding users seamlessly to their destination based on their specific needs. A notable addition was the incorporation of an interactive Service Map to provide users with real-time updates on Terminal Statuses and related contact information (implementation will be covered in the Service Maps section).

Design / Contact Us

Leveraging the Yellow Design System symbol libraries in Sketch and pre-established designs created for the Yellow website proved instrumental in expediting the creation of the Contact Us prototype. This not only facilitated a rapid prototyping process but also allowed for swift iterations based on feedback from product team, stakeholders, and development. The streamlined workflow enabled a more agile and collaborative approach, ensuring that adjustments and improvements could be implemented promptly, ultimately contributing to a more polished experience.

Ideation / Service Maps

In the legacy system, Service Maps were generated through an outdated service that produced static PDF map downloads based on user search criteria. Terminal data, crucial for user interaction was manually updated on the website and presented in a table format. The static nature of the maps and the labor-intensive updating process not only hindered the platform's responsiveness to user needs, but resulted in a disjointed user experience for our customers. The overhaul of this system becomes imperative to provide a real-time experience for customers seeking terminal information within the LTL service framework.

Design / Service Maps

Based on information gained through Ideation I experimented with existing design patterns offered by Material UI in Low Fidelity prototypes to ensure a cohesive and visually intuitive interface, backed by rigorous user testing to validate its effectiveness.
‍
The integration of the MapBox API plays a pivotal role, providing the capability to implement customizable maps tailored to the Yellow brand and specific needs of users. Two map iterations were created to support Light and Dark modes based on user preferences.
‍
Development of the Service Maps MVP Prototype focused on merging the Low Fidelity Prototype work with the customized maps from Mapbox. Crafted as part of a Sketch symbol library, the Map Design System ensures consistency and scalability, laying the groundwork for the evolution of Service Maps with added features and improvements for later iterations.