Mazda approached our team because they needed to update their digital employee hub. Why? They needed an experience that aligned with the modern aesthetics of the Mazda brand. Research showed that work needed to be done to make it easy for all types of employees - corporate individuals, regional managers, service technicians, and sales professionals - to get training, complete certifications, stay informed, and actively engage with their customers.
The goal was simple, to design a website that would establish the community, share brand information, and help employees deliver the Mazda world-class customer experience. Mazda had experienced issues with their former design agency so this project had a condensed timeline in order for the design work to not have an impact on development schedule.
Design Team Lead
Experience Designer
1 VP of Product
2 Designers
1 Product Manager
2 Technical Architects
2 Developers
5 weeks
- Unhappy client > Happy client
- Positive user feedback and improved usability
- Pending metrics as site was launched in Spring 2023
In a workshop conducted with the primary Mazda stakeholders, expected outcomes were plotted, prioritized, and defined. The goal of this project was to overhaul the current employee ecosystem of tools and create a singular platform that felt as modern as the brand. To do that, we needed to accomplish 3 things.
This meant creating one intuitive digital system that was to become an integral part of each employees day. We hoped to build a system that inspired employees so they viewed training as form of empowerment.
We needed to increase usage. First and foremost, that meant bring the digital experience into modern times. Bring personalized content into the experience. Make it more 1:1.
We needed to help employees. They were already busy enough so we needed to make a system that was easy to understand and provided valuable insights on performance. Each employee should know where to go and how to get there.
Ironically enough, if there was one word to describe the current state of the former tool, MXConnect, it was disconnected. The Mazda team had conducted user research via contextual inquiries, free-response surveys, and card sorting activities and identified the primary problem areas that existed with the current systems. The current experience wasn't engaging and navigating across the various tools was strenuous. MXConnect and OneMazda were decentralized which forced users to move between multiple access points even when content was related. Users felt confused.
Site visits had declined in recent months and the Mazda team felt there was an opportunity to engage with users and redesign the product experience.
Overwhelming 😕
No idea where to start 📍
Disparate toolset 😓
Lacked clear value❓
LMS certification path overview.
Lacks progress tracker and no easy stepped course visibility.
MXConnect homepage - The old portal dashboard
LMS certification dashboard. Relevant courses shown but no indication of how the courses are related to one another or the greater certification.
OneMazda with links out to decentralized platforms. Nothing is personalized or flows through to the platform.
From my initial meeting with Mazda it became clear that the Mazda team was uneasy with the project status. There was a development kickoff quickly approaching, but the designs were behind where they wanted them. Key Mazda stakeholders felt the Mazda brand ethos and style was lost.
I knew as project lead that in order to turn things around I'd need to establish a clear project plan. My first step was to outline expectations for the various client touch points, map out the deliverables, align work streams, and plot points for productive feedback loops. Establishing feedback early and often was necessary.
As mentioned earlier, one of our goals was to make an experience that could work for different users. To do this, we needed to understand just who those users were and their unique job roles. In a workshop with Mazda, the team collaborated to plot the employee types, what mattered to them, what wasn't working, and unique motivators. We found patterns, started grouping sticky notes, and created 3 primary personas. We kept these 3 perspectives in mind throughout ultimately leading us to design a modular homepage with movable content blocks based on a user role.
Technicians would primarily use the tool to stay up to date on news and complete required certifications. Their focus is to stay up to date on Mazda technical information. They want to be able to share new practices with customers.
Sales people would use the tool to compare their performance against others, monitor customer feedback, and learn about new brand initiatives to inform their discussions with customers.
Managers would use the tool to observe, assess, and identify how to improve their dealer operations and overall performance. They wanted the big picture and to promote brand engagement amongst internal teams.
In order to build a successful platform the data flow and integration of enabling tech was crucial. A large part of this project was understanding the various APIs that were being leveraged and the flow of what data needed to be shown on the front-end. I worked with technical architects and Leigah (my fellow designer) to work through feature prioritization and back-end functionality. This helped streamline our visual design output. In addition, there were certain technology partners that Mazda had selected so we met with them, shared designs and made sure we were aware of constraints that needed to be considered.
From a technology standpoint, there needed to be one consistent user profile that was authenticated on login and would connect to the various supporting tech for the LMS components, loyalty tracking, and customer feedback - Captivate Prime, Pursuit, and CX360 respectively. This meant mapping the flows.
I worked closely with the development teams to create a simplified visual that helped to align all stakeholders involved in the project.
Mazda has strong brand guidelines and a clear brand story. I built a design library in AdobeXD consisting of colors, typographic elements, card styles, modular components, and iconography to ensure continuity from the public facing brand site to the employee intranet. This system increased the speed of development for Phase 1 when translating from prototype to the final design. It also made it much easier to transition quickly into high-fidelity designs from initial wireframes and sketches.
When my team took over this project, one of Mazda's biggest complaints was that the design output didn't feel or look like Mazda. It didn't exude the brand vision. It was crucial we understood the brand pillars so we considered them with our designs. We asked ourselves how we could bring these 3 pillars to life with the updated MBA experience? These 3 pillars were the standards we used to assess the UI and experience as we were designing.
Detail, Quality, Artistry
Just as Mazda's dedication to creating cars is an art form, we sought to focus on the details that matter and make minute moments delightful.
Rich, Superior, Bold
Just as Mazda's interiors envelop drivers with comfort, we wanted to create a digital experience that felt premium.
Momentum and Progress
Just as Mazda's technology establishes a connectedness between the driver and the car, we aimed to continually educate and inform employees so they could deliver next-level service.
The previous platform didn't cater to different employees. Different job roles with different priorities were met with a one-size fits all dashboard. And dashboard is a generous description as the primary page was essentially a list of links with little context or content. We were aware from the UX research this was a big pain point.
A modular and fluid homepage dashboard. Each section was interchangeable with content hierarchy and modules decided upon by the employees job role.
If you were a technician focused on completing your requirements, you'd be met with a progress tracker and prompt for your next course offering.
As a salesperson, you'd see data on customer experience and feedback to pinpoint successes and opportunities for improvement. This solution allowed for future flexibility as well if modules and components needed to be changed or added to the ecosystem.
A technical employee is required to complete a number of courses to keep their certification status active. This is critical to their success. The process to identify required courses, track progress, and understand what steps were needed next were confusing and scattered. Technicians felt lost with the current LMS.
A dedicated certification landing page with clear status trackers and a detailed job overview document. To help make things crystal clear, pre-requisites were grouped and called out on certification detail page. This page acted as the one-stop spot for a tech to understand requirements and then get them done.
Some certifications and courses require that employees take them in-person. In order to schedule employees were faced with a never-ending list of times available in chronological order - think every other hour for every day of the week. There wasn't a way to narrow the results to work with the employees schedule and calendar reminders weren't a thing. This process was challenging and became a big blocker.
The addition of a calendar widget. Users can filter results to specific date that works with their busy schedule. Note here that due to technical constraints we weren't able to let users select a date range. Our hypothesis, though, was that narrowing to one day would actually decrease the in-person course cancellations. It was important that we gave users flexibility and eased the way to discover and select a time specific to their needs.
This project was a great accomplishment. When we started the project with Mazda, leadership and internal stakeholders were stressed, anxious, and concerned that the designs wouldn't deliver what they had imagined. Within a compressed timeframe of 5 short weeks, however, we managed to get the leadership team feeling excited about the designs and won Mazda over with our work. After deep diving to understand the ecosystem and existing problems, we rapidly designed a new system and the outcome was extremely well received. I'm particularly proud of the partnerships developed with other technical teams as well as with external technology partners.
The portal launched in Spring of 2023 and I am awaiting specific metrics on the results. Those are to be added to this case study as soon as I get them.
Initial user feedback was extremely positive based on the high-fidelity interactive prototype walkthrough. I'll leave you with some quotes from regional leadership folks at Mazda about the redesign.
-Regional Leader
-Regional Leader
- Clear communication is critical to a project's success.
Incorporating feedback with clear guidelines early and often helps reduce risk down the line.
- Working with constraints can help speed up the design process.
There was a lot of time spent understanding data flow from an engineering perspective. I found the most effective approach was to embrace the constraints and work collaboratively with product and tech teams to find solutions.
© Katey Jacobsen 2023. All Rights Reserved.
