top of page

Mitsubishi - Mitsubishi Motors

Dark=False.png

🔒 Confidential Case Study Notice:

This case study is shared strictly for interview and evaluation purposes. It is protected under NDA and contains work done for Mitsubishi Motors and KDDI via Station Digital Media. Please do not reproduce, share, or distribute this content outside the hiring process. For access, a password is required and provided upon request. Thank you for respecting the confidentiality of this project.

Mitsubishi Motors was the most intense project I have ever undertaken. We performed exceptionally well in completing the project from beginning to end on time and with great quality. It involved a lot of hard work and communication between Station Digital Media, the KDDI team, and the Mitsubishi team across Japan, China, and America.

​

On the design side, we flew to Tokyo for a workshop to brainstorm and designed the initial UI designs within two weeks. We spent two months completing the entire feature set of the app design for cross-platform devices, including iOS and Android mobile devices and smartwatches. Consequently, we didn't have time to conduct user-centered design. However, our team prioritized clients' needs at Station Digital Media. Despite this, I conducted design research and competitive audits, drawing on my previous experience with in-vehicle apps. Additionally, we received support from the business analysis team and the KDDI team.

​

I primarily focused on features such as Region and Language, Home (with mini-apps), Profile, Vehicle Status Report, Map, My Vehicle, Add & Pair Vehicle flow, Subscription, Vehicle Notification, Wallet, Onboarding Tutorial, WatchOS and Wear OS, along with design system and design QA. For this case study, I will only present a few core features I worked on.

​

Project timeline:

​

        12/4/2023 - project kick off

        2/28/2024 - design done

        4/30/2024 - phase 1 release to KDDI

        5/30/2024 - phase 2 release to KDDI

        6/11/2024 - internal release

        7/11/2024 - external release

  •  7/15 - 9/13/2024 - external testing

Client

Mitsubishi

Team

Stakeholder - Mitsubishi (20+), KDDI (20+), Project Manager (1), Dev Manager (2), Technical Lead (1), Business analysis team (4),  development team (20+), design team (4)

Location

Tokyo, Japan; Nanjing, China; Long Beach, California & Remote

Role

UI/UX product designer
Motion Graphic Designer

Tools

Figma, Jira, Adobe Creative Suite, Junction, Microsoft Office 365

Duration

Full-time
12. 2023 - 7

Mitsubishi_Portfolio_Case Study.png
 Core Features & Tasks Checklist

Click on each button to view the details of each section

 Information Architecture

The sections on which I have worked are highlighted in yellow below.

​Note: Click on the image to view it in a larger size.

VSR
 Vehicle Status Report

Teams: business analysis team, development team & UI/UX designer Sophie

Goals

​

The Vehicle Status Report (VSR) is a very important feature. Our team is designing it to be easy to read and improving the design to be more user-friendly based on the old design.

Challenges

​

  • We didn't have time to conduct any user research due to the tight schedule for completing the first round of design in just one week. Therefore, the BA team helped me analyze Mitsubishi (MMC)'s requirements. Meanwhile, the dev team received the API to sync up with the design team regarding how users interact with VSR. I also conducted quick competitor research.

​​

  • There was miscommunication between MMC and our teams because our partner, KDDI, needed to review and send feedback to us before we could send out the final design to MMC. For example, the warning colors changed back and forth many times due to misleading communication. My solution was to create multiple color component options on Figma, which saved a lot of time on revisions.

​​

  • Our client, MMC, requested the design team to create different jellybean options based on the type of vehicle the user has. Due to time constraints, we pushed back to MMC suggesting to display white color vehicles as the default option without creating multiple colors of jellybeans. Users can still display their different colors of the vehicle on the Home screen.

Requests

Old App Design

MMC provided us with the current app user flow. The design was nice, with less information, but their new requests necessitate incorporating a lot more information into VSR. Therefore, I had to redesign the layout.

​Note: Click on the image to view it in a larger size.

Request Details

MMC has sent us a substantial document outlining all the requests that the BA team has assisted the design team in analyzing to highlight important aspects on Jira. Multiple teams can communicate directly on Jira and track the process of features creation.

​Note: Click on the image or arrow to view a larger size or more options below.

