Student Profile Product System ยท Companion Document 11

UX Wireframe and Workflow Map

A screen-by-screen product experience map for the student-facing MVP workflow.
Document TypeCompanion Guide
Version1.0
DateMay 2026

UX Goal

The user experience should make a deep reflective process feel manageable. The student should always know where they are, why a question is being asked, and what will happen next.

Primary Flow

  1. Landing page
  2. Sample output preview
  3. Checkout or free snapshot entry
  4. Accountless or lightweight access
  5. Consent and boundary screen
  6. Intake form
  7. Guided interview
  8. Progress review
  9. Profile generation
  10. Student review and edit
  11. Export and delivery
  12. Feedback survey
  13. Optional upgrade or revision

Screen Map

ScreenPurposeKey Elements
Landing PageConvert interest into start.Headline, sample output, CTA, pricing, privacy note.
Consent ScreenSet boundaries.Not therapy, private by default, editable output, deletion option.
Baseline IntakeCollect facts.Education, work, activities, goals, constraints.
Interview ModuleCollect qualitative evidence.Question groups, progress indicator, save/resume.
Reflection CheckpointReduce fatigue.Summary of answered sections and option to continue.
Generation ScreenSet expectation.Explains that profile is being built from evidence.
Review ScreenLet user inspect output.Profile sections, edit controls, evidence labels.
Export ScreenDeliver artifact.HTML, PDF-ready, Markdown/aboutme.md.
Feedback ScreenMeasure value.Recognition, usefulness, referral intent.

UX Principles

  • Do not make the student answer too many questions at once.
  • Use progress indicators.
  • Explain why each section matters.
  • Allow skipping sensitive or unclear questions.
  • Use plain language instead of assessment jargon.
  • Show sample answers where helpful.
  • Make the final artifact feel earned, not magically generated.

Fatigue Management

RiskMitigation
Long interview abandonmentBreak into modules and show progress.
Thin answersProvide optional prompts and examples.
OverthinkingTell students rough answers are acceptable.
Privacy hesitationMake sensitive questions optional and explain data use.
Output distrustShow evidence labels and editable sections.

Wireframe Notes

The MVP does not need complex visual design. It needs trust, clarity, progress, and strong final output. The visual system should feel closer to a professional report builder than a quiz app.