Kawasaki - Rideology Mobile App
🔒 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 Kawasaki Heavy Industries 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.
Kawasaki has a Rideology app for their motorcycles. They had been planning to have a separate Rideology app for their SxS and watercraft, which would allow users to remotely control their vehicles, set geofences, record trips, perform maintenance, and play games on the app. Therefore, our team at Station Digital Media designed a proof of concept (POC) for Kawasaki to determine whether developing the app is worth pursuing. We completed the POC in February 2023, and the Kawasaki team decided to pause the development of the app based on budgeting and other reasons.
We completed the POC in 7 sprints. I joined the project starting from sprint 2 and continued until the demo app was delivered. My main tasks included designing core features such as Select/Change Vehicle, Geofence, Vehicle Status, and Poker Run Game. Additionally, I was responsible for reskinning the app from dark mode to light mode, maintaining the design system, providing design file handoff to the development team, and performing Design QA."
Client
Kawasaki
Team
Stakeholders (Kawasaki & KDDI), Business analysis team (6), development team (28), design team (4)
Role
UI/UX Pruduct designer
Tools
Figma, Zeplin, Jira, Adobe Creative Suite, Microsoft, Junction
Location
Worked remotely between Long Beach, California and Tokyo, Japan
Duration
Full-time
7. 2022 - 2. 2023
Kawasaki Workflow
Since there were so many features in the app, I mainly focused on three features and design system in this case study below. Click on each button to view the details of each section.
Information Architecture
I have worked on most of the features in the app. Below are the core features (indicated by the blue highlight in the IA) on which I have worked from beginning to end, and I will present them in this case study.
Add or Change Vehicle
Teams: business analysis team, development team & UI/UX designer Sophie
Duration: about a month
Goal & Challenge
-
The goal was to create a user-friendly and intuitive Select/Change Vehicle feature after the user registered or logged into the app.
-
The challenge was to communicate with the client and push back against some of their non-user-friendly suggestions from a user experience standpoint. The design team worked closely with the business analysis team to cover all scenario cases and error cases by conducting user stories and user flows in line with the client's requests.
Analysis Feature Functions and Requests from the Kawasaki Team
Team member: UI/UX designer Sophie
Overall User Flow from Kawasaki Team
We have received the user flow from Kawasaki team, outlining three scenarios for users to add or change vehicles.
-
If the user is adding a vehicle for the first time, they should proceed to the "Add Vehicle" process.
-
If the user already has one vehicle, they should be directed to the Home screen after logged in.
-
If the user has multiple vehicles, they should also be directed to the Home screen, with the last connected vehicle automatically selected on the Home screen after logged in.
Wireframes from Kawasaki Team
Kawasaki team has also provided us with wireframes containing detailed strings for the design team. (Note: The interface was originally in dark mode due to the previous design being developed in dark mode. I have reskinned it to light mode for improved accessibility design reasons.)
Analyzed "Add Vehicle" User Story and Finalized User Flow
Below is the more detailed user flow for adding a new vehicle, conducted by the BA team. They have also analyzed the detailed steps based on the requests from the Kawasaki team.
-
First time user adds a new vehicle to the account or existing user add additional vehicle to the account.
-
If user doesn't have vehicle paired, show option to pair a new vehicle and option to skip to go to guest mode. If user has vehicle already paired, automatically select the last connected vehicle.
-
Use Bluetooth to communicate with the vehicle, and It enables information acquisition and setting reflection from the vehicle.
-
Last connected vehicle is automatically connected when the app is opened with OS BT turned on and meter BT turned on in-app completion of pairing operations.
-
However, when a vehicle that is disconnected by user operation, it will not be automatically re-connected.
-
Tap on add new vehicle to start the Bluetooth scanning
-
Selecting the device to be paired
-
Enter passkey for first time pairing
-
Pairing with a connected vehicle without the need to enter a passkey
-
In-app completion of pairing operations (How long does this take?)
-
Once vehicle is paired, it could not be observed via BT from another device
-
User can edit vehicle name and year after pairing
-
The last connected vehicle will be displayed at the top of the list screen regardless of the scan result
-
Select vehicle to go to the corresponding home page, both paired/unpaired vehicle can be selected on the select vehicle screen
Final User Flow
Based on all the above information, I have conducted the final user flow, which also includes editing and deleting a vehicle.
Prototypes - First Time Add a Vehicle
Team member: UI/UX designer Sophie
At Station Digital Media, we consistently deliver high-quality UX design to our clients. As a result, our design team creates high-fidelity prototypes specifically for client review. Below is the prototype for the "Add Vehicle for First-Time Users" flow that I conducted.
Edge Cases from Users Pain Points
The BA team and I have also discussed general users' pain points based on our past user research since the company has designed multiple in-vehicle apps. Then, we have conducted edge cases in user stories. All edge cases covered users' pain points when adding a vehicle.
-
When bluetooth and location information is not available
-
Entered VIN number doesn't match any vehicle model
-
No vehicle found
-
Pairing Failed
-
What will happen if tap Back button while pairing vehicle
-
Add same vehicle again with a different phone number
-
Wrong pairing code entered
-
Vin number automatically entered
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
Select Vehicle List
Teams: BA team & UI/UX designer Sophie
Select Vehicle List Design Request from Kawasaki Team
BA team have analysed and organized Kawasaki team's request below.
Purpose:
Select Vehicle screen includes all the vehicles that have been paired previously.
Requirement:
-
Show vehicle model name, VIN number, model year, image and connected status.
-
The last connected vehicle will be displayed at the top of the list screen regardless of the scan result.
-
Tap on "Select" button will go to the corresponding Home screen of the selected vehicle.
-
Tap on "Add Vehicle" will start the pairing new vehicle process.
-
Show option to add a new vehicle
-
Show option to edit vehicle information
-
Show option to connect / disconnect vehicle
Progress of Select Vehicle List Design
Designing the Select Vehicle List screen was quite challenging. I have revised the design four times based on the requests from Kawasaki team and the feedback from dev team. This iterative process has significantly improved the design and made it more user-friendly.
Final Select Vehicle List Design
Below is the approved design. Kawasaki was happy with the final design, but I would keep improving the deletion user behavior. For example, a common user behavior that email apps utilize is a long press on the card to display the delete button.
Connect / Disconnect, Select or Deleted a Vehicle from Select Vehicle List
Teams: BA team & UI/UX designer Sophie
User Stories
The BA team and I have conducted user stories to cover all the scenarios users would encounter, ensuring that they do not experience a dead end on the app.
-
Disconnect a vehicle
-
Connect a vehicle (users can connect an unselected or selected vehicle)
-
Select a vehicle (users can select a connected or disconnected vehicle)
-
Connecting failed
-
Delete a vehicle (users can delete a disconnected, but can't delete a connected vehicle)
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
What to Improve
Team member: UI/UX designer Sophie
I would like to revise the Select Vehicle screen.
-
Rename the header title to "Vehicle List", as it is easier to understand the purpose of this screen.
-
Remove the "Add Vehicle" card and replace it with a bottom sheet button to create more space for the vehicle list.
-
Insert a kebab menu icon on each card. Tap the kebab menu icon to display "Select Vehicle", "Connect Vehicle", and "Delete Vehicle" buttons in a bottom sheet.
Geofence
Teams: business analysis team, development team & UI/UX designer Sophie
Duration: about 3 months
Goal & Challenges
-
The goal was to reskin Geofence (sale support) light mode design to dark mode, following Kawasaki team's specific requests.
-
The challenges were to effectively communicate with the Kawasaki team in order to fulfill their specific requests and ensure their satisfaction, while also adhering to user-centered design principles and ensuring a smooth delivery to the development team.
Geofence Creation and Settings
Teams: business analysis team, development team & UI/UX designer Sophie
The BA team translated the requests from the Kawasaki team and created a Jira ticket for me to follow for the design. I worked closely with the BA team to discuss any design changes or edge cases that needed to be added to the user stories and user flows.
The final revised Geofence design has reduced some functions compared to the old dark mode version. I have also improved the UI design while reskinning to light mode. Below are the primary revisions:
-
Moved "Alert Distance" from "Create Geofence" to the Map view, allowing users to visually measure the geofence range more easily.
-
Removed "Notify Me" (geofence alert) on "Create Geofence" to reduce the development team's workload due to the tight schedule.
-
Replaced the number input with a slider bar for "Radius Size" on "Create Geofence" - "Circle Tool," enabling users to quickly change the radius size.
-
Removed tutorial cards on "Create Geofence" - "Polygon Tool." One popup instruction is sufficient, and it reduced the development team's workload due to the tight schedule.
-
Revised icons for the "Circle Tool" and "Polygon Tool" to enhance user understanding.
-
Retained a single geofence range color on the map to reduce visual complexity.
Below are the finalized user stories and user flows (including the old design in dark mode for comparison with the final design).
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
Geofence Details
Teams: BA teamDev team, UI/UX designer Sophie
I worked closely with the BA team on creating Geofence user stories and user flows. Below are the primary changes from the dark mode version:
-
Removed "Public Geofence", location, and geofence alert as per Kawasaki team's requirements.
-
Removed "Duplicate" from "Geofence Details" as per Kawasaki team's requirements.
Below are the finalized user stories and user flows, including the old design in dark mode for comparison with the final design.
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
Geofence Display
Teams: business analysis team, development team & UI/UX designer Sophie
I worked closely with the BA team on creating Geofence user stories and user flows. Below are the primary changes from the dark mode version:
-
Removed the search bar based on Kawasaki team's request.
-
Revised all geofence ranges to one color.
-
Added a kebab menu, including options to show/hide geofence ranges, locate vehicles, and create geofence CTA buttons, to improve user behaviors and keep the map view clean.
-
Removed "Public Geofence" following Kawasaki team's request.
-
Moved the "Enable Geofence" toggle button to the Geofence "List view" for a better user experience.
Below are the finalized user stories and user flows, including the old design in dark mode for comparison with the final design.
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
Waterfall Geofence
Teams: business analysis team, development team & UI/UX designer Sophie
The business analysis team has translated and analyzed the Kawasaki team's requests for Waterfall Geofence. Essentially, if someone falls into the water, nearby users will receive a waterfall alert and the waterfall location will be displayed on the map. Below are the detailed requirements for Waterfall Geofence:
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
he Kawasaki team was very specific about their branding; therefore, we used the graphics they provided for the icon design, even though it did not meet the standards of good icon design. Nevertheless, we made an effort to ensure our client's satisfaction with our work. Below are the user flows I created:
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
What to Improve
Team member: UI/UX designer Sophie
-
Map view: I would like to insert a search bar on the map to quickly search for different locations and set the geofences.
-
Map view: remove the map range slider bar. Instead, use two buttons to zoom in or out the geofence range.
-
Create Geofence / Edit Geofence: improve the polygon tool to utilize touch screen user behavior for creating the polygon geofence without moving the map and tap the "add button" for each step.
-
Geofence Details: enable the ability to duplicate geofences to save users' time instead of creating a new geofence every time.
-
List view: allow users to delete multiple geofences on the Geofence screen, instead of having to tap into Geofence Details to delete them one at a time.
-
Waterfall geofence: simplify Waterfall Geofence icons to enhance their visibility and clarity.
Poker Run
Team member: UI/UX designer Sophie
Duration: about 3 month
Summary
The Kawasaki team would like to include a little game in the app for users to play while driving the vehicles. The game is a poker run that can have a maximum of 35 players riding to 6 checkpoints or more to collect a playing card at each location. Once all checkpoints are completed, the players with the best hand using 5 cards will win.
Gameplay:
-
Start a poker run game or join an existing game by entering a code.
-
Complete all checkpoints.
-
Choose 5 cards for your poker hand.
-
Cards and winning hands are revealed.
Disclaimer:
A Poker Run is not a race but a game of chance. Only the users with the best poker hands wins.
Pain Points & Requirements from Kawasaki
Below are the old sales support designs and user flows in dark mode for reference, as well as the main pain points I found and the requirements from the Kawasaki team.
Pain Points
-
How it Works (game instructions): it's hard to understand the Poker Combinations.
-
Game Settings: it's better to show a map view of current location, random location or choose location.
-
When can the game host start the game? How can the host know when it's ready to start the game?
-
How many people can play the game? Is there a minimum or maximum number of players?
-
If someone quits the game, will the game continue or stop?
-
If the host left the game, will the game continue or stop?
Requirements from Kawasaki
-
Ride Menu: The Kawasaki team has removed the features "Friends Nearby," "Report," "Share Location," and "Nearby Searching" due to budget constraints.
-
Ride Menu: The SOS alert has been removed from the map to prevent users from mistakenly thinking the game is in distress (SOS).
-
There are more detailed requirements that the business analysis team has translated and analyzed in the following case study.
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
Game Settings: Create Checkpoints, Edit or Delete Game
The business analysis team has translated and analyzed Kawasaki's requirements. Based on their findings, I have created high-fidelity prototypes incorporating both their requirements and sale support dark mode designs.
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
Solutions and Revisions
I have revised the design and user flows to meet the requirements of the Kawasaki team, making it more user-friendly. Here are the main things I have revised and improved:
-
I have added more details with poker hand graphics to the game instructions, ensuring that users can easily understand them.
-
Simplified Game Settings to include only the Game Name and Checkpoint Radius Size.
-
Implemented the use of pin numbers to manage the checkpoints, allowing users to edit them effortlessly.
-
Enabled easy editing and deletion of games from both the game list and game details screen.
Extras
Here are 3 edge cases that are not in the prototypes.
Game Play: Host, Join & Start
Below are the requirements from the Kawasaki team, translated and analyzed by the business analysis team as usual.
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
Solutions and Revisions
Here are the main things I have revised and improved:
-
Created a Game Lobby, similar to Pokemon Go, where users can wait for at least one more player before starting the game. The maximum number of players is 35, as requested by the Kawasaki team.
-
User case: If the game host leaves the game, the game will be canceled.
-
User case: If a player leaves the game, the game will continue, and the player can rejoin the same game or join another game if it hasn't started yet.
-
User case: While the user is playing the game, they can still navigate to other screens of the app, but they can't record trips on the app.
Final Result
Here is the user flow for Game Play initiated by the game host who is hosting a game using a previously saved game. To explore complete prototypes for other use cases, simply tap the link below:
Host a game from previously saved game
Host a game from newly created game
Extras
Here are more Game Play edge cases I have conducted.
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
Create Poker Hand, Game Results & Game Stats
The business analysis team has translated and analyzed Kawasaki's requirements. Based on their findings, I have created high-fidelity prototypes incorporating both their requirements and sale support dark mode designs.
Solutions and Revisions
I have revised the design and user flows to meet the requirements of the Kawasaki team, making it more user-friendly. Below are user flows for Create Poker Hand, Check Game Results and Game Stats.
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
Design System
Team member: UI/UX designer Sophie
Summary
Multiple designers have created dark mode components in the Figma design library. I have taken on the task of revising, organizing, and creating new components in the design library throughout the entirety of the project.
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
Brand Colors & Typography
Components
The components are quite large. I prefer to revise and create components while designing, as this makes organization easier in the end and saves time. The method I used for creating components was in 2021, which was the older approach before Figma introduced a much better way to create components.
Please tap the link below to view the detailed components on Figma.
🔒 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.