Mazda Dealer Portal
Mazda is a Japanese automaker, formerly known as Mazda Motor Corporation, that was founded in 1920.
Industry
Automotive & Logistics
My role
Timeline:
UI Designer
6 Months (2024 - present)
Context
Problem Statement:
Mazda South Africa operates through a network of independent dealerships, each responsible for their own sales performance, customer satisfaction scores, and brand compliance. On the corporate side, a small team manages communications, resources, and performance reporting across the entire dealer network.
When MO Agency was brought in, there was no single place where any of this happened. Dealers were receiving bulletins via email, accessing marketing assets from shared drives, and submitting survey responses through disconnected third-party tools. Corporate staff had no unified view of dealer performance, and new employees at dealerships had no structured onboarding experience to speak of.
Mazda's dealer network lacked a centralised, secure portal for resources, communications, and performance feedback. Corporate staff were managing fragmented tools with no unified intranet, and dealers were navigating scattered, inconsistent information sources.
This created three concrete pain points:
- Dealers wasted time hunting for up-to-date marketing materials, bulletins, and brand guidelines across multiple platforms
- New dealership employees had no structured digital onboarding, knowledge transfer was inconsistent and heavily reliant on individuals
- Corporate HQ had limited visibility into dealer performance and customer satisfaction, making it difficult to identify where to direct support and resources
My Role:
User Research: Journey Map
As the UI Designer on this project, I was responsible for translating the strategic brief and brand strategy into a fully designed, production-ready interface on HubSpot CMS. I worked alongside a Brand Strategist who led the research phase and produced the initial Balsamiq wireframes, and a development team who built the HubSpot implementation.
Brainstorming and wireframing
The Wireframes were provided by the Brand strategist of the MO Agency team.
View more projects
Research & Discovery
While formal user interviews were not conducted at this stage, the project drew on two key research inputs.
Competitor analysis revealed that major automotive brands like Toyota and BMW use dealer portals to centralise assets, bulletins, and marketing materials, but these solutions typically rely on costly third-party platforms (Qualtrics, Medallia) for survey data and generic SharePoint or Workplace intranets for internal communications. None offered a fully integrated, localised experience. This created a clear opportunity: a HubSpot-native solution that unified all three functions - content, communication, and performance data all in one cost-efficient system.
Journey mapping traced the experience of two user groups from first login through to completing core tasks. For dealers, the critical path was: receiving a bulletin → accessing relevant resources → completing a customer satisfaction survey. For corporate staff, it was: logging in → reviewing dealer MSI scores → identifying underperforming areas → communicating actions. These maps surfaced a clear design priority: the system needed to work very differently depending on who was logged in.
The Mazda intranet and dealer portal were designed to be both functional and engaging, highlighting key content like promotions and launches. Early Balsamiq wireframes helped balance user-focused features with practical constraints, testing layouts and content hierarchy for optimal engagement.
Design Decisions
Information architecture: designing for two audiences.
The most fundamental decision was how to structure a single portal that served two users with almost opposite needs. Dealers needed simple, task-focused navigation, find a resource, complete a survey, read a bulletin. Corporate staff needed analytical depth, aggregate data, comparative views, trend analysis.
Rather than creating two separate portals, I designed a single access-controlled environment where the navigation, dashboard, and content surfaces adapted based on user role. This reduced development complexity while delivering a tailored experience to each group.Managing Iteration Under Pressure
This project involved more rounds of client feedback than initially scoped. Direction shifted across several key areas like navigation labels, category structures, survey visualisation styles, and colour palette alignment with Mazda's evolving global brand standards.
Rather than treating each change as a setback, I developed a systematic approach to iteration: documenting each round of feedback with clear rationale, maintaining a versioned design file that preserved earlier decisions for reference, and batching related changes together to reduce back-and-forth. This kept the project moving without losing sight of the original design intent.
Thanks for stopping by, Let’s connect
Outcome
The Mazda Dealer Portal launched as a fully integrated HubSpot CMS platform serving Mazda's South African dealer network.
Key outcomes reported by the client:
- Employee onboarding significantly improved: new dealership staff now have a structured digital onboarding experience for the first time, replacing ad-hoc knowledge transfer with a consistent, centrally managed resource hub
- Survey participation and feedback quality improved: the simplified, portal-integrated survey experience reduced friction in the feedback process, leading to more consistent dealer responses
- The MSI Dashboard is actively driving business decisions: corporate HQ now uses the dashboard to identify dealers requiring support, track improvement over time, and report on customer satisfaction at a network level, a capability that simply didn't exist before this project
View Prototype here
Mazda Dealer Portal
Mazda is a Japanese automaker, formerly known as Mazda Motor Corporation, that was founded in 1920.
Industry
Automotive & Logistics
My role
Timeline:
UI Designer
6 Months (2024 - present)
Context
Problem Statement:
My Role:
Research & Discovery
Design Decisions
Brainstorming and wireframing
User Research: Journey Map
Mazda South Africa operates through a network of independent dealerships, each responsible for their own sales performance, customer satisfaction scores, and brand compliance. On the corporate side, a small team manages communications, resources, and performance reporting across the entire dealer network.
When MO Agency was brought in, there was no single place where any of this happened. Dealers were receiving bulletins via email, accessing marketing assets from shared drives, and submitting survey responses through disconnected third-party tools. Corporate staff had no unified view of dealer performance, and new employees at dealerships had no structured onboarding experience to speak of.
Mazda's dealer network lacked a centralised, secure portal for resources, communications, and performance feedback. Corporate staff were managing fragmented tools with no unified intranet, and dealers were navigating scattered, inconsistent information sources.
This created three concrete pain points:
- Dealers wasted time hunting for up-to-date marketing materials, bulletins, and brand guidelines across multiple platforms
- New dealership employees had no structured digital onboarding, knowledge transfer was inconsistent and heavily reliant on individuals
- Corporate HQ had limited visibility into dealer performance and customer satisfaction, making it difficult to identify where to direct support and resources
As the UI Designer on this project, I was responsible for translating the strategic brief and brand strategy into a fully designed, production-ready interface on HubSpot CMS. I worked alongside a Brand Strategist who led the research phase and produced the initial Balsamiq wireframes, and a development team who built the HubSpot implementation.
While formal user interviews were not conducted at this stage, the project drew on two key research inputs.
Competitor analysis revealed that major automotive brands like Toyota and BMW use dealer portals to centralise assets, bulletins, and marketing materials, but these solutions typically rely on costly third-party platforms (Qualtrics, Medallia) for survey data and generic SharePoint or Workplace intranets for internal communications. None offered a fully integrated, localised experience. This created a clear opportunity: a HubSpot-native solution that unified all three functions - content, communication, and performance data all in one cost-efficient system.
Journey mapping traced the experience of two user groups from first login through to completing core tasks. For dealers, the critical path was: receiving a bulletin → accessing relevant resources → completing a customer satisfaction survey. For corporate staff, it was: logging in → reviewing dealer MSI scores → identifying underperforming areas → communicating actions. These maps surfaced a clear design priority: the system needed to work very differently depending on who was logged in.
Information architecture: designing for two audiences.
The most fundamental decision was how to structure a single portal that served two users with almost opposite needs. Dealers needed simple, task-focused navigation, find a resource, complete a survey, read a bulletin. Corporate staff needed analytical depth, aggregate data, comparative views, trend analysis.
Rather than creating two separate portals, I designed a single access-controlled environment where the navigation, dashboard, and content surfaces adapted based on user role. This reduced development complexity while delivering a tailored experience to each group.Managing Iteration Under Pressure
This project involved more rounds of client feedback than initially scoped. Direction shifted across several key areas like navigation labels, category structures, survey visualisation styles, and colour palette alignment with Mazda's evolving global brand standards.
Rather than treating each change as a setback, I developed a systematic approach to iteration: documenting each round of feedback with clear rationale, maintaining a versioned design file that preserved earlier decisions for reference, and batching related changes together to reduce back-and-forth. This kept the project moving without losing sight of the original design intent.
The Mazda intranet and dealer portal were designed to be both functional and engaging, highlighting key content like promotions and launches. Early Balsamiq wireframes helped balance user-focused features with practical constraints, testing layouts and content hierarchy for optimal engagement.
The Wireframes were provided by the Brand strategist of the MO Agency team.
View more projects
Outcome
The Mazda Dealer Portal launched as a fully integrated HubSpot CMS platform serving Mazda's South African dealer network.
Key outcomes reported by the client:
- Employee onboarding significantly improved: new dealership staff now have a structured digital onboarding experience for the first time, replacing ad-hoc knowledge transfer with a consistent, centrally managed resource hub
- Survey participation and feedback quality improved: the simplified, portal-integrated survey experience reduced friction in the feedback process, leading to more consistent dealer responses
- The MSI Dashboard is actively driving business decisions: corporate HQ now uses the dashboard to identify dealers requiring support, track improvement over time, and report on customer satisfaction at a network level, a capability that simply didn't exist before this project
Industry
Automotive & Logistics
My role
Timeline:
UI Designer
6 Months (2024 - present)
View more projects
Mazda Dealer Portal
Mazda is a Japanese automaker, formerly known as Mazda Motor Corporation, that was founded in 1920.
Industry
Automotive & Logistics
My role
Timeline:
UI Designer
6 Months (2024 - present)
Context
Problem Statement:
My Role:
Research & Discovery
Design Decisions
Brainstorming and wireframing
User Research: Journey Map
Mazda South Africa operates through a network of independent dealerships, each responsible for their own sales performance, customer satisfaction scores, and brand compliance. On the corporate side, a small team manages communications, resources, and performance reporting across the entire dealer network.
When MO Agency was brought in, there was no single place where any of this happened. Dealers were receiving bulletins via email, accessing marketing assets from shared drives, and submitting survey responses through disconnected third-party tools. Corporate staff had no unified view of dealer performance, and new employees at dealerships had no structured onboarding experience to speak of.
Mazda's dealer network lacked a centralised, secure portal for resources, communications, and performance feedback. Corporate staff were managing fragmented tools with no unified intranet, and dealers were navigating scattered, inconsistent information sources.
This created three concrete pain points:
- Dealers wasted time hunting for up-to-date marketing materials, bulletins, and brand guidelines across multiple platforms
- New dealership employees had no structured digital onboarding, knowledge transfer was inconsistent and heavily reliant on individuals
- Corporate HQ had limited visibility into dealer performance and customer satisfaction, making it difficult to identify where to direct support and resources
As the UI Designer on this project, I was responsible for translating the strategic brief and brand strategy into a fully designed, production-ready interface on HubSpot CMS. I worked alongside a Brand Strategist who led the research phase and produced the initial Balsamiq wireframes, and a development team who built the HubSpot implementation.
While formal user interviews were not conducted at this stage, the project drew on two key research inputs.
Competitor analysis revealed that major automotive brands like Toyota and BMW use dealer portals to centralise assets, bulletins, and marketing materials, but these solutions typically rely on costly third-party platforms (Qualtrics, Medallia) for survey data and generic SharePoint or Workplace intranets for internal communications. None offered a fully integrated, localised experience. This created a clear opportunity: a HubSpot-native solution that unified all three functions - content, communication, and performance data all in one cost-efficient system.
Journey mapping traced the experience of two user groups from first login through to completing core tasks. For dealers, the critical path was: receiving a bulletin → accessing relevant resources → completing a customer satisfaction survey. For corporate staff, it was: logging in → reviewing dealer MSI scores → identifying underperforming areas → communicating actions. These maps surfaced a clear design priority: the system needed to work very differently depending on who was logged in.
Information architecture: designing for two audiences.
The most fundamental decision was how to structure a single portal that served two users with almost opposite needs. Dealers needed simple, task-focused navigation, find a resource, complete a survey, read a bulletin. Corporate staff needed analytical depth, aggregate data, comparative views, trend analysis.
Rather than creating two separate portals, I designed a single access-controlled environment where the navigation, dashboard, and content surfaces adapted based on user role. This reduced development complexity while delivering a tailored experience to each group.Managing Iteration Under Pressure
This project involved more rounds of client feedback than initially scoped. Direction shifted across several key areas like navigation labels, category structures, survey visualisation styles, and colour palette alignment with Mazda's evolving global brand standards.
Rather than treating each change as a setback, I developed a systematic approach to iteration: documenting each round of feedback with clear rationale, maintaining a versioned design file that preserved earlier decisions for reference, and batching related changes together to reduce back-and-forth. This kept the project moving without losing sight of the original design intent.
The Mazda intranet and dealer portal were designed to be both functional and engaging, highlighting key content like promotions and launches. Early Balsamiq wireframes helped balance user-focused features with practical constraints, testing layouts and content hierarchy for optimal engagement.
The Wireframes were provided by the Brand strategist of the MO Agency team.
Outcome
The Mazda Dealer Portal launched as a fully integrated HubSpot CMS platform serving Mazda's South African dealer network.
Key outcomes reported by the client:
- Employee onboarding significantly improved: new dealership staff now have a structured digital onboarding experience for the first time, replacing ad-hoc knowledge transfer with a consistent, centrally managed resource hub
- Survey participation and feedback quality improved: the simplified, portal-integrated survey experience reduced friction in the feedback process, leading to more consistent dealer responses
- The MSI Dashboard is actively driving business decisions: corporate HQ now uses the dashboard to identify dealers requiring support, track improvement over time, and report on customer satisfaction at a network level, a capability that simply didn't exist before this project