Competitor Research

​

Based on all the requests, I have conducted quick competitor research and design research, in addition to studying Mitsubishi's website style and branding.

​Note: Click on the image to view it in a larger size.

Design Round 1

​

There have been many design revisions for VSR. In this case study, I will only present a few important design revisions included final design. Based on all the references and information. I designed the first round VSR design to let the lead designer review first. This design style is pretty much following Mitsubishi website style and their branding. We had VSR under My Vehicle based on current app.

​

Design Insight

  • I designed the jellybean to be horizontal instead of occupying the full view, allowing more space to view other information such as VSR overview, mileage tracker, and warnings.

  • Users can visually see warnings on the jellybean, such as opened doors or lights, and red toast for other warning alerts directly.

  • Users can schedule service by tapping on the CTA button immediately.

​​

Feedback from Lead Designer​ & BA Team

  • No focal point.

  • There was too much text to read on Mileage Tracker.

  • Confirmed with the BA team that there was no need to schedule service on VSR.

​Note: Click on the image to view it in a larger size.

Design Round 2

​

I redesigned VSR based on the feedback and new requests, which is to move VSR feature to bottom nav bar since it's an important feature. 

​

Design Insight

  • I darkened the background to create a focal point for the jellybean and separated it from the list design to prevent them from blending together.

  • For the Mileage Tracker, I redesigned the chart as a graph. Users can now select different dates to view details by moving the indicator vertical line.

  • Added loading and refresh states

  • Designed both normal and abnormal VSR states.

​​

Feedback from KDDI & MMC

  • It seemed odd to MMC to arrange the jellybean horizontally even I have explained the reason.

  • MMC didn't like to cover the whole screen when loading.

  • MMC sent a new requests document to reorganize the Overview list. The document had already been updated 5 times, so I had to update the design 5 more times to synchronize it with their requirements on time.

​Note: Click on the image to view it in a larger size.

Final Requests

​

The final requests from MMC are below. They were very specific and straightforward.

Note: Click on the image or arrow to view it in a larger size or to see more slides below.

Final Design

​

The final requests from MMC are below. They were very specific and straightforward.

  • Changed the jellybean to vertical view

  • Revised the loading screen with a loading toast message

  • Reorganized and grouped the Overview and Warnings list.

Note: Click on the image or arrow to view it in a larger size or to see more slides below.

Charging History (XEV) Requests

​

We designed the Charging History feature after finalizing the design style. Charging History is specifically for EVs only. Conventional vehicles (CVs) will not display this feature. Below are the requests and the analysis of the old app.

Note: Click on the image or arrow to view it in a larger size or to see more slides below.

Charging History Final Design

​

The final design is similar to the Mileage Tracker, with a tappable button that allows users to calculate the estimated charge price.

​Note: Click on the image to view it in a larger size.

Prototype

​

Here is the happy path of Vehicle Status Report.

Map
Map

Teams: business analysis team, development team & UI/UX designer Dustin & Sophie

Goal

​

The goal was to redesign the Map feature to be more user-friendly and intuitive. We have added some new features such as Save POIs, POI search, Last One Mile, and the ability to send locations to the vehicle.

Challenges

​

  • To keep the feature simple to use despite its numerous functions and to cover all edge cases, ensure that users do not encounter dead ends when interacting with the map.

  • We needed to complete the map design within 2 weeks, so we didn't have time to conduct any user research or usability tests. The design of the map basically follows Google Maps user behavior. To enhance workflow speed, I created components while designing, facilitating swift updates and mitigating the need for repetitive revisions.

Requests

​

The requests from MMC have been analyzed by the BA team on Jira for the design and dev teams to review and work on.

Note: Click on the image or arrow to view it in a larger size or to see more slides below.

First Design Draft

​

Design Brief

Based on all the requests and Google Maps user behavior, I have designed the first round of the Map feature. There were multiple design iterations I undertook. For this case study, I will only present 2 rounds: the initial design and the final design.

​

Feedback

