Website Design & UX Approach

1. Objective

The goal of the proposed website is to reduce onboarding friction for first-time users of NSB and provide a structured, user-friendly entry point into the system.

Currently, new users must navigate multiple sources of documentation and infer the correct sequence of steps. This proposal restructures the experience into a clear, guided flow that prioritizes usability without sacrificing depth.

Website Design & UX Approach

2. Design Philosophy

The website is designed around a few key principles:

First Success First

Users should be able to run a working NSB example as quickly as possible.

Progressive Disclosure

Advanced concepts are introduced only after initial setup.

Minimal Cognitive Load

Setup, configuration, and execution are separated into clear steps.

Clear Verification

Each stage includes expected outputs so users know they are on track.

Separation of Concerns

Quickstart is distinct from detailed documentation.

Website Design & UX Approach

4. Website Structure

The site is organized into modular sections that support progressive exploration:

Home

Value proposition, feature highlights, and Get Started CTA.

Get Started

Guided setup with platform-specific instructions and step progress.

Quickstart

Minimal working example — the first success path.

Documentation

Detailed reference covering config, API, architecture, and message protocol.

Tutorials

Structured learning paths organized by difficulty.

Contribute

Contributor onboarding, dev setup, and good-first-issue lists.

Community & About

Project context, communication channels, and team information.

Website Design & UX Approach

5. Structured Sitemap

P0 launch critical P1 within GSoC period P2 future enhancement

Section	Page / Route	Priority	Purpose
Home	/	P0	Overview, value proposition, and entry point
	/features	P1	Highlight key capabilities of NSB
	/use-cases	P1	Show practical applications (IoT, SDN, etc.)
	/faq	P2	Answer common beginner questions
