Building a design system that needs to work for people and agents?

I'm open to principal-level design-system and AI product roles. Send me a message here, or get in touch by email.

Get in touch

Send me a message

* Required fields

Send me a message

Name

Email

Subject (optional)

Message

Website

Your details are used to reply to your message. Messages are sent via Resend.

Download CV Download portfolio

IQ Jumpstart — Joel Mbugua

All work

05 · Design system · Microsoft

IQ Jumpstart

IQ Jumpstart gives builders a starting point for working with IQ, bringing scenarios, reusable prompts, implementation resources and connected knowledge into one website.

The design challenge was to make the same material useful to a person browsing for ideas and an agent retrieving context. I owned the website experience, information architecture and visual design, and built the published prototype myself. My scope centred on the site and its presentation, while others owned the backend and scenario architecture.

Company: Microsoft
Role: Lead designer & website builder
When: 2026 · Sep — Oct 2026
Disciplines: Experience design, IA, Visual design, Build

The problem

Builders needed one place to start. That place had to work for a person browsing scenarios and equally for an agent consuming the same knowledge.

What I owned

Owned the website experience: experience design, information architecture and visual design
Built the site myself and published the prototype
Structured content so it is legible to people and to agents

How I built it

Hands-on build: I designed and built the website, with a published prototype and repository. The backend and scenario architecture were owned by others.

Designing for two audiences

Scenarios, prompts and resources were organised so the same structure serves a person scanning for a starting point and an agent retrieving context. Clear hierarchy and predictable naming help both.

Shows

AI-Native Product Designer
Design Systems Builder
UX Design Builder
End-to-End Designer

IQ Jumpstart desktop landing page in light and dark mode. — A starting point for exploration. The landing page introduces business scenarios and connects visitors to guided walkthroughs and supporting knowledge, in light and dark mode.

IQ Jumpstart scenario catalog in light and dark mode on desktop. — Finding a relevant scenario. The catalog brings roles, goals and technologies together so visitors can choose a starting point.

Save the renewal scenario and learning path in light and dark mode on desktop. — From a business question to a learning path. The Save the renewal overview introduces the role, context and steps before the walkthrough. Prototype draft and validation labels remain visible.

IQ Jumpstart mobile landing page in light and dark mode. — The landing page on mobile. Navigation condenses while the introduction and scenario entry points reflow into a single column.

IQ Jumpstart mobile scenario catalog in light and dark mode. — Browsing scenarios on a phone. The catalog adapts to a narrow viewport in both themes.

Save the renewal mobile scenario page in light and dark mode. — A walkthrough entry point on mobile. The scenario context, technologies and learning path stay in reading order, with a direct route into the walkthrough.