I received feedback from cross-functional teams, as well as from our third partner, KDDI, and the client, MMC. Here is the feedback below:

  • Add PIN verification once tapped on Map (MMC request).

  • Add Google logo since we use Google Maps (Dev team feedback).

  • Remove Horn. This feature is less used feature according user review (MMC request).

  • Redesign the bottom sheet to have a better hierarchy.

  • Remove the overview route for LOM; tap the button to be directed to Google Maps or Apple Maps (Dev team feedback).

​Note: Click on the image to view it in a larger size.

Final Design

​

Based on the feedback and new request from MMC. Here are the final design.

  • Added PIN verification once tapped on Map (MMC request).

  • Added Google logo since we use Google Maps (Dev team feedback).

  • Only displayed Car Finder and phone location icon buttons on the Map.

  • I redesigned the bottom sheet to improve its hierarchy. Additionally, I redesigned the full view, expanded view, and collapsed view of the bottom sheet for the POI list, POI details, and Car Finder.

  • Changed the color from black to navy blue based on MMC's feedback.

  • Remove the overview route for LOM; tap the button to be directed to Google Maps or Apple Maps route.

  • Added push notification for LOM.

  • Added edge cases for POI search and Car Finder.

Note: Click on the image or arrow to view it in a larger size or to see more slides below.

Prototype

​

Here is the happy path of Map user flow.

Add & Pair Vehicle

Teams: business analysis team, development team & UI/UX designer Dustin, Melanie & Sophie

Goal

​

The 'Add & Pair Vehicle' user flow is pretty straightforward. MMC has provided us with detailed requirements. The BA team analyzed the requirements for the design team. The design team incorporates design insights to create a user-friendly and intuitive user flow.

Challenges

​

The major challenge was the limited time available to complete the user flow. I created the initial design draft in just one day, following the requirements. The lead designer reviewed the design and provided feedback for revision before presenting it to the BA and development teams. After an internal review lasting a week, we presented to KDDI and MMC for final approval. The entire process was completed within two weeks, alongside working on other feature revisions.

Requirements

​

The 'Add & Pair Vehicle' user flow is pretty straightforward. MMC has provided us with detailed requirements. The BA team analyzed the requirements for the design team. The design team incorporates design insights to create a user-friendly and intuitive user flow.

Note: Click on the image or arrow to view it in a larger size or to see more slides below.

First Draft Design

​

Design Brief

Based on all the requirements and the old app user flow, I created the first draft design. It was then reviewed by the design lead, and after a couple of revisions, it was reviewed by the BA and dev team before being reviewed by KDDI and MMC.

​

Feedback

  • MMC requested to let the user start to scan code at the beginning.

  • Too many tabs on Legal process.

  • MMC requested to use the old app pair vehicle graphics for easy understanding. The current instruction has too many readings with unclear graphic (it was designed by Melanie).

Note: Click on the image or arrow to view it in a larger size or to see more slides below.

Final Design

​

Based on all the feedback, we revised the design and addressed edge cases with the BA team to expedite the design process.

  • I moved the scan code option to the beginning and added an option to enter the VIN manually on the scan VIN screen.

  • A toggle button for the flashlight has been added to the enter VIN screen (KDDI requested this, despite its redundancy with the scan VIN screen).

  • The "Data Usage" section has been consolidated with the legal information.

  • To facilitate understanding of the pairing process,designer Melanie utilized graphics from the old app for vehicle pairing.

  • All edge cases have been incorporated (by Melanie and Sophie).

Note: Click on the image or arrow to view it in a larger size or to see more slides below.

Prototype

​

Here is the happy path of Add & Pair Vehicle user flow.

Wallet

Teams: business analysis team, development team & UI/UX designer Sophie

Goal

​

The Wallet feature is pretty straightforward as well. MMC has provided us with detailed requirements. The BA team analyzed the requirements for the design team. The dev team used Stripe and asked the design team to utilize Stripe SDK UI elements while designing the Wallet feature. The design team incorporates design insights to create a user-friendly and intuitive user flow.

Challenges

​

The major challenge persisted in the tight schedule. I dedicated a week to crafting the initial design draft, followed by several internal reviews. After a couple of iterative design sessions, we presented the designs to MMC and received final approval within two weeks.

Requirements

​

MMC has provided us with detailed requirements and old app user flow. The BA team analyzed the requirements for the design team. The design team incorporates design insights to create a user-friendly and intuitive user flow.

