Find A Dealer PWA
Toyota's first progressive web app implementation
Summary
Toyota.com/dealers is a powerful, intuitive, and user-friendly progressive web app that transforms complex business rules and logic into efficiency and simplicity.
My Role
I acted as a UX Lead, working closely with developers to iterate and craft every detail of the interactions. The site was launched in July 2019 and we've seen significant increases in user engagement since then.
What I did
Led integrated qualitative and quantitative research efforts, such as data analysis, usability testing, current-state auditing, competitive and market research
Utilized rapid prototyping to iterate and validate ideas
Delivered use cases, user flows, wireframes, hi-fidelity interactive prototypes, specs, and annotations for onsite & remote dev teams
Acted as Design Advocate and deliver POC demo with dev teams at Google Hackathon, representing team Toyota
The Outcome
Toyota.com/Dealers — Fast and reliable search experience for all Toyota dealers in the U.S.
01
Introduction
The Problem: “How can we effectively deliver a user-centric, mobile-friendly, and fast loading Find a Dealer experience that's accessible for everyone, everywhere?”
😫 Current State
The previous Find A Dealer experience was not user-centric, accessible, or mobile-friendly, and needed a better page performance.
🏢 Project Background
The project was kicked off under the client ask of "quick-win" to just reskin the look & feel. The time allocated for research and design was limited.
💬 I stared with…
I initiated conversations that everything is connected and UI is beyond the skin of a product with team members’ support and collaboration. See my approach below:
My Approach
Laser focus on user pain points and identify areas of opportunities that can provide the most user-centric values
Co-create and iterate with dev teams. I was sponsored to participate in Google Hackathon, representing Team Toyota and performing a POC demo.
Rapid prototype designs for efficient validation and iterations with teams
02
Auditing & Mapping
I led the current experience audit & market landscape audit to capture all the use cases, business logic, and user pain points.
Along with the audits, I also incorporated insights from data analysis, A/B testing, journey mapping, NN/g usability heuristics, best practices for web performance and so on, I then developed a mapping that illustrates high-level UX direction and key focus areas in a timely manner.
I developed these areas of focus as they can create the most impact for the user and business: accessibility & usability, page speed performance, and mobile-first experience.
03
Rapid Prototyping
I prototyped and validated ideas through various tools such as Principle, InVision, Codepen.io, usertesting.com and so on.
Co-creating ideas with dev teams early on was very effective and helpful. As part of the research and iteration effort of this project, I was selected to participate in a Google Hackathon last year. We worked together to develop a list of PWA features we wanted to focus on.
04
Google Hackathon
It’s tempting to jump into the solution with a cool, trending technology. But I took a few additional steps back before the solution mode, and that indeed advocated human-centered values at the Hackathon.
I was proactive in uncovering the real problems for users, stakeholders, and the business, attentive and empathic to these problems, and find areas of opportunities — where user and business needs meet.
Then we as a team were intentional and rational when picking up the right technology.
05
Design Iterations
I crafted the above desktop animated prototypes with Principle, and facilitated user testings.
One feedback I received was “The header was big and black and it covered the dealer info I wanted to see.” Then I realized that the majority of users do not use 15'' Retina MacBook Pro. Data indicates, one of the most common desktop screen resolutions in the U.S. is still 1366x768. It reminds me again that we have to design for users out there, try my best to design for everyone, everywhere, and do not design in isolation.
06
The Outcome
The redesigned Find a Dealer PWA now helps users easily locate Toyota dealers, browse their services and offers, at fingertips, anytime, anywhere. We saw substantial increases in user engagement across the experience.
Throughout the end-to-end process. I worked closely with the dev team and a visual designer, from auditing, market landscape research, concept development & validation, sketching & wireframing, rapid prototyping, animation & interaction, UX implementation for accessibility (ADA compliance), QA, and more, to the final production. My key learning from this experience is “Creativity is connecting things.” To me, design is always about bridging people, business, and technology together.
I'm very grateful that I was able to closely collaborate with dev teams on this project. We built a case and shipped a quality product in a timely manner.