Mitsubishi | 2020
With around 355 dealer partners in the United States, the Mitsubishi Motors North America website is the primary touchpoint for the company to communicates its latest innovations, vehicles, and news to their audience.
Unfortunately, user engagement and SEO ratings were ranked way below average compared to competitors. The team was initially tasked to fix SEO ratings with the guidance of the Market Research team.
Down the Rabbit hole
Through initial research with the team, we realized it was not just an SEO problem. There were many pain points that lead to the present problem.
SEO Performance: low measurement | low traffic | missed opportunities
Visual Aesthetic: same colour tone | overuse of capitalization | hierarchy issues
Usability: not web responsive | overlaying text | overload of information
Backend Implementation: pre responsive code | huge working files | confusing workflow
Tiny but Mighty
With so many problems, the team obviously wanted to make grand plans to change everything for the better. But due to budget and timing constraints, the team prioritized what was important for the client and user usability first, then the nitty-gritty. First task: Research competitors, map out user flows and re-organize the order of content to increase user engagement with SEO guidance. This process leads to creating content wireframes that would act as a skeleton for future pages, keeping content consistent and bite-size for users.
Slow and steady wins the race
Second task: Create responsive components and simplify for usability. Working with the developers, components were created not only for a consistent design aesthetic but to keep implementation simple. Each component was carefully thought out to be used for multiple purposes. Information was reorganized to keep users engaged to the page; which was a vast difference from the old design that had multiple linked out text to lose users.
Simplifying components and design styles, changed the website from a bland grey, confusing website to a clean, user friendly experience with clarity on specific functionalities. Motion was added to engage users to stay on pages longer and to quickly show snippets of features.
Easy on-boarding for a team member
Aside from an improved consumer facing experience, the backend experience was also thought out. Third task: Create a component library and design library with instructions. To prevent a repeat of misplaced, large files and messy code, a design system was created including: Organized folder structures, on-boarding documentation, design library for components, style guide, and page templates.
Needless to say, there have to be some improvements to the site:
SEO Performance: Top in J.D. Power 2020 Manufacturer Website Evaluation Study
Visual Aesthetic: modern look | engaging content | distinct hierarchy
Usability: web responsive | bite size text | clarity on functionality
Backend Implementation: design system | component library | organized file structure