Note: Click on the image or arrow to view it in a larger size or to see more slides below.

First Draft Design

​

Design Brief

Based on all the requirements and the old app user flow, I created the first draft design. It was then reviewed by the design lead, and after a couple of revisions, it was reviewed by the BA and dev team before being reviewed by KDDI and MMC.

​

Feedback

There were not many big changes to the Wallet design. The user flow looked good.

  • The design lead chose the first option for the Add Card screen (popup style).

  • Change the input style once design lead asked to change Add Card to popup style.

​Note: Click on the image to view it in a larger size.

Final Design

​

Based on all the feedback, I revised the design and addressed edge cases with the BA team to expedite the design process.

  • Revised the icon style and popup style.

  • Revised the input style.

  • Moved the scanning method to the beginning of the flow.

​Note: Click on the image to view it in a larger size.

Prototype

​

Here is the happy path of Wallet user flow.

Add Vehcle
Wallet
Smart Watch

Teams: business analysis team, development team & UI/UX designer Sophie

Overview

​

I had only two weeks to complete designs for both WatchOS and Wear OS designs. Consequently, I didn't have enough time to employ user-centered design principles. I designed the smartwatch based on requirements from MMC, iOS, and Android smartwatch system design libraries, as well as competitor research and design exploration. I collaborated closely with the development team to prioritize their tight schedule. We underwent multiple design rounds with internal reviews and iterations before presenting to MMC. After receiving feedback from MMC, I redesigned and revised the smartwatch design within a week based on the feedback and obtained final approval the following week.

Goals

​

The goal was to design WatchOS and Wear OS interfaces within 2 weeks. We simplified the functions and prioritized core features, keeping in mind accessibility design for small screens.

Challenges

​

  • Due to the tight design schedule, I conducted competitor research and design exploration in addition to meeting MMC's requirements. The BA team also assisted in analyzing and organizing which core features should be included in the smartwatch designs.

  • Dev team had a tight development schedule as well. I have to compromise with dev team for a couple design decisions, which were against accessibility design. We agreed to revise those design for next lunch. 

  • iOS and Android have different design system styles and user behaviors. I need to research and be aware of the differences and similarities while designing for both devices. For example, iOS has back button, but on Android smartwatch, swipe right to go back to previous screen.

Requirements

​

Below are the requirements the BA team analyzed and organized from MMC's extensive documents.

Note: Click on the image or arrow to view it in a larger size or to see more slides below.

Competitor Research & Design Research

​

I researched marketing apps and reviewed both the iOS and Android smartwatch system design libraries. Then, I conducted design references before initiating the design process.

​Note: Click on the image to view it in a larger size.

First Round Design Options

​

Based on the requirements and research, I came up with three design options for both WatchOS and Wear OS. The design lead chose Option 1, which was the list design style.

Note: Click on the image or arrow to view it in a larger size or to see more slides below.

Design Revision 

​

After lead designer chose Option 1. BA team and dev team had a internal review and gave me feedback. I revised the design based on their feedback. Basically they asked to change Car Finder user behavior to not display map view until user tap on "Car Finder" button. We presented this design to MMC.

Note: Click on the image or arrow to view it in a larger size or to see more slides below.

Feedbacks

​

We received a lot of feedback from MMC along with their design references. The BA team has documented their requirements on an Excel sheet for me to redesign and revise.

Note: Click on the image or arrow to view it in a larger size or to see more slides below.

Second Round Design Options

​

It's very helpful to understand what our client was looking for through their references and more detailed requirements. Based on all of that, I have come up with 5 additional design options (including one of the old options). The design lead chose Option 2A, which was similar to a mobile app design style.

Note: Click on the image or arrow to view it in a larger size or to see more slides below.

Final Design

​

MMC was happy with Option 2. I revised the design a few more times and then received final approval from MMC. Here is what was revised in the final design:

  • Changed the Car Finder screen back to map view for easy access to the car's location by tapping "Car Finder" directly on the Home screen.

  • Changed the full-screen refresh to a refresh icon at the top based on MMC's feedback, so users can still see information while refreshing or loading.

  • Updated the message style with better hierarchy for users to read.

  • Added all edge cases and error cases.

