Subaru Remote App on Mobile & Smartwatch Devices
🔒 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 Subaru 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.
Subaru Remote app is designed for all Subaru remote vehicles in Japan. We have a big team that works remotely in Japan and America. The app was successfully launched on both Apple Store and Google Play App Store in Japan in December 2022.
I am proud to have joined the team as a junior designer and eventually became the lead designer in just two years. The project was divided into two phases. Phase 1 involved developing important features for customers to remotely control their vehicles, check vehicle health, find their vehicle's location, POI, and receive alerts and notifications.
I joined the Subaru team during Phase 2, where our main tasks were designing a new feature for the future release, apps reskin, conducting design quality assurance, and addressing numerous change requests from the Subaru team. Besides, I also reorganized the Subaru design library and created visual designs and motion graphics.
Client
Subaru
Team
Stakeholders (Subaru & KDDI), Business analysis team (6), development team (5+), QA team (4), design team (3)
Role
Lead UI/UX product designer, motion graphic designer & visual designer
Tools
Figma, Zeplin, Jira, Adobe Creative Suite, Microsoft Excel, Overflow, Junction
Location
Worked remotely between Long Beach, California and Tokyo, Japan
Duration
Full-time
3. 2021 - 3. 2023
New Feature - Remote Vehicle Configuration
Teams: business analysis team, development team & design team (Claudia & Sophie)
Duration: 2 months
Goal & Challenge
-
The goal was to develop a user-friendly vehicle configuration (RVC) feature in Subaru Remote App in response to Subaru's requests.
-
The challenge was to provide design solutions that meet the business needs of stakeholders while also matching the needs of their clients. Subaru's requests were very straightforward; they already have RVC service on their website, so they did not need us to do research. We need to reduce the amount of information to fit in the app but keep important settings and functions.
Early Stage - Cross-Functional Teams Collaboration
Team: business analysis team, development team & design team (Claudia & Sophie)
Subaru provided us with Remote Vehicle Configuration (RVC) details in Japanese. Our business analysis team reviewed and translated the requests into English. Then, the BA team had a couple of meetings with the dev team and design team to explain and analyze the requests for us. Before we started to design RVC, the three teams figured out a few tasks as follows:
-
Give the BA team level of effort estimates for Subaru to budget the new feature.
-
Have the design team and dev team list any questions from Subaru's requests before or during the design process.
-
Ensure that the design team confirms whether some of the designs were achievable for the dev team to develop before or during the design process.
-
Weekly sync meeting.
Design References Provided by Subaru
Team: business analysis team
Subaru provided the entire detailed RVC sections, data communication module (DCM) materials and website design for reference. Here is a part of the RVC sections below. As you can see, the BA team translated every string in the forms.
Below is a portion of the translated DCM form.
Below is an example of a website design that has been translated.
Information Architecture
Teams: Subaru team, BA team, design team & dev team
Our BA team collaborated with the Subaru team to simplify the functions of RVC for the app's design. The design and development teams also participated in the process to ensure that the design is achievable for development with less time consumption and within budget. Below are modified RVC settings.
General Settings
-
We removed the language selection since the Subaru Remote App is only launched in Japan. Besides, users can select different languages on the Subaru Multimedia system monitor in the vehicle.
-
We simplified the auto door lock/unlock functions.
-
We combined the small and large meter screen options.
-
We simplified all the time sets functions.
Birthdays and Anniversaries Reminder
-
A maximum of 5 items can be added.
Address Settings
-
A maximum of 2 addresses can be added.
After we modified RVC settings multiple times for the app design, I created and revised the final information architecture.
User Story - Happy Path & Error Cases
Teams: BA team & design team Claudia & Sophie
Furthermore, our BA team and design team collaborated to create user stories for the design team to develop high-fidelity prototypes. Below is an example of a user story, along with Subaru's feedback translated into English.
Final Design - UI Walkthrough Deck
Team members: UI/UX designer Claudia & Sophie
We created high-fidelity prototypes in alignment with the current app design style and utilized components from the Subaru design library on Figma. We also created a UI walkthrough deck that included all error cases (to ensure that users don't experience dead ends in the app) in addition to the happy path, and pitched it step-by-step to the client remotely twice in total.
The UI walkthrough deck has 68 slides, so I just share some of the highlighted flows from it, including:
-
RVC Profile Details
-
Create RVC
-
Edit RVC
-
Send RVC to Vehicle
-
Delete RVC
-
Error Cases
I designed and created Edit RVC, Send RVC and Delete RVC flows, and also revised all the final designs.
Note: Click the image or arrow to view more options below.
Final Design - High-Fidelity Prototype
Team member: UI/UX designer Sophie
Here is the RVC interactive prototype, which presents:
-
Create RVC
-
RVC Details
-
Edit RVC
-
Send RVC to Vehicle
-
Delete RVC Profile
At the end, the Dev team developed the new feature, and the Subaru team is happy with the final design. Due to the low budget, Subaru decides to release the new feature for version 2.0 in the near future.
App Design Reskin
Teams: Dev team & UI/UX designer Sophie
Duration: about one month
Goal & Challenge
The goal is to create Android screens that mirror the iOS design to assist the development team in creating the Android mobile app.
The challenges are as follows:
-
iOS and Android have different system design styles, screen sizes, and font types. I need to provide the development team with the distinguishing elements between the iOS and Android design systems.
-
If any modifications are needed, it can be time-consuming to revise both the iOS and Android screens individually. To address this, I created shared components on Figma that can be used for both iOS and Android screens, enabling faster revisions.
-
There is an issue with screen size: the previous designers designed the smartwatch app based on the largest screen size, making it difficult for the development team to fit all the elements on the smallest smartwatch screen. To resolve this, I conducted research and re-skinned the design to fit screens of all sizes, including the smallest ones.
-
There is also an issue with font types: the previous designers and BA team decided to use six different font types in total for both the iOS and Android mobile app and smartwatch app designs, in two different languages (one font type for Japanese and one font type for English). This approach makes it challenging and time-consuming for both the design team and the development team to update. I reported this issue to the product manager and reduced the number of font types to four since Subaru requires the use of two Japanese font types for iOS and Android apps. Therefore, we must retain those fonts and use the system font type for iOS and Android devices. Additionally, we will use the same font type for both languages.
Ideally, I would use only one font type alongside system font types for all Subaru devices for branding reasons as well as for easier updates and reduced time consumption.
Design Solution
Team member: UI/UX designer Sophie
Smart watch screen size issue:
The previous designers designed iOS and Android smartwatch apps based on the largest screen size, which has made it difficult for the development team to fit all the elements (especially the strings in Japanese) on the smallest smartwatch screen. The Subaru team shared quantitative research indicating that people in Japan generally prefer small-sized smartwatches.
Here is the video the development team shared regarding the issues on multiple-sized iOS smartwatch screens.
Resolve issue:
I conducted research on the smallest screen sizes for both iOS and Android smartwatches. I resized some of the elements and applied the new design to both the smallest and largest screens. I made the following changes:
-
Reduced the font size and spacing between each letter.
-
Reduced the icon size.
The development team can adjust the sizes of other elements though coding.
As you can see, the reskinned design (including strings, icons and buttons) fits well on both the smallest and largest screen sizes.
Note: "new designs" are the reskinned designs below.
Reskinning Process from iOS to Android for Mobile App
Team member: UI/UX designer Sophie
The Subaru Remote app will launch on both the Apple Store and Google Play App Store in Japan. To ensure better understanding of the app across our cross-team, we initially created the app in English and then translated it into Japanese using our internal platform, Junction.
We began by creating the iOS app first and then adapted it to Android by reskinning it based on the iOS version. Here are a few important steps for my reskinning process:
-
Create Android design system components (detailed components are in the Design Library section)
-
Replace the font type with Noto Sans for Android.
-
Adjust the constraints while reskinning to Android on Figma (the previous designers didn't adjust the constraints while creating the design).
I have completely reskinned the Android version for the English release, and I have also reskinned a few important screens for the Japanese version for the development team. Here are a few examples of the design reskin:
Delivery to the Development Team
Team member: UI/UX designer Sophie
After completing all the reskins, I uploaded the design to Zeplin for the development team. As you can see below, we have different versions of the design files organized by iOS and Android mobile apps, as well as the smartwatch app, available in English and Japanese on Zeplin.
I have also created styleguide on Zeplin for development team to follow the color palette, get the images, logos, elements and other elements for develop the apps.
Design QA
Teams: business analysis team, development team & design team (2 new designers and Sophie as a lead designer)
Duration: 2 months
Goal & Challenge
The goal is to ensure that the app build matches the UI design. QA the app to ensure it follows our UI walkthrough and make sure there are no dead ends in the app.
The challenges:
-
To effectively communicate with the development team, who are not designers, it is difficult for them to recognize similar colors, font types, and spacings in the design, even with the style guide. Therefore, we need to create QA decks and describe the issues by comparing the app build and design examples for the development team to fix.
-
As a lead designer, training new designers to perform design QA is time-consuming. Therefore, I have created a Quality Assurance document, a design QA deck example, and scheduled a QA introduction meeting for new designers to assist with design QA. After the new designers have completed the design QA decks, I review it and leave comments to help them learn to do it better and also address any missed issues.
Design QA Plans & Timeline
Teams: business analysis team, development team & design team
I synchronize with the BA team, design team, and product manager and confirm a QA schedule. I notify the dev team members when the timeline is confirmed.
Design QA Process
Team members: lead UI/UX designer Sophie & 2 junior UI/UX designer
-
Check UI Design Consistency
1. Check the consistency of header and footer navigation placement and locations of the icon and strings.
2. Visual consistency for fonts, buttons size, space, colors, labeling, and image placement.
3. Image Quality: check image resolution, make sure is not pixelated, cropped, or stretched.
4. Colors can be tricky on different OS, check comparison across iOS and Android.
5. Does the app match your design in Figma? To check, simply put comparison side by side.
-
Grammar and Spelling
-
Brand Names
The worst situation would be spelling your client's name or product name wrong.
-
Login, Registration, and Checkout
If there are any login, registration, or checkout flows, test that the process works in both conventional and unconventional ways.
-
Links
Ensure all the navigational pieces linking to the correct place.
-
Functionality
Ensure all of the parts and pieces of your app function the way they should.
-
User Friendliness
How difficult is it to get from Point A to Point B in the app?
Below are a few examples from our design QA decks.
Note: Click the image or arrow to view more options below.
Change Requests
Team member: Lead UI/UX designer Sophie
Goal & Challenge
The goal is to satisfy our client while ensuring that we design user-friendly and easy-to-use app designs.
The challenge arises when communicating with our client because it can be difficult to propose better design solutions when the client insists on executing their design ideas. Our usual process involves conducting design research, proposing multiple design options, and providing a design brief for each option. We then compare each design option to help the client understand why our proposed design is better suited for implementation.
I have worked on numerous change requests throughout the year, and I would like to highlight three typical change requests related to both UI and UX design below.
Change Request 1 - Implement "Do Not Display Again" String in Smartwatch App
Team member: Lead UI/UX designer Sophie
Objective: Implement a "Do not display again" button on smartwatch.
Requirements:
-
The message should be displayed above the "OK" button.
-
The button color should remain the same.
-
The message should fit inside the button. If the font size needs to be smaller, it is acceptable.
-
If design team has any recommendations regarding the design, please feel free to suggest changes, such as modifying the button text to "OK (do not display again)."
Please let me know if you need further assistance!
Below is an example of a design from the Subaru team that was confusing for users when interacting with the "Do Not Display Again" button.
Design Solution:
Typically, Subaru requires our design team to create their initial design ideas. Our team then provides them with improved design suggestions and proposals. In this change request, I conducted research on similar design cases and smartwatch UI design. Finally, I completed the final design and sent it to Subaru as outlined below:
At the end, Subaru team approved my design suggestion and will implement this new change in the next release.
Change Request 2 - Remote Climate Control Button Revision
Team member: Lead UI/UX designer Sophie
Requirements:
The Subaru team plans to change the current remote control A/C icons on the Home screen. They aim to improve clarity regarding the actions of the buttons below, specifically:
-
Turning A/C off with a delayed countdown status.
-
Turning A/C off with a countdown while "A/C is running."
The Subaru team was given two options to consider. However, both options are not user-friendly. Option 1 includes too much text for the icon design, and the text would be too small for users to read. Option 2 presents a similar issue with small text that users would find difficult to see.
Design Solution:
Here is my proposed design option. This change request will be implemented in the upcoming app release.
Change Request 3 - Remote Climate Control Button Revision
Team member: Lead UI/UX designer Sophie
Request Description:
Due to the inability of many vehicles to send points of interest (POI), we need to disable the "Send to Vehicle" button. An alert message should be displayed somewhere on the screen.
Below are the design options proposed by the Subaru team; however, none of them were satisfactory:
Request Description:
Due to the inability of many vehicles to send points of interest (POI), we need to disable the "Send to Vehicle" button. An alert message should be displayed somewhere on the screen.
Below are the design options proposed by the Subaru team; however, none of them were satisfactory:
Design Solution 1:
This is my first design option, which aligns with the design consistency of the Subaru Remote app. However, the Subaru team rejected this option due to budget and time constraints, preventing sufficient testing of the new popup alert message.
Design Solution 2:
Therefore, I have designed another option, which is a new design style for inserting an alert message under the disabled "Send to POI" button.
The Subaru team was happy with this option and implemented it for the first app release.
Design Library
Team member: previous lead UI/UX designer Dustin & last lead UI/UX designer Sophie
Design Library on Figma
I have revised and organized the previous design library for Subaru mobile apps.
Changes made:
-
Reduced the number of font types from 6 to 4 for both iOS and Android mobile and smartwatch apps.
-
Fixed constraints.
-
Added and revised components.
-
Designed new icons and app icon.
-
Created a smartwatch design library for both iOS and Android.
Visual Design
Team member: lead UI/UX designer Sophie
Duration: 1 month
Motion Graphic Design - Onboarding Tutorial
Requirement
-
Show the five core features of the Subaru Remote app (Notifications, Send POI to Vehicle, Vehicle Status, Vehicle Configuration, Vehicle Pairing) for the onboarding tutorial design.
-
Make the onboarding tutorial animated so that it can effectively communicate the features upfront, helping users understand how the app works. This will help clarify any confusions that new users might face when using the app.
-
Design a new icon for the onboarding tutorial.
Design Process 1 - Design Options
At the early stage, Claudia and I worked on the onboarding tutorial design options. In the end, the Subaru team chose my design.
Design Process 2 - Designing Animation Keyframes
Once my design option was confirmed, I began designing animation keyframes before starting the animation creation process. Designing motion graphics can be time-consuming, which is why we requested the Subaru team to review and confirm the animation keyframes beforehand. After revising the keyframes four times, we have finalized the designs below.
Note: Click the image or arrow to view more options below.
Design Process 3 - Onboarding Tutorial Icon Design
Before working on motion graphic design, I have designed four icon options for the onboarding tutorial icon to be displayed on the Settings screen. Additionally, I have recommended the best option to the Subaru team. Consequently, the Subaru team has chosen "option 1" for the onboarding tutorial icon. Please find the design details below.
Note: Click the image or arrow to view more options below.
Design Process 4 - Creating Motion Graphic Designs
-
I utilized Adobe After Effects to craft the animations.
-
Prior to creating the animations, I consulted with the BA team and product manager regarding the timing of each animation. This was done because many users lack patience when it comes to viewing lengthy onboarding tutorials. As a result, the animation duration ranges from 5 to 12 seconds.
-
I separated the animations from the feature descriptions intended for the development team. This decision was made because the feature description strings are static in nature, making it easier to modify specific details later on. Consequently, the animation length is shorter, allowing more space for inputting feature descriptions.
The following are the final animations for the five features.
Notification
Send POI to Vehicle
Vehicle Status
Remote Vehicle Configuration
Vehicle Pairing
Design Process 5 - Delivery to Development Team
-
I uploaded the animation to Lottie Files from Adobe After Effects. Then, I downloaded the JSON file for each animation from Lottie Files for the dev team.
-
The Subaru team attempted to include extensive descriptions (more than five lines of text) on each screen, but we resisted their request and aimed to limit the strings to no more than three lines. This decision was based on the understanding that many users lack the patience to read lengthy text, especially considering the presence of intuitive animations that effectively explain the five features. Despite our efforts, the Subaru team insisted on having more than three lines of text for Remote Vehicle Configuration and Send POI to Vehicle. Nevertheless, this is an improvement compared to the previous version, and we ultimately achieved a satisfactory outcome that pleased Subaru.
Subaru Remote App Icon Design
Team member: Design director Debbie & lead UI/UX designer Sophie
Duration: 2 weeks
Requirements
-
The app icon needs to include a mobile phone, a Subaru vehicle, and the Subaru logo.
-
The vehicle must resemble Subaru's brand.
-
Follow Subaru's design guidelines to create the app icon.
-
The Subaru Remote app icon must not resemble any competitor's app icon.
Design Challenges
-
It can be quite challenging to fit a phone, a vehicle, and a logo into such a small square. Therefore, we have provided additional designs with two elements for the app icon design.
-
Simplifying Subaru's vehicle and ensuring it reflects Subaru's brand intuitively is also quite challenging. Therefore, I conducted some research on Subaru's typical and best-selling vehicles for reference.
-
It is also challenging to design an app icon that looks different from any competitor's app icon. Therefore, we researched many other competitor's app icons to avoid designing similar ones.
-
The app icon may appear simple, but designing it well can be time-consuming. Therefore, we invested a significant amount of time in developing multiple options and revising them.
Design Processes
Based on the app icon requirements, the design director asked me to create multiple design options with various colors and different Subaru-required types. Then, she selected the best options to be presented by the BA team to the Subaru team. Below is a screenshot of the Figma working file, showcasing the fifth revision for the internal design review.
It took me a while to design the icon for the Subaru vehicle. Below is a screenshot of my working file in Adobe Illustrator.
Here are the most part of app icon final design propose deck below.
Note: Click the image or arrow to view more options below.
Final Result
Subaru is happy with "Option B1" which features a navy-colored background, as they require a phone, a Subaru vehicle, and the Subaru logo for the app icon design. The app icon looks great when displayed on different devices and app stores.
App Rating + Review
App Store Reviews
Since we launched the app in December 2022 and updated it twice, there have been over 1,000 downloads on the Google Play App Store and a rating of 4.3 out of 5 on the Apple Store. Here is the only review on the Apple Store so far, translated into English:
"I am generally satisfied with the functionality, but there are some areas that I would like to improve. Firstly, it takes an unusually long time to complete a request after submitting it. I would appreciate receiving the result within approximately 10 seconds. Secondly, when viewing the navigation history after sending a destination on the map, the list consists of numbers instead of names. Consequently, it becomes impossible to set the destination again using the history at a later date. Therefore, I kindly request you to improve this aspect."
I will continuously update the reviews and ratings from app stores.
🔒 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.