Get Started	/get-started	P0	Central onboarding hub
	/quickstart	P0	Run first working simulation (core flow)
	/install/*	P0	Platform-specific installation guides
	/troubleshooting	P1	Resolve common setup issues
Documentation	/docs/architecture	P0	Explain system structure
	/docs/config	P0	Config.yaml reference
	/docs/api	P1	Python/C++ API reference
	/docs/protocol	P1	Message format and communication
Tutorials	/tutorials	P1	Guided learning paths
	/tutorials/basic	P0	End-to-end simulation walkthrough
	/tutorials/advanced	P1	Advanced use cases and integrations
Contribute	/contribute	P1	Entry point for contributors
	/contribute/setup	P1	Development environment setup
	/contribute/issues	P2	Good first issues
Community	/community	P2	Communication channels
	/showcase	P2	Example projects
About	/about	P2	Project background and team

Website Design & UX Approach

6. Onboarding Strategy

The onboarding flow is centered around a first success milestone — users successfully running a basic NSB simulation. To achieve this:

A Quickstart path provides minimal configuration and copy-paste steps.

Complex topics are deferred.

Each step includes verification checkpoints.

Users are guided to deeper sections after success.

★ First Success Checkpoint

User sees simulation output in terminal — confirmed with a green banner.

Website Design & UX Approach

7. Wireframe Overview & Validation

Wireframe Overview

Low-fidelity wireframes were created to visualize the structure and flow of the website. Seven screens cover the full site as an interactive HTML file.

→ Home → Get Started → Quickstart flow

→ Step-based onboarding with platform-specific guidance

→ First Success checkpoint with green confirmation banner

→ Modular documentation and learning sections

The wireframes focus on structure and user flow rather than visual design.

Validation Approach

The proposed structure will be validated through:

Testing onboarding with new users unfamiliar with NSB.

Observing where users encounter friction in the flow.

Iterating on flow, wording, and structure based on feedback.

User Flow

End-to-End User Journey

How a new user moves from first visit to a working simulation. Every screen design decision is made in service of the critical path below.

Critical User Flow — New User Journey

Every screen design prioritizes this path. The ★ First Success checkpoint is the single most important milestone on the site.

Step 1

Home

/

→

Step 2

Get Started

/get-started

→

Step 3

Quickstart

/quickstart

→

Step 4

First Success

★ CHECKPOINT

→

Step 5

Docs / Tutorials

/docs · /tutorials

→

Step 6

Contribute

/contribute

Secondary Flows

Intermediate User

Home

→

Docs

→

Config reference

→

API reference

Contributor

Home

→

Contribute

→

Dev setup

→

First PR

Design principle: Every page outside the critical path (Docs, Tutorials, Contribute) must be reachable from the Quickstart First Success state via contextual "What's next?" links — keeping the user inside the site rather than routing back to GitHub.

Screen 1

Home Page

Purpose: First impression. Explain NSB, show a working code preview, drive users to Get Started. Primary action: Click "Get Started" CTA

nsb.ucsc.edu

NSB

Get Started

Docs

Tutorials

Contribute

Community

GitHub

Get Started

v0.4.2 — Now with ns-3 bridge support

Bridge your simulators
with the real world

Network Simulation Bridge (NSB) connects network simulators like ns-3 and OMNeT++ to real applications, giving you Python and C++ control, real-time visualization, and reproducible experiments.

Quickstart — 5 min

Read the Docs

terminal — ~/my-simulation

$ pip install nsb-client

Successfully installed nsb-client-0.4.2

$ nsb-server --config config.yaml

NSB Server listening on port 5000

$ python examples/basic_client.py

client1 connected (port 5001)

client2 connected (port 5002)

Simulation running — 2 clients active, 10 messages exchanged

SIM

Simulator Bridge

Connect ns-3, OMNeT++, or any custom simulator to real or emulated networks through a unified bridge interface.

API

Python and C++ Control

Full-featured client libraries for both languages. Write experiment controllers, automate scenarios, and parse results.

VIZ

Real-Time Visualization

Live topology view and packet-flow visualization. Watch your simulation unfold without writing custom plotting code.

IoT

IoT Network Simulation

Simulate constrained devices with realistic traffic before deploying hardware.

SDN

SDN Research

Test software-defined networking controllers and routing algorithms at scale.

Academic

Protocol Testing

Benchmark new transport protocols without physical lab infrastructure.

Education

Teaching Labs

Give students a consistent, reproducible network lab on any laptop.

Key elements: Sticky nav with all sections · Hero with value prop, dual CTA (Get Started primary, Docs secondary) · Live terminal preview · 3-col feature strip · 4-col use case cards · Footer

Screen 2

Get Started Hub

Purpose: Platform-specific installation. Prerequisites check. Routes user to Quickstart. Primary action: Select OS tab, follow steps, click "Next: Quickstart"

nsb.ucsc.edu/get-started

NSB

Get Started

Docs

Tutorials

Contribute

Community

GitHub

✓

Check prerequisites

You need Python 3.8+, Git, and Homebrew before continuing.

bash

$ python3 --version    # must be 3.8 or higher
$ git --version
$ brew --version

2

Install NSB server

Install the NSB message server via Homebrew. This handles routing between simulator and client processes.

bash

$ brew tap ucsc-ospo/nsb
$ brew install nsb-server
$ nsb-server --version    # verify: NSB Server 0.4.2

You should see: NSB Server 0.4.2. If "command not found", restart your terminal.

3

Install Python client library

Install the Python package that lets your code communicate with the NSB server.

bash

$ python3 -m venv nsb-env
$ source nsb-env/bin/activate
$ pip install nsb-client

You should see: Successfully installed nsb-client-0.4.2

4

Clone the examples repository

bash

$ git clone https://github.com/ucsc-ospo/nsb-examples
$ cd nsb-examples

Prerequisites

OK Python 3.8+

OK Git 2.0+

OK Homebrew (macOS)

-- ns-3 (simulator tutorials only)

Having trouble?

See the Troubleshooting guide for port conflicts, YAML syntax errors, and missing dependency issues.

Windows users

Select the Windows (WSL2) tab above, or use the Docker fallback guide.

Key elements: OS tab selector (macOS / Linux / Windows WSL2) · Connected step list with vertical connector line · Copy-paste commands with verify hints · Prerequisites checklist sidebar · Troubleshooting and Windows fallback links · "Next: Quickstart" CTA at end

Screen 3 — Critical Path

Quickstart Page

Purpose: Working simulation in under 5 minutes. Zero architecture explanation. Pure action. Primary action: Follow 4 steps → reach First Success checkpoint

nsb.ucsc.edu/get-started/quickstart

NSB

Get Started

Docs

Tutorials

GitHub

1

Create your config file

Copy this exactly. You do not need to understand every field yet — that is what the Config Reference is for.

config.yaml

simulator_mode: 1
server_port: 5000
endpoints:
  - name: client1
    port: 5001
  - name: client2
    port: 5002

Save this as config.yaml in your current working directory.

2

Start the NSB server

Open a new terminal window and run:

terminal 1

$ nsb-server --config config.yaml

You should see: NSB Server listening on port 5000. Leave this terminal open.

Port 5000 already in use? Change server_port in config.yaml. See port conflicts guide.

3

Run the example client

In a second terminal, inside the nsb-examples/ directory:

terminal 2

$ source nsb-env/bin/activate
$ python examples/basic_client.py

4

Confirm the simulation ran

You should see output like this in your terminal:

expected output

  Connecting to NSB server at localhost:5000
  client1 connected successfully (port 5001)
  client2 connected successfully (port 5002)
  Sending: Hello from client1 to client2
  Sending: Hello from client2 to client1
  Simulation complete. 10 messages exchanged in 0.34s

What's next?

Tutorials

Full end-to-end simulation

Server, two clients, real message exchange — explained step by step.

Documentation

Understand the config fields

Learn what simulator_mode, endpoints, and port ranges do.

Contribute

Build a custom Python client

Extend NSB with your own simulator adapter.

On this page

1

Create config file

2

Start the server

3

Run example client

4

Confirm simulation

★

First Success

Key elements: Time badge ("~5 minutes") · 4 numbered steps with copy-paste commands and verify hints · Expected terminal output block · First Success checkpoint banner (bold border, star icon) · "What's next?" 3-card strip · Sticky on-page TOC with step status

Screen 4

Documentation

Purpose: Reference material for users who have a working setup. Sidebar-driven layout. Primary action: Navigate sidebar → read reference page → copy config fields or API

nsb.ucsc.edu/docs/config-reference

NSB

Get Started

Docs

Tutorials

Contribute

GitHub

config.yaml Reference

Last updated: March 2026 · Edit this page

The config.yaml file is the primary configuration for the NSB message server. It controls simulator mode, endpoint definitions, port assignments, and logging behaviour.

Full Example

config.yaml

simulator_mode: 1
server_port: 5000
log_level: INFO
endpoints:
  - name: client1
    port: 5001
  - name: client2
    port: 5002

Field Reference

Field	Type	Default	Description
`simulator_mode`	required	—	1 = basic mode, 2 = ns-3 bridge, 3 = OMNeT++
`server_port`	optional	5000	Port the NSB server listens on for client connections
`log_level`	optional	INFO	Verbosity level: DEBUG, INFO, WARNING, ERROR
`endpoints`	required	—	List of client endpoints — each requires a unique name and port
`endpoints[].name`	required	—	Unique identifier used in message routing between clients
`endpoints[].port`	required	—	Port this client listens on — must not conflict with other endpoints

Message Flow

When a client sends a message, the NSB server receives it, looks up the target endpoint by name, and forwards it on the correct port. Clients never communicate directly — all traffic routes through the server.

python

from nsb_client import NSBClient

client = NSBClient("client1", server_port=5000)
client.connect()

# Send a message to client2
client.send(to="client2", payload={"type": "PING", "seq": 1})

# Receive a reply
msg = client.recv(timeout=2.0)
print(msg.payload)

← Architecture

simulator_mode →

Key elements: Sticky left sidebar with grouped nav (Overview / Config / API / Visualization) · Search box · Active state on current page · Breadcrumb · Field reference table (required/optional tags, types, defaults) · Code examples · Prev/Next navigation strip

Screen 5

Tutorials

Purpose: Progressive, goal-oriented guides beyond the Quickstart. Filterable by difficulty. Primary action: Filter by difficulty or topic, then select a tutorial

nsb.ucsc.edu/tutorials

NSB

Get Started

Docs

Tutorials

Contribute

GitHub

DIAGRAM PLACEHOLDER

Beginner

Basic End-to-End Simulation

Set up a server and two clients, exchange messages, and inspect output. Foundation for all other tutorials.

15 min

DIAGRAM PLACEHOLDER

Beginner

Custom Python Client

Build a Python client from scratch using the NSB client library. Send structured messages and handle responses.

20 min

DIAGRAM PLACEHOLDER

Intermediate

ns-3 Integration

Connect an ns-3 simulation to NSB using the bridge adapter. Configure simulator_mode and handle event callbacks.

45 min

DIAGRAM PLACEHOLDER

Intermediate

Real-Time Visualization

Enable the live topology view and customize the metrics displayed during simulation.

30 min

DIAGRAM PLACEHOLDER

Advanced

OMNeT++ Bridge

Integrate NSB with OMNeT++ using the C++ bridge library. Handle complex message types and time synchronization.

60 min

DIAGRAM PLACEHOLDER

Advanced

Custom Message Protocol

Define custom message types, implement serialization, and build typed handlers for complex simulation scenarios.

50 min

Key elements: Difficulty filter tabs (All / Beginner / Intermediate / Advanced) · 3-col card grid with difficulty badge, title, description, time estimate, and Start CTA · Diagram placeholder in card thumbnail · Topics: Basic End-to-End, Custom Python Client, ns-3 Integration, Visualization, OMNeT++, Custom Protocol

Screen 6

Contribute

Purpose: Three distinct contribution paths. Dev setup guide. Reduce first-PR friction. Primary action: Identify path, follow guide, open first issue or PR

nsb.ucsc.edu/contribute

NSB

Get Started

Docs

Tutorials

Contribute

GitHub

BUG

Report a Bug

Found something broken? Open an issue on GitHub with reproduction steps. Check existing issues first to avoid duplicates.

Open an issue on GitHub →

DEV

Contribute Code

Fix a bug, add a feature, or improve test coverage. Start with the Dev Setup guide below, then pick a Good First Issue.

Dev setup guide →

DOC

Improve Documentation

Found a gap in the docs? Every page has an "Edit this page" link. Documentation PRs are always welcome.

Edit a doc page →

Local Development Setup

1

Fork and clone: git clone https://github.com/your-fork/nsb.git && cd nsb

2

Create a venv and install dev dependencies: pip install -e ".[dev]"

3

Run the test suite: pytest tests/ -v — all tests should pass before opening a PR.

4

Create a branch, make your changes, and open a PR against main.

Good First Issues

Curated for new contributors — updated weekly from GitHub.

Add Windows WSL2 install verification step to docs

good first issue

Write unit tests for NSBClient.send() timeout handling

good first issue

Add error message when config.yaml is missing required fields

good first issue

Improve port conflict error message to suggest alternatives

good first issue

Key elements: 3 contribution path cards (Bug / Code / Docs) with labelled icons and action links · Connected dev setup steps with inline code · Good First Issues list with GitHub badge and hover state

Screen 7

Community and About

Purpose: Community channels, project background, team. Build trust with new users. Primary action: Find GitHub Discussions or mailing list, join community

nsb.ucsc.edu/community

NSB

Get Started

Docs

Tutorials

Contribute

Community

GitHub

Community Channels

Get help, share experiments, and follow NSB development.

GH

GitHub Discussions

Ask questions, share use cases, and discuss ideas with maintainers and users.

→

GH

GitHub Issues

Report bugs, request features, and track project progress.

→

@

Mailing List

[email protected] — release notes and project announcements.

→

About NSB

Origin, goals, and the team behind the project.

Network Simulation Bridge was created at UC Santa Cruz as part of the Open Source Program Office (UCSC OSPO). The goal is to lower the barrier for researchers and students who want to use mature network simulators without complex integration plumbing.

NSB is actively developed and welcomes contributors at all levels. The GSoC 2026 program is bringing major improvements to documentation, onboarding, and the website.

UCSC OSPO Project — GSoC 2026

Core Team

PL

Project Lead

Advisor

CD

Core Dev

Developer

CD

Core Dev

Developer

YOU

GSoC 2026

Contributor

Key elements: Two-column layout — community channels (left) + project about (right) · Channel cards with icon, name, description, arrow link · UCSC OSPO affiliation tag · Team member grid with initials avatars and roles

Bridge your simulatorswith the real world

Full Example

Field Reference

Message Flow

Local Development Setup

Good First Issues

Community Channels

About NSB

Bridge your simulators
with the real world