Note: Click on the image or arrow to view it in a larger size or to see more slides below.

Prototype

​

Here is the happy path of WatchOS app.

SW
Onboarding
 Onboarding Tutorial

Teams: business analysis team, development team & UI/UX designer Sophie

Requirements

​

First of all, MMC requested the design of a smartwatch onboarding tutorial screen for when users first log in to the app for advertisement purposes. This is because the old app did not include a smartwatch app. Additionally, we need a general onboarding tutorial for the new app. Therefore, I have designed onboarding tutorials for both the smartwatch and the new app, incorporating all core features, including CarPlay.

Note: Click on the image or arrow to view it in a larger size or to see more slides below.

Final Design

​

The process of designing the onboarding tutorial was very smooth, based on the straightforward requirements and MMC branding style. I only made a few design revisions with minor changes before receiving final approval.

Note: Click on the image or arrow to view it in a larger size or to see more slides below.

Design System
 Design System

Teams: business analysis team, development team & UI/UX designer Melanie & Sophie

Summary​

​

There were 2 designers, Melanie and I, who were creating and organizing the design system. We were building the design system while designing because of the tight schedule, which was really helpful for making large revisions during the iterative design process.

​

To support the dev team's fast delivery, we created icons with multiple colors. Therefore, the dev team could quickly retrieve elements from the design file and integrate them accurately into the design library, pinpointing the component's location on Figma.

​

Our design lead was very particular about colors, so we had to keep adding different tones of black, white, and gray for various design cases. This improved the app's design quality but made it difficult for the dev team to understand the logic behind the color usage in the app. To address this issue, we conducted a Figma change tracker deck with PowerPoint to assist the dev team in referencing any design changes, including colors, fonts, icons, paddings, etc.

Figma Change Tracker

Here are a few example slides from the Figma Change Tracker deck. In addition to sharing it with the dev team, we also shared the deck with MMC as per their request to track the new changes for approval.

Note: Click on the image or arrow to view it in a larger size or to see more slides below.

Design Library

Melanie and I are both responsible for creating and organizing the design library. I am mainly in charge of WatchOS, Wear OS, Vehicle Status Report, and Map components. We have separated header, list, and input field components to be more specific for easier revision. For example, the list component was becoming more complicated to set up as we kept adding more features with different functions. I enjoy working on the design system, as it helps me to have better logic and organization.

 App Review

The Mitsubishi Motors App officially launched in September 2024. Although I transitioned off the project prior to release, I contributed to early-stage UI/UX design and collaborated with the team to establish a scalable foundation.

​

Reflecting on the project, several key improvement opportunities stood out — especially in how we managed design consistency, collaboration, and user focus under a tight schedule:

​

WHAT TO IMPROVE​

​

I'd like to share my insights on what improvements can be made for the app. I understand we have a really tight schedule; therefore, it would be better to keep the design as simple as possible to save time.

  • Design System Simplification
    To reduce overhead, the design system would have benefitted from fewer color and text styles, standardized spacing, and a shared UI spec. I attempted to initiate a UI specification page in Figma, but the team relied on the Change Tracker instead, which proved inefficient and disorganized over time.

  • Streamlined Handoff Process
    Design handoff was routed through the BA team, often causing delays and miscommunication. A more direct line between designers and developers could have improved accuracy, reduced friction, and saved time explaining design intent secondhand.

  • User-Centered Validation
    Due to the aggressive timeline, we weren’t able to apply full user-centered design methods. Still, lightweight internal usability testing or quick A/B testing could have added meaningful feedback without slowing delivery.

  • Accessibility Considerations
    Accessibility was largely overlooked during the design process. While speed was prioritized, inclusive design should have played a larger role. As product designers, we have a responsibility to build empathetic, accessible experiences — even on compressed timelines.

🔒 Confidential Case Study Notice:

This portfolio piece is password-protected to respect confidentiality agreements and client privacy. It's shared solely for evaluation during the hiring process. Thank you for keeping this content private and secure.

Review
  • Linkedin
  • Dribbble

© 2025 designed by Sophie Xing

bottom of page