Back to Projects

AI Product Design · 2025

Self-Initiated Concept Project

Stratum - AI Career Advisor

An AI career advisor that turns long AI answers into a guide people can actually read and act on — a working prototype wired to a live Gemini API.

Role

Product UI Design · Information Architecture · Frontend Prototype

Impact

Made AI-generated career guidance scannable through structured modules and streaming feedback.

Tools

Figma · Design System · Nuxt 3 · Google Gemini API · GSAP

Stratum Design Preview

Design Highlights

  • Information Architecture: restructured scattered AI output into a card-based career guide with clear visual hierarchy
  • Design System: built dark mode color roles and repeatable card patterns so dense AI text stays readable
  • Interaction States: designed streaming text feedback so users keep a sense of progress while waiting

Positioning

Designing a career guide instead of another chatbot

Stratum is a decision-support product, not a chat window. The interface converts AI advice into modules that help users compare career direction, spot skill gaps, and pick a next action. I defined the IA, designed the visual system and interaction states, then built a Nuxt 3 prototype on the Gemini API to confirm that real responses still read well inside the layout.

Problem & Goal

Make AI advice readable, paced, and actionable

Raw AI output arrives as long, uneven paragraphs. Users receive plenty of content but still cannot tell what matters most, whether to trust it, or what to do next. The goal was to reduce load during generation and after reading — clear modules and progressive feedback instead of one continuous block of text.

Key Decisions

Turn unpredictable AI output into predictable UI sections

  • Split the answer into career direction, evidence, skill gaps, and next actions, so users can scan by intent rather than read top to bottom.
  • Used fixed sections and card hierarchy to absorb responses of varying length, so the page never destabilizes when output grows.
  • Designed streaming feedback and high-contrast labels, giving waiting a sense of progress and making recommendations easier to compare.

Key Screens

From raw AI data to a structured career roadmap

These screens show how unstructured output becomes a readable interface with hierarchy, grouped sections, and visual anchors.

Side-by-side comparison: on the left the same AI answer as one continuous block of prose, on the right the live Stratum page where it is split into a career direction, two metrics, and numbered step cards.
Before and after on one real answer: identical content, first as the model returns it, then as the interface arranges it.
Stratum home page with a question typed into the single input field, and a grid of existing community questions and their authors below.
Entry screen: one input is the only thing to do first, and the community grid below shows what an answer will look like before you ask.

AI Product Case

Designing for uncertainty, not only the happy path

Because AI responses vary by prompt and model state, the interface needs predictable containers, progress feedback, and clear next actions.

  • Structured modules prevent long, unfocused AI paragraphs.
  • Streaming motion gives feedback before the full answer completes.
  • Recommendation cards make options easier to compare and question.
Stratum mid-generation: the question and summary are already rendered while the steps below are still grey placeholder bars, with a Generate Guide button in the centre.
Waiting state: the answer arrives in place, with placeholder rows holding the shape of the guide so the layout never jumps when the real text lands.

Design System Case

A dark interface built around contrast and focus

The visual system uses a controlled mesh gradient, high-contrast accents, and repeatable card patterns to keep dense information readable.

Stratum mesh gradient visual specification.
Visual texture: the background sets the product mood without competing with content.
Outcome & Checks

Small-scale usability checks focused on whether users could understand the first recommendation quickly and identify a next action without reading every paragraph.

3 sec
First concept recognition target
4 modules
Career answer structure
1 prototype
Live AI response flow

Reflection

Next iteration should make AI confidence more explicit

The prototype improves readability. The next step is making confidence, sources, regeneration, and follow-up questions more transparent.

  • Add clearer regenerate and refine controls for users adjusting their career context.
  • Expose why a recommendation was made, so the advice feels more accountable.