top of page

Yamaha - SirenMarine Connected Boat App

Yamaha Logo.png

Our client, Yamaha, has engaged us to merge their two apps, namely Siren Marine and Yamaha Outboards apps, into a single application named "SirenMarine Connected Boat" (referred to as "One App" for simplicity). This unified app will be available for both iOS and Android platforms, as well as for smartwatches.

This project is substantial, as the One App could enable users to add boats, outboards, and connect with Yamaha's Siren Device, offering remote control capabilities to boat owners. In addition to these features, the One App will encompass various other functions, including geofencing, maintenance assistance, the ability to add secondary users to the boat, and more.

The development process was divided into five sprints, covering the entire app creation journey. I joined the project starting from Sprint 2 and remained involved until the app's completion. During this time, I contributed to several core features such as Siren Sensor Details, Siren Settings, Add Products, Secondary User Management, and certain aspects of Account Settings.

At present, we have successfully crafted a demo app for the client's review, resulting in their high satisfaction with the final outcome. The development process involved a number of iterative design phases to refine the app's functionality. The anticipated release for the app is scheduled on both the Apple Store and Google Play App Store in the year 2024.

Client

Yamaha

Team

Stakeholder (Yamaha), Business analysis team (8),  development team (28), design team (5)

Role

Pruduct designer

Tools

Figma, Jira, Adobe Creative Suite, Microsoft

Location

Worked remotely. Offices are in California

Duration

Full-time
2. 2023 - 9. 2023

 Core Features Check List

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.

Yamaha One App IA v3_031023.png
Feature
 Siren Sensor Tile Details & Siren Settings

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

What's Siren Marine Sensors?

Siren Marine Sensors' Smart Boat Monitoring System puts your boat in the palm of your hand 24/7. With add-on wireless and wired sensors, your Connected Boat® system can be expanded for even more robust monitoring, tracking, and security.

I'm proud to have designed the core features of Siren Sensor Details and Siren Settings for their new One App.

hero_familysiren3series-copy.gif

Goal & Challenge

  • The goal was to simplify Siren Sensor Tile Details and Siren Settings.

 

  • The challenge was to combine certain settings from Siren Sensor Tile Details and Siren Settings. The previous app settings were fragmented and complex for users to navigate. Following the revision, users can now conveniently edit crucial settings all in one place.

Siren Sensor Tile Details Reskin

Requirements

We have received a file named "Siren Sensor Tile Details Breakdown" from the old app. This file has been extremely helpful in helping me understand the functions. This understanding will be crucial as we work on reskinning the app for a more user-friendly design. An example is provided below:

Siren Sensor Tile Details Breakdown Example.png

Old and New Design Comparisons

We have received a file named "Siren Sensor Tile Details Breakdown" from the old app. This file has been extremely helpful in helping me understand the functions. This understanding will be crucial as we work on reskinning the app for a more user-friendly design. An example is provided below:

IA.png

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.

Subaru_User Story.png

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.

Reskin
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.

For portfolio.png

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:

Reskin examples.png

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.

Zeplin_Design Files.jpg

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.

QA
 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.

CRs
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:

  1. The message should be displayed above the "OK" button.

  2. The button color should remain the same.

  3. The message should fit inside the button. If the font size needs to be smaller, it is acceptable.

  4. 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.

CRs.png

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:

Design suggestion.png

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:

  1. Turning A/C off with a delayed countdown status.

  2. 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.

Subaru Team Design Options.png

Design Solution:

Here is my proposed design option. This change request will be implemented in the upcoming app release.

SUBP2-138_Station Design Option.png

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:

SUB-2382_Subaru Suggestions_Information Icon.png

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.

SUB-2382_Design Opt1.png

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.

SUB-2382_Design Opt2.png
DesignLibrary
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.

VisualDesign
 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.

Onboarding Options.png

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.