top of page

Yamaha - Siren 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 "Siren 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.

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 February 2024.

Client

Yamaha

Team

Stakeholder -Yamaha (20+), Business analysis team (8),  development team (20+), design team (4)

Role

UI/UX product designer

Tools

Figma, Jira, Adobe Creative Suite, Microsoft Office 365

Location

Long Beach, California & Remote

Duration

Full-time
2. 2023 - 12. 2023

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

Yamaha One App IA v3_031023.png
Siren
 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

Here are a few examples of old and new design comparisons with pain points and solutions below.

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

Prototype

Here is the prototype of Siren Sensor Tile Details design.

AddProducts
Add Products

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

Goal & Challenge

  • The goal was to design an easy, smooth and user friendly "Add Products" user flow, including a siren device and outboards, covering all error cases and edge cases.

  • The challenge: 
    Since the Yamaha team wanted to combine both of their apps (SirenMarine app & Yamaha Outboards app) into one app (Connected Boat app), it requires the app to be able to add both Siren devices and outboards, which introduces many scenarios and edge cases.










    Based on our research, users can add products from two entrances: the Home screen and the Account screen. Therefore, we explored 6 scenarios.

  1. Add Siren device from Home

  2. Add Outboards from Home

  3. Add Siren device for the first time​ from Account

  4. Add Siren device with/without boats from Account

  5. Add outboards for the first time from Account

  6. Add outboards with/without boats from Account

App Icons.png

Old App Designs

Below are a couple of screenshots of the "Add Product" flow from the old Sirne Marine app and the "Add Outboard" flow from the Yamaha Outboard app. My challenge is to combine both flows into one app.

Old Siren Marine App - Part of Add Product Flow

Siren_Add Product.png

Yamaha Outboard App - Part of Add Outboard Flow

Old Yamaha Outboard App_Add Boat.png

The old apps belonged to Yamaha Company, but they had two different design styles, making them appear as if they were developed by two distinct companies. Specifically, the Yamaha Outboard App included a technical outboard flow that was challenging for non-experts in boating to comprehend. Our objective is to merge and redesign the product's flow to be user-friendly and easily understandable. We aim to enable users to navigate through all the steps seamlessly, incorporating excellent branding design.

Add products Procedures

Business analysis team and design team reviewed the current Siren Marine app and Yamaha Outboards app to analyze the process of adding products. Following this, BA team confirmed the procedures with the Yamaha team. The design team then developed hi-fi UI design and user flows based on these procedures.

Yamaha _Add Products.png

Scenario 1: Add Siren Device From Home

Based on the current app research and add product procedures list, I have created a quick user flow by Draw.io.

Yamaha_User Flow_Add Siren.png

I have created a detailed hi-fi UI user flow, including edge cases and error cases based on the user flow.

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

Scenario 2: Add Yamaha Outboards From Home

Based on the current app research and add product procedures list, I have created a quick user flow by Draw.io.

Yamaha_User Flow_Add Outboard.png

I have created a detailed hi-fi UI user flow, including edge cases and error cases based on the user flow.

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

Scenario 3: Add Siren device for the first time​ from Account

Based on the previous 2 scenarios, the BA team has created the UI transition diagram, along with Yamaha team's requests (I also included my notes in the requests), for me to reference and create the user flow.

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