Interchange Relay Portals
🔒 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 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.
TL;DR / Executive Summary
As a product designer at Station Digital Media (2023–2025), I contributed to modernizing Relay, a real-time analytics tool within the Interchange platform, through three key initiatives:
-
Yamaha Siren Connected Boat App
I helped design dashboards and notification analytics tailored to Yamaha’s boating ecosystem. This involved interpreting complex Excel data into actionable UI, aligning with Yamaha’s brand, and delivering insights for both live and push notification tracking. -
Relay SaaS Public Rollout
Collaborating across PM, BA, and design teams, I led onboarding and account settings UX for the self-serve SaaS release. I iterated on 7 versions of onboarding, ultimately simplifying first-time user flows and syncing registration into Interchange’s SSO. I also maintained consistency across flows while adapting designs to shifting scope and dev constraints. -
Design System Overhaul
While designing Relay SaaS, I updated a two-year-outdated Figma library. I reorganized components, introduced categorized pages, documented new patterns (e.g., CTAs, modals), and created scalable assets tailored for SaaS needs—ensuring design QA and handoff clarity across teams.
Impact:
-
Delivered intuitive, self-guided onboarding that improved user activation
-
Enabled a seamless cross-product experience through Interchange
-
Elevated UI consistency and dev efficiency through design system updates
Interchange Relay is a core component of Interchange, Station Digital Media’s suite of digital tools (like Adobe or Microsoft 360, but for connected data insights).
I contributed to modernizing Relay, a real-time analytics tool within Station Digital Media’s Interchange suite, across multiple phases. My work included designing app dashboards for the Yamaha Siren Connected Boat App, leading onboarding and account settings UX for Relay’s 2025 public SaaS launch, and helping update an outdated design system for better scalability and consistency.
Through 7 onboarding design iterations, collaborative whiteboard sessions, and continuous QA, I helped transform Relay into a more intuitive, self-serve platform—supporting both internal stakeholders and first-time SaaS users.
Client
Station Digital Media
Team
Stakeholder - Station Digital Media CEO, Project Manager (1), Business analyst (1), Design Team (3)
Role
UI/UX product designer
Tools
Figma, Jira, Adobe Creative Suite, Microsoft 365
Location
Long Beach, CA
Duration
Full-time
9. 2023 - 5. 2025
Table of Content
Click each section to view its details.
Goals, Challenges & Solutions
Goals
The goal was to modernize Relay’s user experience and make it accessible to a broader audience—from data-heavy internal users to everyday subscribers. My work involved:
-
Updating legacy designs to meet modern standards and brand alignment
-
Creating clear, actionable analytics dashboards for Yamaha’s Siren Connected Boat app
-
Simplifying onboarding and account flows to support the public SaaS rollout
-
Ensuring seamless data integration and visual consistency across Interchange tools
Challenge & Context
The biggest challenge was balancing specialized analytics—revamping legacy designs while creating new pages for the Yamaha Siren Connected Boat app (like sensor data, user sessions, and boat brand tracking). A year later, Relay was transitioning from a complex internal tool to a public SaaS platform, requiring me to create a simplified onboarding experience for broader audiences.
Another layer of complexity was coordinating across the Interchange tools (like integrating data from Conductor into Relay) to ensure a cohesive UX. Finally, I needed to update the old Figma-based design system without impacting previous projects—modernizing it while still maintaining historical context.
Solutions
-
For the Relay dashboard of Yamaha - Siren Connected Boat app : The project director shared wireframes and data that I used to design the core Relay pages—focusing on clear, easy-to-use interfaces.
-
For the SaaS onboarding experience: I performed competitor research and mapped out user flows to ensure the experience was intuitive and accessible.
-
For Interchange tool coordination: I translated Excel data into visual designs and worked closely with PMs and devs to ensure everything flowed together.
-
For the design system update: I created new components for the latest design work while retaining and labeling old components with “do not use” notes—ensuring future design consistency and minimizing confusion for other designers.
-
Additionally, I conducted multiple design QAs in Jira to make sure everything was user-friendly and aligned with brand consistency.
Part 1: 2024 Yamaha Siren Connected Boat Extension
Project manager Braden, BA Trisha & UI/UX designers Sophie
Overview
Relay is one of the core tools within Station Digital Media’s suite, offering live app performance tracking, easy-to-use KPI dashboards, user behavior mapping, API performance analysis, funnel analysis, and more—across devices and platforms.
In 2024, Station Digital Media proposed using Relay for the Yamaha Siren Connected Boat app. Collaborating with project manager Braden, I helped design the core dashboard experiences for Relay, which we presented to the Yamaha team within a month in September 2023. Our work paid off: the Yamaha team chose to integrate Relay into the Siren app, and later, in October 2024, they signed another contract to create the Relay+ Conductor page—enhancing their notification tracking capabilities.
Notably, this was our first time designing a dashboard specifically for a boat app, which required us to rethink conventional vehicle analytics to align with real-world boating workflows. We conducted extensive research and carefully analyzed Yamaha’s unique requirements to craft a clear, actionable dashboard design ready for development.
My key responsibilities included:
-
Designing and iterating on the interface based on Yamaha’s feedback and evolving needs.
-
Conducting competitor research on AI-generated dashboards to inform Relay’s future development and expansion.
-
Keeping our designs practical, consistent, and aligned with Station Digital Media’s brand direction.
Goal
The goal was to make the Siren Connected Boat App compatible with the Relay dashboard, like other in-vehicle app dashboards we have developed.
Challenge
The primary goal was to seamlessly integrate Relay’s advanced dashboards into the Siren Connected Boat App, aligning it with the high standards we had set for other in-vehicle dashboards. Beyond this, I was also tasked with creating the Relay+ Conductor page within Relay to track and analyze notifications—delivering clear, actionable insights that supported both real-time operational needs and future growth for Yamaha.
Requirements
For the presentation in September 2023, we needed to design five core screens:
1️⃣ Live (Home)
2️⃣ User Analytics
3️⃣ Siren Analytics
4️⃣ Outboard Analytics
5️⃣ Boat Brand Analytics
For the new feature—Relay + Conductor—I was responsible for designing the email notification and push notification analysis features in October 2024.
We received a wealth of documents from Yamaha, which the BA team distilled into detailed Excel sheets that I used as my main data reference. The documents themselves were highly technical, requiring careful interpretation to decide which key data points would be most valuable for the dashboards. Because of the sheer volume of information, I’ve only included a few critical examples and Jira tickets in this case study to illustrate my design process.
1. Dashboard Design 2023
9 - 1 - 2023
To help guide the layout and UX, Braden—who was already very familiar with Relay—provided me with wireframes that offered a strong starting point and ensured that my designs aligned well with Relay’s existing standards and flows.
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
Design Insights
Using all the requirements, materials, and the existing Relay design library, I created the core screens for the Yamaha Relay dashboards. The requirements were fairly straightforward, which allowed me to move quickly through the design process—only a few rounds of revision were needed to get final approval from the Yamaha team.
Throughout the process, I included relevant design requirements and reference materials in my Figma files to make it easier for the team to review and provide feedback. Below, I’ve shared a couple of examples of these design revisions and the supporting materials that guided the final outcome.
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
Final Design
Below are the final designs for the presentation, approved by the Yamaha team.
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
2. Relay + Conductor – Notification Analytics pages for Yamaha
10 - 7 - 2024
Following the success of the core B2B Relay dashboard, Yamaha extended their contract with Station Digital Media in October 2024 to develop a new notification analytics feature. This new dashboard—designed specifically for the Yamaha Siren Connected Boat App—was built within Relay, using Conductor (another Interchange tool) as the backend system for managing both email and push notifications.
I continued my collaboration with PM Braden and BA Trisha to design the Relay + Conductor page, which would visualize key notification performance metrics like send rate, open rate, tap-throughs, and conversion funnels.
My Process
-
Initial Requirements & Setup:
I received a high-level feature outline early on, which helped me begin exploring how to reskin and adapt the existing Mazda/Yamaha layouts. I updated visual components, phone mockups, and text to match Yamaha's brand and tone.
-
Data Translation & Wireframing:
Once Trisha added detailed documentation to Jira, I translated the structured campaign and funnel data into a visual format on Figma. Braden also provided me with a rough wireframe and Excel-based performance metrics. Since the wireframes weren’t fully clear, we held multiple working sessions to walk through expectations, user actions, and page logic together.
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
-
Iterative Design & Cross-Team Syncs:
With evolving requirements and tight timelines, we ran daily syncs to quickly respond to scope changes, validate data assumptions, and ensure alignment across PM, BA, and design. This allowed me to iterate rapidly—design, review, revise—until we reached a polished version approved for dev handoff.
Final Outcome
The final Relay + Conductor design delivered:
-
Separate views for Lifecycle vs. Campaign notifications
-
Full email and push funnel visualizations
-
Easy comparison of KPIs like Open Rate, CTR, and conversion
-
App screen previews contextualized for each notification
We successfully completed the project in under a month. Despite incomplete source data and shifting requirements, close collaboration and flexible iteration made it possible. Yamaha was very satisfied with the final dashboard.
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
Part 2: 2025 Relay SaaS Public Rollout
Project manager Braden, BA Trisha & UI/UX designers Sophie
Goal
To transform Relay—originally a complex internal analytics tool—into a simplified, self-serve SaaS platform under the Interchange suite. This public-facing version needed to support individual users with intuitive registration, onboarding, and account management, while aligning with Interchange’s shared single sign-on (SSO) system. I was responsible for designing:
-
Sign In & Sign Up Flows (later merged into Interchange SSO)
-
First-time user onboarding
-
Account Settings (self-serve: profile, plan management, preferences)
Challenges & Context
Station Digital Media decided to transition the Interchange platform (7 products, including Relay, Conductor, and Kintaro) from enterprise-only use to a subscription-based model accessible to individuals and small teams. This strategic pivot was driven by two key factors:
-
Business Pressure: With fewer leads from KDDI (our parent company in Japan) and a challenging U.S. economy, we needed a scalable growth engine.
-
Usability Gap: Most Interchange tools required significant hand-holding. To open them up to the public, we had to rethink the UX from the ground up.
While the shift presented a major business opportunity, it also came with UX and production hurdles:
-
Requirements and IA were changing frequently mid-design.
-
Development teams were constrained and unable to support a redesigned UI framework.
-
The initial design proposals (landscape layout, fresh UI) had to be scaled back to work within legacy constraints.
-
Three Designers responsible for pushing Q1 of Relay SaaS from concept to developer handoff under tight timelines.
My Process & Solutions
1. Designed Around Legacy Constraints
To balance innovation with feasibility, CEO required the design team initially proposed a fresh, modernized layout based on UI trends and competitor analysis. However, once engineering flagged timeline risks, I quickly pivoted to reuse components from the legacy Relay design library—ensuring faster production while still improving UX clarity.
2. Simplified IA for Self-Serve UX
In response to feedback that the full feature set was overwhelming for first-time users, I collaborated with PMs and BAs to restructure the information architecture. We prioritized a minimal, guided experience optimized for trial users, hiding advanced tools behind upgrade triggers.
3. Delivered Key Flows for First Release (Q1)
-
Registration & Sign-In: Designed clean, accessible flows for individual users. Later adapted for Interchange’s unified SSO system.
-
Onboarding: Created a step-by-step guided experience that introduced key platform features without overwhelming the user.
-
Account Settings: Built scalable modules for profile, usage preferences, and plan management (to support future billing logic).
4. Navigated Ambiguity & Shifting Scope
I worked closely with BAs and PDs to clarify evolving requirements. For example, wireframes and Jira specs often arrived incomplete or late—so I proactively scheduled working sessions to confirm logic and user flow dependencies.
Workflows, Schedule, and Initial Requirements Draft
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
First Design Draft: From Legacy to a More Streamlined Relay SaaS
With the initial requirement draft in hand, our team began redesigning Relay SaaS using the existing Relay product as a foundation. We used Mazda as a sample client reference to illustrate expected use cases and analytics depth. Early on, the CEO emphasized the need to give Relay a fresh, modern look to better appeal to a wider user base beyond internal enterprise clients.
Note: Click on the image to view it in a larger size.
In response, I explored current UI trends and competitive benchmarks, quickly producing a new landscape-style layout within a week. This approach aimed to modernize the interface and elevate the user experience with a more open, visually digestible structure.
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
However, during early design reviews, the development team flagged concerns about the limited timeline—they would not have the bandwidth to implement a brand-new layout style. Due to those constraints, we were directed to retain the visual foundation of the legacy Relay interface for this public SaaS release.
Despite these limitations, the first design review proved to be a pivotal moment. Both the CEO and cross-functional teams agreed that the original feature-heavy design felt overwhelming—especially for first-time users. This sparked a collaborative discussion about simplifying the platform’s information architecture to prioritize usability and onboarding clarity.
As a result, we iterated significantly on the structure of Relay SaaS. We reduced visual noise, prioritized essential features, and tailored the navigation flow for easier self-service. The final IA structure now supports a more intuitive entry point for new users, improves business onboarding conversion, and scales better with the subscription-based model.
This experience taught me that while great design starts with creative exploration, adaptability and alignment with technical feasibility and business needs are key to shipping successful products.
Sign In & Sign Up Flows: Balancing Product Vision with Platform Constraints
In the early planning stages of Relay SaaS, I initially proposed a unified registration and sign-in flow across all seven Interchange platform tools—similar to how it functioned in the current system. This would simplify access for users and maintain consistency across tools. However, the CEO envisioned a more product-specific entry model, akin to Atlassian or Microsoft 365, where each tool (like Relay) would have its own branded login experience. This approach also made sense from a user engagement and product identity perspective.
In response, I designed dedicated user flows for Relay’s registration and sign-in, factoring in onboarding flexibility and user scenarios specific to Relay’s SaaS model. I also included edge cases, error handling, and component logic to support self-service access.
Midway through, the development team flagged the technical and timeline constraints—ultimately deciding to consolidate all sign-in and registration through the Interchange platform’s existing unified access point. Although my Relay-specific flow was not implemented in full, the design proved valuable. The designer who working on Interchange portal later repurposed my work to improve the main platform-wide registration and sign-in experience.
This scenario reflected a common challenge in cross-timezone collaboration. The product, design, and business teams in California were not fully aligned with the dev team in China before handing off the initial requirements—causing late-stage pivots. While not ideal, I adapted quickly and preserved design integrity across both solutions.
My Design Process
-
Conducted competitive research on modern SaaS onboarding models and authentication patterns
-
Identified UX trends for smoother self-serve onboarding
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
-
Delivered:
-
A clean and intuitive sign-up/login flow tailored for Relay SaaS
-
Screens for all core use cases, including success, error, and fallback states
-
Updated and created components in the Figma design system
-
Despite the shifting implementation strategy, I completed the entire flow within two weeks, ensuring devs had detailed UI references and flows that could scale beyond Relay and benefit the broader Interchange platform.
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
Onboarding Flow
Challenge & Context
The onboarding flow for Relay SaaS underwent the most iteration across the entire product design due to technical constraints reported by the dev team and usability concerns identified during internal testing.
Originally, the PM and BA teams envisioned a 4-step onboarding sequence—heavily inspired by AppBot—which included:
-
Add App
-
Add Social Media
-
Set Levels
-
Set Alerts
However, Relay's platform logic and SaaS portal structure made this structure feel bloated and out of sync with the product’s actual user journey. Despite the inspiration source, Relay required a more tailored and streamlined approach.
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
My Role
I was responsible for translating these high-level requirements into tangible onboarding flows that balanced:
-
Business goals (highlighting value early)
-
User clarity (avoiding drop-off or overwhelm)
-
Technical feasibility (within tight release timelines)
Collaborative Process & Iteration
-
Delivered 7 rounds of onboarding design drafts, each reviewed by cross-functional teams.
-
Partnered closely with PMs, BAs, and dev team to assess friction points and implementation feasibility.
-
When handoff misalignments occurred (e.g. over-scoped flows or unclear expectations), I worked proactively to revise the designs within 1–2 days based on new feedback.
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
Whiteboard Collaboration
Before finalizing the onboarding flow, we held a collaborative whiteboard session to gather enhancement notes from both the design and dev teams. This working session allowed for:
-
Live clarification of technical blockers
-
Alignment on simplified logic for “Add App” and edge cases
-
Real-time brainstorming on welcome screen sequencing and notification handling
This session played a key role in accelerating convergence and smoothing out miscommunications.
Note: Click on the image to view it in a larger size.
Finalized Experience (April)
The final onboarding flow was much more streamlined and user-friendly for first-time users. Since Relay’s registration was eventually merged into the Interchange portal, I adjusted the flow accordingly.
-
Relay Intro Slides (x3)
-
Introduced Relay’s core value props and features using bold, visual slides to set expectations.
-
-
Add App Flow
-
Users connect their app(s) through App Store / Play Store links.
-
Clear edge case handling: wrong links, validation errors, and confirmation states.
-
-
Loading State / Syncing Data
-
Visual loading experience builds user confidence while app data is fetched.
-
-
Dashboard Auto-Onboarding
-
Contextual tooltips and walkthrough elements greet the user in the dashboard to highlight key modules and features.
-
Result
This onboarding flow improved time-to-value for users, reduced setup friction, and created a more polished SaaS entry point. It was also future-proofed for expansion and deeper self-serve capabilities across the Interchange ecosystem.
Account Settings
Overview
My Account Settings was a key part of the Relay SaaS experience, focused on enabling self-service configuration for users managing their profiles, subscriptions, and applications. Two designers were assigned to this area—I led the design for both App Management and the Account Settings page.
Scope of Work & Contributions
-
App Management
I reused elements from my earlier onboarding design to accelerate delivery. The structure was already tested and familiar, which allowed me to quickly build a flow that supported core actions like connecting apps, managing integrations, and verifying platform data—all optimized for speed and clarity. -
Account Settings
This section was intentionally kept clean and minimal. The goal was to provide users a straightforward space to update their:-
Profile information
-
Email preferences
-
Team visibility
-
Subscription settings (for Phase 2)
-
Component Consistency & Design QA
During the handoff and design QA process, I noticed inconsistencies in button styles and text casing across the platform:
-
Some CTAs used lowercase (e.g., “Save changes”), while others were capitalized (e.g., “SAVE CHANGES”).
-
Although we had a shared button component, it lacked variants for all the new use cases in Account Settings and other upcoming flows.
My solution
-
I created new button components specifically for CTA actions with fully capitalized labels, aligning with both accessibility best practices and our emerging visual identity.
-
Rather than alter the original component and risk breaking existing UI, I documented the changes and synced with the other designer and our design lead to ensure consistency across all shared files.
Outcome
These updates helped:
-
Deliver a clean, consistent, and intuitive user experience across the Account section.
-
Reduce engineering confusion during handoff by minimizing visual and interaction inconsistencies.
-
Establish stronger component governance practices within the design team for future scalability.
Part 3: Design System
UI/UX product designer Sophie
Relay design library was outdated for over 2 years. I have re-organized and revised it while designing Yamaha Relay dashboards.
Old Design Library
When I joined the Relay project, I quickly discovered that the existing design library had not been updated in over two years. It lacked structure, consistency, and scalability—creating friction for both designers and developers.
Issues in the Old Design Library
The library was originally built for enterprise use cases, but it hadn’t evolved to support modern SaaS requirements. A few key issues I identified:
-
Inconsistent Icon Management:
Many icons were missing from the designated Icons page, and the naming conventions were unclear, making it time-consuming to locate assets. -
Overloaded Graph & Form Components:
Components were overly complex, packed with variations that were rarely used. This clutter made it difficult to identify the correct usage for charts, graphs, and form elements. -
No Clear Categorization:
Components weren’t grouped logically—buttons were scattered across files, and modals were duplicated with slight differences.
Note: Click on the image or arrow to view it in a larger size or to see more slides below.
My Contribution to the Relay Design Library
As part of the Relay SaaS transformation, I led a major overhaul of the outdated Relay design library to improve usability, scalability, and team alignment. My key contributions included:
-
Reorganizing Component Structure:
I broke down overly large, cluttered groups of components into manageable, modular sets. Each set was grouped by function (e.g., inputs, charts, modals, selections) to make the library more intuitive and maintainable. -
Creating Logical Page Categories:
To improve navigation, I introduced clearly labeled Figma pages for each component type—such as Buttons, Dropdown & Inputs, Typography, and Icons—allowing designers and developers to quickly locate and reuse assets. -
Adding New Components for SaaS Needs:
While designing for Relay SaaS, I created and documented numerous new components including tooltips, onboarding banners, plan upgrade prompts, and locked-state UI elements to support free trial and paywall flows. -
Improving Consistency:
I standardized typography and button styles—ensuring CTAs were consistently capitalized and visually aligned across flows. I also created new button variants when necessary, without disrupting existing components. -
Collaboration & Handoff Support:
I synced closely with fellow designers and the design lead to ensure everyone was aligned on naming conventions, usage patterns, and component updates—enabling smoother dev handoff and QA processes.
Password: xing
Key Outcomes & Impact
UI/UX product designer Sophie
-
Elevated Visual & Functional Consistency:
Redesigned and delivered a robust, scalable UI component library that improved visual clarity, enforced design standards, and reduced developer guesswork—laying the groundwork for faster future iteration. -
Streamlined First-Time User Experience:
Revamped the onboarding flow across seven design iterations, transforming a complex, technical setup into an intuitive, self-guided experience—helping position Relay as a more accessible, competitive SaaS solution. -
Reinforced Cross-Product Unity within Interchange Platform:
Aligned Relay SaaS with the broader Interchange ecosystem by supporting shared components, visual cohesion, and unified UX patterns—enhancing both brand recognition and cross-tool usability.
What I Learned
UI/UX product designer Sophie
-
Designing for Clarity Without Compromise
I learned how to strike the right balance between presenting complex, real-time analytics and maintaining an interface that feels intuitive for first-time users—especially within a newly productized SaaS experience.
-
Staying Agile in Shifting Environments
The project required frequent pivots, including major changes like unifying Relay’s login into Interchange’s SSO. I learned to adapt quickly—maintaining design quality while aligning with evolving technical and business constraints.
-
Driving Alignment Across Distributed Teams
This was a crash course in cross-functional collaboration. I worked closely with project managers, business analysts, developers in different time zones, and external stakeholders like Yamaha to keep designs cohesive, accurate, and practical—despite tight timelines and changing requirements.
What to Improve
UI/UX product designer Sophie
-
Earlier Alignment Between Stakeholders and Dev Teams
Many design revisions were driven by misaligned expectations between product, design, and engineering. Earlier collaboration—especially around feasibility and timelines—could have prevented backtracking and streamlined the design process.
-
Clearer Information Architecture Upfront
The IA was frequently revised mid-design, which caused confusion and delays. A more finalized structure—approved by all teams before design began—would have reduced churn and helped deliver a more focused MVP.
-
Improved Validation Through User Testing
Due to time constraints, we relied heavily on internal feedback and assumptions. Incorporating even lightweight usability testing earlier in the process could have helped validate onboarding clarity and identify friction points more confidently.
-
Stronger Design QA and Version Control
Inconsistencies like button casing and component usage emerged due to multiple designers working simultaneously. Establishing stricter version control, clearer documentation, and more frequent design QA checkpoints would have enhanced overall cohesion.
🔒 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.