Role:
- Principal Product Designer
Customer(s):
- Architects & Developers
Skills:
- Design leadership
- User experience research
- User experience design
- User interface design
- Light Theme & UI design
- Cross functional collaboration
- Team coordination
- Global teamwork
Tools:
- Design thinking
- Paper Prototyping
- Sketch
- Zeplin
- Slack
- Notion
Audience: Who is it for?
- Product Owner
- Software Architect
- Backend Developer
- Frontend Developer
- DevOps Engineer
- Data Consumer
- Data Scientist
Solution:
- Web-based application
- User authentication
- Domain connection(s)
- Real-time access
- Network monitoring
- Situational awareness
- Entity inspection
- Entity inventory
- Entity data tracing
- Entity root Cause Analysis
Nstream Jet — Designing a Frictionless Real-Time SaaS Product from the Ground Up
Nstream Jet is a Beta* released web UI SaaS product that empowers developers, architects and teams to build and launch real-time streaming applications in minutes—not months. As the principal product designer, I worked closely with the technical founder, engineering and stakeholders to shape a scalable, intuitive interface on top of a powerful streaming engine.​​
​​​
Structure
Each project in this portfolio follows a clear, outcome-driven structure rooted in design thinking and product strategy. From uncovering the problem to delivering results, this format showcases how I approach complex challenges, collaborate across disciplines, and create meaningful impact through thoughtful, scalable design.​
A clear way to tell this story
​I adopted a proven simplified framework—Context, Problem, Approach, Output, Outcome—because it offers a clear, intuitive way to communicate the full arc of a project without overwhelming the viewer. In a portfolio, clarity and structure are key. This framework distills complex design work into digestible sections that mirror how product and design teams think: beginning with the why, moving through the how, and ending with the impact. It also complements design thinking by surfacing insights, actions, and results in a linear, story-driven format that invites readers to engage deeply with the project while staying grounded in real-world outcomes:
​
-
Context
-
Problem
-
Approach
-
Output
-
Outcome
​
Each of my projects follows a structured yet flexible storytelling structure and design thinking approach, tailored to the problem space and the needs of the users. This framework not only helps organize my process for clarity, but also showcases how strategic thinking, rapid iteration, and cross-functional collaboration come together to deliver meaningful outcomes. Below, you’ll find a breakdown of how the work unfolded—from understanding the challenge to delivering real-world impact.​
​
​
Context
​
Why did this project start? What was the initial hypothesis or business driver?
​
Every project begins with a unique set of circumstances, constraints, and ambitions. This section outlines why the project was initiated, who it was for, and what hypotheses or goals shaped the early thinking.​​​
​
Opportunity to reduce onboarding friction, increase adoption
​
Before Nstream Jet, building applications on top of real-time streaming data was a complex, code-heavy process accessible primarily to Fortune 500 companies with dedicated engineering teams. Despite having powerful underlying technology, Nstream struggled to drive broader adoption beyond these large enterprises. Developers often found the command-line-only experience difficult to learn, integrate, and scale within modern app workflows.
​
There was a clear opportunity: create a faster, simpler, and more visual way to build streaming applications—one that opened the door to mid-sized tech teams, startups, and innovation groups. Internally, Nstream leadership hypothesized that by delivering a low-code, web-based UI with a guided experience, they could significantly reduce friction and lower the barrier to entry for app development on live, continuous data.
​
Jet was born from this vision: to become the fastest way to build real-time streaming apps, turning what used to take months into minutes. This project marked a strategic pivot—not just a tool, but a product-led growth opportunity for Nstream to transform their go-to-market approach and drive user adoption through design.
​​
Problem
​
Why did this project start? What was the initial hypothesis or business driver?
​
Every project begins with a unique set of circumstances, constraints, and ambitions. This section outlines why the project was initiated, who it was for, and what hypotheses or goals shaped the early thinking.​​​
​
Unmet Need: Real-Time Data Clarity
Meeting the unmet needs of potential and existing customers has always been my focus. Leveraging existing and innovative technology in creative and new ways, to solve these customers wicked problems.
​​
Building real-time applications is notoriously difficult
​​
Building real-time applications is notoriously difficult—even for advanced engineering teams. Before Jet, the Nstream platform was powerful but complex, requiring a deep understanding of distributed systems, entity modeling, and CLI workflows. Developers needed weeks or months to spin up meaningful prototypes. This severely limited adoption beyond the most technically sophisticated Fortune 500 teams.
​
Despite increasing demand for real-time capabilities across industries—from logistics to finance to manufacturing—the tools weren’t keeping up. They were fragmented, opaque, and highly specialized. There was no accessible, productized way for small teams or startups to tap into the benefits of continuous, real-time data without a heavy investment in infrastructure and training.
​​
This wasn’t just a usability issue. It was a wicked problem—deeply complex, with constantly shifting requirements, and deeply tied to the cognitive load, onboarding friction, and knowledge silos present across most modern engineering orgs. We weren’t just solving for a faster UI. We were tackling a systemic issue: how do we make real-time technology usable, visible, and scalable for every developer—not just elite teams?
​
Developers were stuck in a slow, complex loop
​
Even with a powerful back-end, building with Nstream involved:
​
-
High development overhead and steep learning curves
-
Fragmented tooling and isolated workflows
-
No visual layer for exploring entities and streams
-
CLI-driven deployment and zero live preview
-
Painfully slow time-to-first-value
​
Put simply: no one could see what was happening in their system—in real time, in context, or in a way that made sense. That lack of visual feedback and intuitive interaction meant lost momentum, failed onboarding, and product friction at every turn.​​​
​​​​
The actual unmet need, real-time clarity sooner than later
​​
As one developer mentioned, ...
“I want to understand and interact with my streaming data in real time—visually and immediately—without writing 1,000 lines of code or waiting weeks for infrastructure.”
​
This deeper insight to the actual customer's unmet needs was a game changer.
​
Despite the rise of cloud-native tools and data streaming platforms, teams still spend weeks or months stitching systems together before they can even see results—especially for applications requiring low-latency data or real-time user interaction.
​
Here lies massive opportunity to not only solve a wicked problem, but potentially create and define the standards for a new market. ​​
​
*Nstream Jet is a Beta release SaaS product that is no longer available or accessible as Nstream the company closed it's doors on March 1, 2005.
Role:
- Principal product Designer
Skills:
- Design leadership
- User experience research
- User experience design
- User interface design
- Light Theme & UI design
- Cross functional collaboration
- Team coordination
- Global teamwork
Approach​
​
What process or framework did we use? How did we collaborate across teams? Did we involve the customer early and often?
Great solutions start with thoughtful processes. In this section, I walk through my design thinking approach—how I gathered insights, collaborated with stakeholders, and iterated toward a solution. What is the goal?
​​​
Goal: Understand & Interact With Your Data
​​
This deeper insight reframed our mission. Instead of optimizing for CLI power users, we needed to design for speed, clarity, and experimentation. We needed to deliver:
​
-
A visual mental model of live stateful entity behavior
-
A guided, low-friction entry point to build and explore
-
A fully production-ready UI, not just a developer sandbox
-
A way to iterate on real-time systems like you would a static web app
​​
The challenge wasn’t just technical—it was experiential. Developers couldn’t “see” what they were building. They couldn’t prototype in context. And they couldn’t iterate fast enough to match the velocity of live data. Jet had to eliminate that gap. Design thinking is a mindset and iterative process. The structure of this case study is a storytelling framework.​ ​So we set out to build a streaming-first UI—a true SaaS product experience that bridged the gap between data and design, system and surface, real-time and readiness. Something that would unlock the true promise of the Nstream platform by making it usable, flexible, and immediate.
​
The unmet need wasn’t another dashboard—it was live, visual, continuous development for real-time systems.
​
Process: Design Thinking
How do we leverage the design thinking process?
​​​​
We approached the challenge of building streaming apps in minutes—not months using a Design Thinking framework to ensure we stayed human-centered and solution-oriented at every stage. Here's how we applied it:​
​
-
Empathize - we spoke with developers, product teams, and engineering leaders struggling with real-time application development. We listened to their frustrations—CLI complexity, cost overhead, tool fragmentation, and lack of visibility into live data workflows.
-
Define - we framed the core problem: "How might we help developers and teams rapidly prototype and launch production-grade streaming apps—without requiring deep infra knowledge or weeks of setup?"
-
Ideate - through cross-functional workshops with Fortune 500 companies, we brainstormed bold yet feasible ideas—focusing on simplicity, visual feedback, and real-time observability.
-
Prototype - we designed and shipped early wireframes and click-through flows that reimagined streaming UI development as a guided, declarative experience—surfacing logs, metrics, and outputs in seconds.
-
Test - we validated with early adopters from enterprise and startup teams, rapidly iterating on usability, onboarding flow, and developer ergonomics to eliminate friction and maximize speed-to-build.
​
By grounding our approach in Design Thinking, we turned a technically complex product space into a human-centered, elegant experience—one that empowers users to build fast, see fast, and iterate faster.​
​
-
Design thinking is both a strategic and practical process
-
Design thinking can be applied by all teams and groups
-
Human-centered design drives our technology and products
-
Leverage the Nstream Platform and existing entity model
-
Focusing where customer unmet needs meet (overlap) Nstream Platform
Collaborate across teams in the U.S., U.K., EU and India
​​​​
We collaborated as an international design and engineering team spanning the U.S., U.K., EU and India — seamlessly aligning across time zones to bring the Nstream vision to life. Our cross-functional effort combined product design, front-end development, and platform engineering to prototype, validate, and deliver a real-time, ultra-low-latency experience tailored to rapid streaming app deployment. This global collaboration was critical in turning a bold concept into a working product with SaaS-grade performance.
​
Personas: Architects & Developers
​
​​Let's move on to the people, technology and business aspects of this process. At the venn diagram overlap of these three aspects (circles) we will find our opportunity for market share and revenue.​​​​
​​
Engage and empathize with developers and architects
​
Customer desirability (actual need) is the beating heart of any successful product.
For Nstream, the need was clear: developers were eager to work with real-time data, but existing tools made building streaming applications feel like assembling a rocket ship just to send a text. They wanted something faster, simpler, more intuitive—something that gave them a head start rather than more headaches. The platform’s early strength in serving Fortune 500s had not yet translated into broader adoption, in part because the entry point was steep, complex, and unintuitive.
​
Jet began with this core question: What if building real-time applications could be as fast as your data?
​
We started with deep listening. Through interviews, live whiteboard sessions, and internal user feedback, we homed in on the developer experience gap—the moment a builder opened their terminal and quickly realized they needed three services, a new mental model, and a lot of time to just get “Hello, World” from live data.
​
Interview and explore the actual user experience
​
Once we aligned on our primary persona—developer architects building on real-time data—we dug into their first 30 minutes: what they needed to see, learn, and do to feel momentum. This defined the core experience we’d optimize for:
​
Primary Actions – Streamlined Developer Flow
​
-
Spin up a real-time app with minimal configuration
-
See live data flowing instantly into a dashboard
-
Model entities visually—no code, no delays
-
Export and deploy easily to scale
​
Secondary Actions – Frictionless Iteration
​
-
Connect to different data sources
-
Configure entities and stream transforms
-
Preview UI components in real time
-
Share previews with collaborators
​
Tertiary Actions – Power User Tools
​
-
Access CLI options or raw config
-
Integrate with observability tools
-
Sync live apps with Git workflows
​
These early developer and architect interviews provided invaluable insight into what would eventually become the core user journey and experience for Nstream Jet. User needs are only a part of the equation, we also need to understand the capabilities and potential limitations of any technology that wil be utilized to solve this in demand problem.
​
Leverage the Nstream platform's feasibility​​
​​
Feasibility is often where good ideas go to die—but not here. The Jet project was powered by the Nstream Platform, which sits atop SwimOS and delivers a powerful foundation for building and scaling real-time, continuous intelligence applications. We leveraged this backend strength to abstract away complexity, letting the UI guide builders instead of forcing them to reverse-engineer an architecture.
​
With Jet, developers didn’t need to know about lanes, downlinks, or entity actors right away. Instead, they were greeted with live data, visual modeling, and preview UIs—all while the platform handled the orchestration behind the scenes. This allowed us to move quickly and confidently, building high-fidelity prototypes that demonstrated both concept and execution.​
​​
Explore business viability: from platform to product
​
Jet wasn’t just a design upgrade—it was a product pivot. By making real-time application creation intuitive, Jet unlocked a new market opportunity: mid-sized teams, cloud-native shops, and developers without deep streaming backgrounds. Our solution aligned the viability (recurring revenue from Jet licenses and app-plane usage) with the desirability (solving a real unmet need) and feasibility (leveraging proven backend tech) in one cohesive experience.
​
Jet moved Nstream closer to being a SaaS-first company—where users could explore, build, and deploy with little to no hand-holding.
Solution Abstract: Design Thinking in Action​​​​​​​
Jet was built through iterative cycles of design, prototype, test, and refine. This wasn’t just Lean UX—it was full-throttle Design Thinking applied to a complex, high-tech space.
​
-
Empathize with the developer journey
-
Define the critical path to first success
-
Ideate concepts that reduce learning curves and surface value
-
Prototype low- and high-fidelity flows rapidly
-
Test with real users and stakeholders weekly
​
Through this lens, we delivered* Jet as a real-time, web-based visual builder that made onboarding faster, experimentation safer, and launching easier.
​​​
Why this matters: impact at every layer​
Before Jet, the Nstream platform was powerful—but opaque. After Jet, the experience became clear, fast, and empowering. Jet enabled developers to spin up real-time applications in minutes instead of weeks. It reduced time-to-value, increased confidence, and made it possible for new users to see their data live—without needing to learn the underlying streaming infrastructure upfront.
The impact was clear:
​
-
Faster onboarding → higher conversion from trial to deployment
-
Lower cognitive load → broader adoption across teams
-
Clearer interface → better demos, stronger sales outcomes
-
Internal alignment → engineering, sales, and customer success using the same tool
​​
Early in the process, we worked to understand the mental models and operational tasks of our target users—architects and developers. This research and collaboration led us to define a clear New User Flow (NUF), which became the backbone of the onboarding and deployment experience. More on the NUF in the following Output sections of this project.
​
Jet wasn’t just a new UI—Jet was the new frictionless front door to Nstream.
UX:
- User experience research
- User experience design
- User interface design
- Prototyping
- Visual design
- Project coordination
UI:
- Major Telcos
- Financial institutions
- Retail / e-commerce
- Software / SaaS
- Manufacturing
- Energy providers
Results:
- Major Telcos
- Financial institutions
- Retail / e-commerce
- Software / SaaS
- Manufacturing
- Energy providers
​Output
​​
​Design work should speak for itself—but context gives it meaning. This section showcases the final artifacts, prototypes, and UI/UX deliverables, along with the reasoning behind key decisions.
​​​
What did we design and build? What artifacts were created?
​
Product requirement definitions, experience architecture, UI component system, interactive prototypes, and a launch-ready SaaS interface for real-time streaming app development. For this project we created the following artifacts:
​
-
UX research documentation​ (interviews, opportunity, scope, process, and more)
-
UX user journey map (core experience, extended experience, multi-phase flow)
-
UI design and development plan
-
UI wireframes (iterations, baseline)
-
UI mockups (iterations, finals)
-
UI art assets (svg)
-
UI prototypes (iterations, baseline)
-
UI web product for release (Beta*)
​​
Design should stand on its own—but great work gains power when the why is made clear. This section walks through the key artifacts and interface design decisions behind Nstream Jet: a SaaS platform built to empower developers and operators to build real-time streaming apps—fast.
​
The core experience (for the sake of this portfolio project) will first and foremost support the Architect Developer's primary actions. Secondary actions may be supported here as well, but it is not a requirement that the core experience do so. More of a nice to have. Again, I will not address any additional personas here in this portfolio (as we did support any and all persona requirements in the actual project).
User Journey: Configure, Deploy & Observe
​
The core experience in Nstream Jet was designed around a purposeful onboarding flow for technical users—primarily architects and developers—who needed to go from zero to live-streaming apps as efficiently and confidently as possible.
​
The user journey below (and the user journey map above) is a key product output. It reflects what was designed, how it functions, and how users move through the product as both a new user and established experienced user. It’s a tangible artifact of my design work, just like the UI, flows, wireframes, pixel perfect mockups, components, and final stitched app views.
​
-
It shows the structure and behavior of the system from the user's perspective.
-
You can pair it with interface visuals, diagrams, and flowcharts.
-
It anchors the reader in what the product actually does and how you made it usable.
​
Architecting the new user flow (NUF) journey and beyond
​
​​The user journey is a multi-phased journey as follows:
​
-
Phase 1: getting set up
-
Phase 2: configure a streaming app
-
Phase 3: deploy & run
-
Phase 4: observe & maintain
-
Phase 5: collaborate & share
​
We identified a clear, phased user journey that begins linearly but becomes more dynamic and non-linear as users gain proficiency and expand their deployment workflows. This allowed us to design an experience that starts with clear guidance, then progressively unlocks flexibility and control.
​
Phase 1: getting set up
​​
​Goal: Establish trust and security while initiating access to the platform.
​
-
Step 0 - Create a new user account. Register with email, organization details, credit card info, and enable 2FA for secure onboarding.
​​
Phase 2: configure a streaming app
​​
​Goal: Empower users to stand up their first SwimOS-powered app with guided configuration.
​
-
Step 1 - Configure a new app instance. Select from templates, choose data source connectors, define business logic type, apply patches, and name the deployment. This step was critical—we designed it as a modular form experience with real-time feedback and validation to ensure smooth completion.
​
Phase 3: deploy & run
​​
​Goal: Move from configuration to an active, cloud-based deployment.
​
-
Step 2 - Deploy the app. Once configured, the app is launched onto our EKS infrastructure with appropriate orchestration and runtime configuration handled behind the scenes.
​
Phase 4: observe & maintain
​​
​Goal: Monitor deployments in real-time and take operational actions confidently.
​
-
Step 3 - Monitor deployments. View current state of running apps, identify uptime status, and surface key event activity.
-
Step 4 - Inspect deployment details. Drill into metrics, logs, entities, and configurations to better understand system behavior.
-
Step 5 - Take action. Start, Stop, Restart, or Delete deployments directly from the UI—designed with safeguard affordances to prevent unintentional disruption.
​
Phase 5: collaborate & share
​​
​Goal: Enable team-level visibility and handoff across roles or orgs.
​
-
Step 6 - Share deployments. Generate shareable views or assign access to other team members within the organization.
​
Designing for growth beyond onboarding
​
While the early flow is designed to be linear and guided with Just in Time (JIT) user education, we intentionally transitioned into a more flexible, non-linear workspace post-deployment. This allows power users to:
​
-
Jump directly into monitoring or editing multiple deployments
-
Spin up new apps in parallel
-
Collaborate asynchronously with teammates
-
Maintain control without being locked into a wizard-based UX
​
By breaking the experience into phases and tasks, we helped users ramp up quickly while giving them room to grow—and scale—their real-time applications with confidence.
​​
UX:
- User experience research
- User experience design
- User interface design
- Wireframes
- Cross-functional coillaboration
- Project coordination
​Output (cont.)
​Wireframes (def.) - a schematic or blueprint design that assists designers, developers and other stakeholders to get on the same page when it comes to what components, interactivity, and flow is to be implemented.
​
-
Wireframes make it clear this is not the final design, yet an important
-
phase of the preliminary design process
-
Wireframes communicate that all is still in process and iteration is still needed, prior to any code being written
-
Wireframes make it clear that no code has been written yet
​
Working closely with the Verizon stakeholders to help them understand the value of wireframing the experience, and componetizing the single pane of glass experience was key to ensuring the unmet need was met.
​
Let's get into the details of the two view modes for this Executive focused experience.
​
​Wireframes: Establish Baseline & Iterate Rapidly
​
From the beginning, this was a deeply iterative product design effort. We weren’t designing a static dashboard—we were building a real-time, reactive workspace to visualize live entities, relationships, events, and streams.
​
​To move at the speed of innovation, we embraced a tight loop of sketching, prototyping, testing, and refinement. Early interactive prototypes helped validate experience architecture, while close collaboration with engineering ensured we were building with the real-time SwimOS engine in mind from day one. Feedback came not only from internal stakeholders but also directly from early developer users—each round helping us sharpen usability and align expectations.
​
Where other products rely on static data models, Jet required us to rethink how to present live system behavior, stream entities, and data interrelationships in motion. This called for more than UI mockups—it required designing time itself as a first-class experience element.
​
Anatomy, nomenclature and designators for wireframes
​
To ground the vision, we began with foundational wireframes focused on layout structure, hierarchy, and core interactions. While Nstream Jet would eventually become a modular and polished design system, wireframing allowed us to test how stream entities, timelines, operators, and app state could live together within a single, fluid UI space.
​
The early wireframes explored:
​
-
Multiple view modes: allowing developers to shift perspectives without context switching
-
Contextual panels: triggered by stream events, selections, or entity focus
-
Live diagnostics: pinned inside a non-blocking bottom panel
-
Smart search: enabling quick discovery of apps, streams, or entities across the workspace
​
We leveraged wireframes to communicate vision and constraints with engineering, helping accelerate alignment before any code was written. More importantly, they opened up conversation around "what matters most to real-time users?"—paving the way for decisions around which interactions would be visual, which would be command-driven, and which needed both.
​
A UI designed for developers, built from components
As wireframes matured, we formalized the application anatomy and component naming system. This helped us think modularly, reducing complexity while improving the clarity of design-to-dev handoffs.
​
We defined:
​
-
UI Viewport – the full reactive workspace, responsible for rendering multiple live app instances and their constituent stream components
-
UI Panels – modular, dockable zones like sidebars, data views, or configuration drawers
-
Stream Cards – real-time entity visualizations surfaced from SwimOS
-
Operators & App Tiles – user-generated and live-inspecting objects stitched into the flow
-
Component Designators – labeled “A1,” “B3,” etc., for universal reference in prototyping and developer documentation
​
This level of structure was essential for a real-time, multi-entity environment, where latency, drift, and visual clarity could make or break usability. It also enabled rapid prototyping of new features—such as event timelines, app builders, and query editors—while maintaining a cohesive, extensible UI model.
​
Next up, let's get into application anatomy and nomenclature. This is always a great way to get on the same literal "page" as your customer or client.
​
Defining application anatomy & UI nomenclature early​​
​​
Before a single line of code is written, getting alignment on the structure and language of the interface is critical. That’s why we introduced a shared UI anatomy and nomenclature system early in the design phase—so that everyone from stakeholders to engineers could speak the same language.
​
This approach helps teams literally get on the same page—whether they're reviewing a wireframe, implementing a component, or discussing behavior in a prototype.
​
Why UI anatomy matters
​
Spending time upfront to define the anatomy of the interface creates a strong foundation for collaboration. In a complex, real-time SaaS environment like Nstream Jet, it’s not just about what gets built—but how the pieces work together, evolve, and scale.
​
Here’s how we broke it down:
​
-
UI Anatomy — Focused on the structural parts of each view: navigation, data cards, stream panels, control drawers, etc. These are the building blocks of the experience.
-
UI Viewport — The top-level container, or “stage,” where all live activity, views, and panels coexist. For Nstream Jet, this meant supporting multiple app states and stream flows within a unified space.
-
UI Components — The modular, reusable elements that drive interaction: filters, selectors, stream cards, query inputs, config panels, and more. These components needed to be flexible and fast—capable of rendering live entity state in motion.
-
UI Designators — Each screen, panel, or component was assigned a short-hand label (e.g., “A1”, “B3”) during the wireframing phase. These served as reference points in documentation, design reviews, and developer handoffs—ensuring conversations stayed grounded and specific.
​​
Why nomenclature & designators accelerate product delivery
​
his kind of "componentized thinking" isn't just for designers—it’s a bridge between design and development. With shared designators and naming conventions:
​
-
Developers know exactly which component is being referenced in tickets, prototypes, or code reviews.
-
Product managers can clearly discuss functionality without ambiguity or misinterpretation.
-
QA and testers have a reliable reference system to validate behavior and structure.
​
In a real-time SaaS product like Nstream Jet—where components must respond to live data, change states fluidly, and interact across a shared entity model—this clarity is invaluable.
​
The following wireframe sets were provided to engineering, with the following agreed to anatomy (view, component) designators:
​
-
B - new user onboarding (NUF start)
-
B0 - new user signup (NUF)
-
B1 - user sign in
​
-
AD - (existing) app deployment
-
ADX - (existing) app deployment detail
-
AT - app template
-
ATX - deployment detail template
​
-
A1 - main nav
-
A2 - top bar
-
A3 - action bar
​
-
D0 - create new app instance (& deploy), per "+" FAB
-
W0 - create new workspace
​
It transforms a complex system into something navigable, testable, and scalable—reducing friction, aligning teams, and accelerating delivery.
​​
What's Next?
​
Let's get into the wireframe sets that were created by me in collaboration with the engineering team and stakeholders, with the intent of establishing a SaaS product design baseline. That baseline was established and below are a few examples of the core experience wireframes.
​
See a select portion of the A - Home and D - Deployment Detail baseline wireframes below.
UX:
- User experience research
- User experience design
- User interface design
- Prototyping
- Visual design
- Project coordination
UI:
- Major Telcos
- Financial institutions
- Retail / e-commerce
- Software / SaaS
- Manufacturing
- Energy providers
Results:
- Major Telcos
- Financial institutions
- Retail / e-commerce
- Software / SaaS
- Manufacturing
- Energy providers
​Output (cont.)
​
UI Mockups & Final Design Artifacts
UI mockups are more than just polished visuals—they’re the connective tissue between design intent and product reality. In a fast-moving 0→1 SaaS effort like Nstream Jet, mockups played a central role in aligning stakeholders, clarifying expectations, and streamlining collaboration across design, product, and engineering.
​
By the time mockups are created, the foundational work—user research, journey mapping, and UX flow definition—has already shaped the vision. But mockups are where that vision becomes tangible. They allow teams to see and feel the product before it's built, and they enable rapid feedback, iteration, and shared understanding.
​
Visual clarity for product alignment, execution, and evolution
​
Just as important, mockups serve as a critical handoff asset for developers. With annotated components, interaction models, and responsive states captured in detail, mockups reduce ambiguity and accelerate development. For Nstream Jet, this meant component libraries, design tokens, and visual specs were all built around these artifacts—turning static screens into scalable systems.
​
This section showcases the key UI moments of the Nstream Jet platform, and how each part of the interface was purposefully crafted to support speed, clarity, and confidence in real-time application design.​
​
To address this, I designed multiple wireframe sets:
​
-
B - New User Flow (NUF) & Onboarding
-
W - Workspace Overview
-
D - Configure App Flow
-
A / AX - Deployment Status & Management
-
DX / DXT - Streaming Data Viewport (Detail)
-
S - Share & Collaborate
​
Mobile friendly by design
​
A quick note on Nstream Jet being mobile friendly. While the UI wireframes and mockups presented here are shown in a web browser aspect ratio, the entire Nstream Jet experience was designed with mobile-friendly responsiveness in mind. From the earliest wireframe iterations, we accounted for layout flexibility, component reflow, and touch-based interactions to ensure the platform remains functional and intuitive across screen sizes. Key flows—such as onboarding, app monitoring, and status notifications—were prioritized for mobile responsiveness, enabling users to stay connected to their deployments whether they’re at their desk or in the field. The responsive grid system and scalable components were designed to gracefully adapt to tablets, laptops, and mobile devices without sacrificing usability or performance.
​
"B" Mockups Set : New User Flow (NUF)
​
The onboarding experience for Nstream Jet was designed around speed, clarity, and developer empowerment. Our goal was to reduce the time from account creation to first streaming app deployment from weeks to minutes—while still ensuring confidence and security.
​
We created a frictionless New User Flow (NUF) that guides users through account registration, app configuration, and deployment without overwhelming them. The flow is linear by design: users complete one step at a time, each building upon the last. Contextual tooltips, real-time validation, and smart defaults helped smooth out decision points without sacrificing flexibility.
​
From sign-up to login, with password recovery and verification
​
From a UI standpoint, each step in the onboarding process was optimized for:
​
-
Speed of completion (minimal fields, prefilled options)
-
Clarity of choice (clear progress, explainable logic types)
-
Infrastructure transparency (knowing what’s happening in the backend without being burdened by it)
​
The goal for the team at this point was to move from baseline approved wireframes into high-fidelity mockups. The wireframes became the blueprint for high-fidelity mockups, which we evolved in parallel with the new Nstream brand style. This transition was critical:
​
-
Wireframes clarified functionality — what each step needed to accomplish and how users would move through the flow.
-
Mockups brought the vision to life — applying the Nstream brand’s modern, technical aesthetic, with a color palette, typography, and component design that made Jet feel cutting-edge yet approachable.
​
By the time we reached the final mockups, we weren’t just designing screens—we had built a cohesive design system for Jet, ensuring consistency across templates, connectors, dashboards, and deployment tools.
​
Design principles for the NUF mockups
​
-
Guided but lightweight onboarding – Clear progress indicators and smart defaults reduce cognitive friction.
-
Real-time feedback – Form validation and system status updates reflect Jet’s streaming-first DNA.
-
Brand-forward UI – The Nstream brand style (colors, icons, and motion cues) reinforces trust and polish from the first touchpoint.
-
Scalable components – Each element of the NUF flow is built from Jet’s UI component library, ensuring reusability across the platform.
​​
Key actions in the Nstream Jet new user flow
​
Designing the NUF meant carefully defining not just the path forward for new users, but also the critical entry points and support flows that make the experience feel complete, secure, and thoughtfully branded. We identified and designed for a range of essential actions users might take before even reaching the Jet Home dashboard, ensuring a strong first impression and frictionless authentication.
​
-
Create new user account - standard onboarding form with org info, password setup, and consent to terms.
-
Email verification with 6-digit code - secure, time-limited verification step using branded UI for trust and clarity.
-
Sign in to existing account - streamlined login for returning users, with support for saved session state.
-
Password recovery with verification code - secure password reset flow using email and 6-digit code input.
-
Access to onboarding design assets - icons, branding symbols, and usage guidelines are available in [Sketch Cloud] for reference and handoff—reinforcing a consistent visual system from the first interaction onward.
​
These actions may seem simple on their own, but each one was designed to minimize friction, maximize trust, and reinforce the Nstream brand identity—even before a user configures their first streaming app. In the next sections, you'll see how this early experience sets the tone for the interface that follows.
​
See a select portion of the "B" mockup set below.
UX:
- User experience research
- User experience design
- User interface design
- Prototyping
- Visual design
- Project coordination
Customers:
- Major Telcos
- Financial institutions
- Retail / e-commerce
- Software / SaaS
- Manufacturing
- Energy providers
​Output (cont.) ​
​
"D" Mockups Set : Create & Deploy
​
After onboarding, the real value of Nstream Jet begins: creating and deploying your first streaming app. This is the core experience of the platform—the moment when the product delivers on its promise to be the fastest way to build, launch, and observe real-time apps.
​
Create and deploy your first streaming app in minutes 🚀
​
From first click to live streaming data in minutes, not months. It's time to make good on the Nstream Jet promise.
​
But making good on that promise wasn’t simple. Delivering a truly rapid, low-friction experience for deploying real-time streaming apps meant tackling a wicked problem: how to abstract deep system complexity—data connectors, deployment orchestration, logic composition, SwimOS runtime configurations—without dumbing down the experience. Most streaming platforms require specialized DevOps support, weeks of integration effort, and an intimate knowledge of distributed systems. With Nstream Jet, we had to invert that model—designing a product where speed, confidence, and clarity weren’t layered on top, but baked into the foundation. This required collaboration across design, product, and engineering to shape a system where users could move from intention to outcome in a matter of minutes, not months.
​
We designed this experience to be direct, confident, and actionable. As soon as the user lands on the Jet home screen, they're guided into a streamlined app creation workflow—no clutter, no waiting, no unnecessary configuration overhead. Just immediate progress toward seeing live data in motion.
​
Core UX goals for the first streaming app flow
​
From a UX standpoint, each step in the onboarding process was optimized for:
​
-
Eliminate complexity upfront with preconfigured templates and logic types
-
Show instant progress through guided steps and visual confirmation
-
Empower without overwhelm — users can go from zero to deployment without needing to understand SwimOS internals
-
Reinforce trust with clear language, feedback states, and a branded deployment interface
​​​
Key actions in the first app creation flow
​
To support this streamlined experience, we designed a focused, high-velocity flow that guides users through the minimum viable steps required to configure and launch a streaming app. Each action in the flow is intentional—removing unnecessary friction while still giving users control and clarity. The sequence below represents the essential moments where design, infrastructure, and system intelligence converge to create a fast and reliable app creation experience.
​
-
Create New App Deployment - prominently placed CTA from the Jet home screen. Kicks off the core workflow.
-
Select Template & Connector - choose from starter configurations (e.g., telemetry, device data, metrics streams) with clearly labeled logic paths and data sources.
-
Configure App Settings - give your app a name, apply optional patches, and verify system context (e.g., workspace or org). No YAML or backend setup required.
-
Deploy to EKS (infrastructure abstracted) - with one click, users can deploy to the managed runtime. The UI shows immediate feedback via logs and real-time deployment indicators.
​​
In this flow, mockups weren’t just about polish—they were essential to defining how live deployment feedback would be visualized. Animations, loading pulses, and real-time system logs were designed directly into the mockups, so engineering could see exactly how feedback loops needed to behave.
​
The layout also ensures that critical information (status, logs, stream behavior) is visible as the deployment happens, without leaving the screen.
​
Product promise, is realized by the user here
​
This flow is where Jet proves its value: a developer can create and deploy their first streaming app without writing UI code (or can) or learning a new IDE. It's opinionated, fast, and intuitive—exactly what’s needed to win over technical users evaluating a new platform.
​
​See a select portion of the "D" mockup set below.
​​​​​​​
UX:
- User experience research
- User experience design
- User interface design
- Prototyping
- Visual design
- Project coordination
Customers:
- Major Telcos
- Financial institutions
- Retail / e-commerce
- Software / SaaS
- Manufacturing
- Energy providers
​Output (cont.) ​
​
"A" Mockups Set : Monitor, Expand & Take Control
​
After deployment, Jet’s Home view becomes the user’s central command center. It’s the default screen on login, and it’s where every app, stream, and action can be observed, launched, or scaled. Unlike many dashboards that simply report system state, Jet Home is a living interface—a real-time reflection of your current environment, and the place where creation and observation naturally co-exist.
​​
​Jet Home is not just about passively monitoring what’s running. It’s also where users can initiate new deployments, inspect live states, review logs, and quickly navigate between existing streaming apps. In short, it’s where developers and architects live—and it had to feel just as intuitive, real-time, and powerful as the apps it orchestrates.
​
Where streaming apps begin, and where all converge
From the moment you sign in, Jet Home is where everything comes together. It’s the operational heartbeat of the platform—the place you land, the place you act, and the place you return to. Whether you’re launching a new streaming app or monitoring dozens already in motion, Jet Home is built to support the fast, fluid experience Nstream Jet promises.
​
This is simply homebase.
​
But delivering that kind of homebase wasn’t a matter of just stacking tiles or displaying status. It meant solving a deeper challenge: how to make a single interface feel useful at every scale—one app or fifty—and keep it responsive in real time. Jet Home needed to surface live metrics, deployment health, and actionable insights while remaining clean, intuitive, and low-friction. It also had to support creation without ever breaking observation. That meant building an interface where users could monitor what’s live and deploy what’s next—all in one continuous experience.
​
We designed Jet Home to be both command center and launchpad. The layout is anchored by real-time deployment cards, surfacing app status, health, and recent activity at a glance. Clear calls to action let users deploy new apps in seconds, while embedded access to logs and live data views make troubleshooting and investigation seamless. It’s always on. Always ready. Always real-time.
​
Design principles for the Jet Home experience
​
From a UX standpoint, each feature at homebase was optimized for:
​
-
Always-on observability — Stream activity and deployment state are rendered live without refreshes
-
Default entry point — Upon login, users land here instantly, no friction or configuration required
-
Scalable view model — Jet Home grows with your deployments, from a single app to dozens
-
Action-first layout — Prominent calls to create new apps or investigate existing ones
-
Role-aware structure — Tailored visibility for operators, developers, and architects alike
​​​
Key actions in the first app creation flow
​
Jet Home was designed to be more than just a dashboard—it’s a fully interactive environment where users can take action just as easily as they can observe. Whether it’s spinning up a new deployment or checking on the health of a live stream, Jet Home offers a centralized interface for doing and seeing, in equal measure. Below are the primary actions available directly from the Home screen—each one crafted to support speed, clarity, and confidence for real-time app operators and builders.
​
-
View all active and past deployments - a scrollable, searchable list of apps with real-time status indicators and timestamps.
-
Create a new app deployment (instance) - prominent “+ New App” button always available, inviting immediate action from any user role.
-
Inspect deployment details at a glance - streaming app deployment tiles surface key metadata: health status, active duration, recent logs, and last app deployment state.
-
Access logs or stream insights - with one click, users can drill into stream data, resource usage, or SwimOS logs directly from the Home view.
-
Monitor system-wide behavior in one place - the Home screen acts as a meta-layer, giving a panoramic overview of all streaming activity across the org or workspace.
​​
Each of these actions reinforces the idea that Jet Home isn’t a passive UI layer—it’s a real-time operational workspace. Users can move fluidly between monitoring and building, without context switching or navigating away. This tight integration of creation and observability reflects Jet’s core philosophy: that the fastest, most powerful tools don’t just show you the system—they let you shape it, instantly.
​
Your command center for all things streaming apps
​
Jet Home is where the value of Nstream Jet compounds. It's not just the place you land—it’s the place you return to in order to build, monitor, learn, and grow your real-time streaming app environment. The design was built to scale with user needs, surface what matters in the moment, and reinforce Jet's identity as a powerful yet usable command center for modern streaming architectures.
​
​See a select portion of the "A" mockup set below.
​​​​​​​
UX:
- User experience research
- User experience design
- User interface design
- Prototyping
- Visual design
- Project coordination
Customers:
- Major Telcos
- Financial institutions
- Retail / e-commerce
- Software / SaaS
- Manufacturing
- Energy providers
​Output (cont.) ​
​
"ADX" Mockups Set : Inspect Deployments
​
As real-time apps scale across environments, teams need to investigate behavior at the individual deployment level—without disrupting their broader workflow. That’s exactly what the App Deployment Detail (ADX-N) modal view was built for. This lightweight overlay sits on top of the Jet Home dashboard, enabling users to quickly drill down into app-level health, performance metrics, logs, and live streaming behavior—all within a clean, focused card layout.
​
All the signal, none of the noise, without ever leaving home
Traditional admin tools tend to send users off into separate dashboards or tabs when deeper inspection is needed. That disrupts context, breaks flow, and adds friction. With Nstream Jet, we knew the challenge was more nuanced: users needed per-deployment clarity without leaving the command center. The modal view had to deliver real-time detail, fast actions, and live updates, without feeling like a heavy transition or requiring a mental reset.
​
We were solving for deep insight, shallow disruption.
​
This UI layer allows users to stay rooted in Jet Home while zooming into the operational anatomy of any live deployment. Each app is rendered with high-context visuals—including KPIs, CPU/memory usage, message throughput (pulse), links (up/down), logs, and status state chips—all sourced from the SwimOS streaming backend. The layout reflects both current runtime data and historical insights, giving users confidence in the app’s performance over time.
​
This modal view solved the issue of instantiation focus.
​
Design principles for the Jet Home experience
​
From a UX standpoint, each feature at homebase was optimized for:
​
-
Always-on observability — Stream activity and deployment state are rendered live without refreshes
-
Default entry point — Upon login, users land here instantly, no friction or configuration required
-
Scalable view model — Jet Home grows with your deployments, from a single app to dozens
-
Action-first layout — Prominent calls to create new apps or investigate existing ones
-
Role-aware structure — Tailored visibility for operators, developers, and architects alike
​​​
Key actions in the app deployment detail modal
​
The App Deployment Detail (ADX) modal was designed to provide immediate access to deployment-specific insights, without dragging the user out of their primary workflow. Every element in this view supports real-time awareness at the instance level, helping users validate performance, monitor behavior, and take action—all within a focused, unobtrusive interface. Below are the core actions and information users can access directly within the modal.
​
-
View live deployment KPIs
-
CPU and memory usage (%), with real-time bounds (0–100%)
-
Pulse: streaming message rate (e.g., 1.1k msg/sec)
-
Links: uplink/downlink totals rendered per entity
-
-
Access real-time activity logs
-
Scrollable logs streamed directly from the deployment’s API
-
Supports debugging and performance validation
-
Dynamic display that reflects changing status and thresholds
-
-
Trigger contextual actions
-
Stop, restart, or delete the deployment inline
-
Actions gated with safe-guarded confirmations
-
-
Reference swimlane timeline visualizations
-
View 1h/1d ranges with visual intervals for pulse, memory, and CPU
-
Support for sliding window analysis and performance context
-
-
Navigate without disorientation
-
Seamless modal close returns the user to Jet Home without losing scroll or app focus
-
Design mimics card status chips to reinforce visual connection
-
​​
By embedding these actions and indicators directly into a modal, we gave users the ability to inspect, analyze, and intervene—without ever losing context. This design pattern supports both rapid issue resolution and low-effort system visibility, making the experience faster, more confident, and ultimately more scalable. It’s a small window into a single deployment, but it plays a big role in how Jet delivers clarity in a complex, streaming world.
​
High-clarity while keeping context
​
This view exemplifies the Nstream Jet philosophy: speed, observability, and confidence—without cognitive overload. It gives users the power to manage individual app instances at a granular level without breaking stride. Every interaction is low-latency, high-clarity, and designed to empower decision-making in real time. Whether you’re checking performance spikes or verifying a log entry, the App Deployment Detail modal becomes your instant window into live operations.
​
​See a select portion of the "ADX" mockup set below.
​​​​​​​
UX:
- User experience research
- User experience design
- User interface design
- Prototyping
- Visual design
- Project coordination
Outcomes ​
​
Delivering on The Streaming App Promise
​​
Nstream Jet is more than just a SaaS tool—it’s a reimagining of what it means to design, build, and deploy streaming applications at speed. What began as a concept for reducing time-to-value evolved into a fully functioning real-time design system, capable of scaling with developers, operators, and data teams across industries. This project represents not only a successful 0→1 product delivery (to Beta*), but a deep demonstration of how design can drive clarity through complexity.
​
What we achieved
​
-
Reduced time-to-deploy from weeks to minutes, empowering users to launch their first streaming app without needing deep infrastructure knowledge.
-
Designed a New User Flow (NUF) that balanced speed with confidence—guiding users from registration to live deployment in a single seamless flow.
-
Created a modular, real-time dashboard (Jet Home) that supports monitoring, scaling, and acting across multiple deployments without breaking context.
-
Developed a modal inspection system that provides app-level insights, logs, and actions—all without leaving the primary interface.
-
Built a UI system grounded in real-time responsiveness, powered by SwimOS, and adaptable across desktop and mobile environments.
-
Collaborated across engineering, product, and brand to evolve a beta product into a visually cohesive, technically powerful SaaS solution.
​​
Why this project matters
​
Nstream Jet is a flagship example of product design meeting technical innovation head-on. It demonstrates my ability to take a complex, streaming-first backend and shape it into a clear, scalable, and intuitive experience. From information architecture to interface polish, from system-level thinking to pixel-level detail—I owned the full design arc.
​
This wasn’t just a UI. It was a new kind of tool. One that made good on a promise.
A tool for builders. For teams moving fast.
A product that doesn’t slow you down to show you your data—it streams with you, in real time.
​
* Nstream Jet is a Beta release SaaS product that is no longer available or accessible as Nstream the company closed it's doors on March 2005.
​​​​​​​