Toyota
2026
Toyota North EDSA:
Rebuilding a dealership experience for a mobile-first market
Toyota North EDSA:
Rebuilding a dealership experience for a mobile-first market
I was tasked with leading this project for Toyota North EDSA, a dealership that wasn't converting traffic into leads. I ran it as co-PM and led the design with a mobile-first approach. This overview covers 17 desktop page redesigns and the design system.
To be documented: coded design system / components library
I was tasked with leading this project for Toyota North EDSA, a dealership that wasn't converting traffic into leads. I ran it as co-PM and led the design with a mobile-first approach. This overview covers 17 desktop page redesigns and the design system.
To be documented: coded design system / components library
Role
Role
Co- Product Manager, Sole Designer
Co- Product Manager, Sole Designer
Tools
Tools
Figma, Anima, Claude, Next.js
Figma, Anima, Claude, Next.js
Timeline
Timeline
Jan 2026 - May 2026
Jan 2026 - May 2026
Team
Team
Dana Street Consulting, team of 7
Dana Street Consulting, team of 7
Overview
Problem
Toyota North EDSA's site took 9+ seconds to load and buried vehicle inventory below promo banners, despite 87.6% of traffic coming from mobile and 92.6% of Filipino mobile users relying on Messenger to reach businesses. The service inquiry flow broke on certain devices, media assets across the site were outdated, and there was no live inventory CMS in place.
Toyota North EDSA's site took 9+ seconds to load and buried vehicle inventory below promo banners, despite 87.6% of traffic coming from mobile and 92.6% of Filipino mobile users relying on Messenger to reach businesses. The service inquiry flow broke on certain devices, media assets across the site were outdated, and there was no live inventory CMS in place.
Outcome
I redesigned 17 pages and built a reusable design/ component system across vehicle browsing, financing, and service booking, with every layout decision made mobile-first and backed by a research brief I led across three workstreams. I also proposed a live inventory CMS to company stakeholders. It was approved, but development was cut before it shipped.
I redesigned 17 pages and built a reusable design/ component system across vehicle browsing, financing, and service booking, with every layout decision made mobile-first and backed by a research brief I led across three workstreams. I also proposed a live inventory CMS to company stakeholders. It was approved, but development was cut before it shipped.
Overview
Background
As co-PM, I split the team into three workstreams, design, development, and general research, and ran the FigJam sessions that assigned and structured the work: a tech audit, a competitive audit, and research into Philippine car-buying culture and digital behavior. I tasked one teammate with consolidating everything into a single research brief, and personally led the design research within it, running UX audits and building the two personas the redesign was designed around. My co-PM led external stakeholder communication with the client, while I built every page and component in the redesign as sole designer.
As co-PM, I split the team into three workstreams, design, development, and general research, and ran the FigJam sessions that assigned and structured the work: a tech audit, a competitive audit, and research into Philippine car-buying culture and digital behavior. I tasked one teammate with consolidating everything into a single research brief, and personally led the design research within it, running UX audits and building the two personas the redesign was designed around. My co-PM led external stakeholder communication with the client, while I built every page and component in the redesign as sole designer.
The existing site ran on WordPress with Elementor and WooCommerce in catalog mode, a stack that wasn't built to carry 17+ pages of vehicle inventory and grew slower with every plugin added as a workaround. Toyota North EDSA had no in-house dev team to maintain it, so problems compounded instead of getting fixed.
The existing site ran on WordPress with Elementor and WooCommerce in catalog mode, a stack that wasn't built to carry 17+ pages of vehicle inventory and grew slower with every plugin added as a workaround. Toyota North EDSA had no in-house dev team to maintain it, so problems compounded instead of getting fixed.
Previous Design
Pictured: Homepage, Vehicle Details
Pictured: Homepage, Vehicle Details
Final Product
Redesigned Homescreen
Vehicle inventory and shopping tools surface above the fold, ahead of testimonials and promo banners, since 97% of Philippine buyers research online before ever visiting a dealership. Messenger link placed near the bottom of the page considering the messenger heavy culture in Manila.
Vehicle inventory and shopping tools surface above the fold, ahead of testimonials and promo banners, since 97% of Philippine buyers research online before ever visiting a dealership. Messenger link placed near the bottom of the page considering the messenger heavy culture in Manila.
Browsing Cars
Filters were built from the research brief and a competitive audit of Philippine dealership sites, then paired with a cleaner, more modern UI drawing from Western dealership sites at the chairman's request for a sleeker look.
Filters apply instantly with no search button, and the vehicle card was built as a single reusable component so it holds up whether a buyer is browsing 12 vehicles or 179.
Filters were built from the research brief and a competitive audit of Philippine dealership sites, then paired with a cleaner, more modern UI drawing from Western dealership sites at the chairman's request for a sleeker look.
Filters apply instantly with no search button, and the vehicle card was built as a single reusable component so it holds up whether a buyer is browsing 12 vehicles or 179.
Vehicle Details
Specs, features, and availability were reorganized around what the research brief flagged as actually decision-relevant, cutting a page that used to read as a wall of specs into something scannable. A new variant-and-color availability check lets buyers confirm a specific configuration exists before ever contacting the dealership.
Specs, features, and availability were reorganized around what the research brief flagged as actually decision-relevant, cutting a page that used to read as a wall of specs into something scannable. A new variant-and-color availability check lets buyers confirm a specific configuration exists before ever contacting the dealership.
Schedule Service
A 5-step guided flow with live validation replaces the dealership's manual email-only booking process, since the service department that actually drives the most revenue.
(view full screen in the Figma file)
A 5-step guided flow with live validation replaces the dealership's manual email-only booking process, for the service department that actually drives the most revenue.
Why Us
(view full screen in the Figma file)
Before: The "About Us" section was split into 8 different pages
After: "About Us" section consolidated into 3 pages:
"Why Us"
"Awards and Reviews"
"Location"
Real staff photos and by-the-numbers stat callouts build trust through specifics instead of generic claims, a pattern almost no competing Philippine dealer site uses.
Before: The "About Us" section was split into 8 different pages
After: "About Us" section consolidated into 3 pages:
"Why Us"
"Awards and Reviews"
"Location"
Real staff photos and by-the-numbers stat callouts build trust through specifics instead of generic claims, a pattern almost no competing Philippine dealer site uses.
Before: The "About Us" section was split into 8 different pages
After: "About Us" section consolidated into 3 pages:
"Why Us"
"Awards and Reviews"
"Location"
Real staff photos and by-the-numbers stat callouts build trust through specifics instead of generic claims, a pattern almost no competing Philippine dealer site uses.
Final Product
Design System
There was no existing design system, so I made one.
Every screen pulls from a shared set of spacing, type, and color tokens, with core components like cards and buttons built once and reused across all 17 pages. Even though I was the sole designer for this project, I created this design system with future scaling and handoff in mind.
There was no existing design system, so I made one.
Every screen pulls from a shared set of spacing, type, and color tokens, with core components like cards and buttons built once and reused across all 17 pages. Even though I was the sole designer for this project, I created this design system with future scaling and handoff in mind.
Pictured: Color guide and spacing guide
Not Pictured: Radius guide, general layout rules, typography guide
Pictured: Color guide and spacing guide
Not Pictured: Radius guide, general layout rules, typography guide
Components Library:
Pictured: Hero library, button library, logos, and card library
Not Pictured: Header and footer component, filters, extra cards
Pictured: Hero library, button library, logos, and card library
Not Pictured: Header and footer component, filters, extra cards
Pictured: Hero library, button library, logos, and card library
Not Pictured: Header and footer component, filters, extra cards
Overview
Final Thoughts
Leading both the research and design side of a real client project was incredibly exciting and overwhelming. I was constantly switching between structuring FigJam sessions and reviewing audits as co-PM, then sitting down to design every screen myself, and eventually even teaching myself how to create a coded design system. That back-and-forth taught me to trust research over instinct, even when a decision felt obvious to me, the data was what actually held up when stakeholders pushed back.
However, not everything I planned made it to launch. The CMS proposal I pitched got full stakeholder buy-in but never made it into development before the engagement ended, and the mobile mockups never got built either, even though every desktop layout was designed with them in mind. Even though the project got cut before it was fully developed and shipped, I'm still proud of the progress my team and I made.
Leading both the research and design side of a real client project was incredibly exciting and overwhelming. I was constantly switching between structuring FigJam sessions and reviewing audits as co-PM, then sitting down to design every screen myself, and eventually even teaching myself how to create a coded design system. That back-and-forth taught me to trust research over instinct, even when a decision felt obvious to me, the data was what actually held up when stakeholders pushed back.
However, not everything I planned made it to launch. The CMS proposal I pitched got full stakeholder buy-in but never made it into development before the engagement ended, and the mobile mockups never got built either, even though every desktop layout was designed with them in mind. Even though the project got cut before it was fully developed and shipped, I'm still proud of the progress my team and I made.