High-Fidelity Mockup Flows
Table of Contents
Overview
Continue the product work from your Structural Blueprint assignment and convert it into three high-fidelity mockup flows in Figma.
Your three required flows are:
Linear Path
Progressive Disclosure
IA-Driven Alternative
These should all come from the same product and build directly on last week’s structure, rather than starting over with a new idea. The previous assignment already established hierarchy, grouping, and structural logic, so this week focuses on carrying that work forward into a more developed visual system.
Deliverable
Submit one Figma file that includes:
1. Three high-fidelity flows
You must include:
one Linear Path flow
one Progressive Disclosure flow
one IA-Driven Alternative flow
2. A simple visual system
Your file should show:
a typographic system
a color system
an icon system
3. Reusable Figma elements
Your file must include:
text styles
color styles and/or variables
icons turned into components
What each flow means
Linear Path
A clear step-by-step flow with minimal branching.
Progressive Disclosure
A flow that reveals information gradually, instead of showing everything at once.
IA-Driven Alternative
A flow that reorganizes the information architecture or navigation logic in a meaningful way.
The goal is to explore three different structural approaches while keeping one consistent visual language.
What successful completion looks like
To complete this assignment successfully, make sure your file does the following:
continues directly from your Structural Blueprint
includes all three required flows
uses one consistent visual language across all flows
shows a clear type hierarchy
uses color intentionally and consistently
uses a coherent set of icons
turns repeated icons into components
includes realistic content rather than filler text
is organized clearly in Figma
A strong submission should feel like one product explored through three different flow structures.
What to include in your Figma file
A simple structure is enough:
Page 1 — Overview
project name
labels for the three flow types
Page 2 — Visual System
text styles
color styles and/or variables
icon set
icon components
Page 3 — Linear Path
Page 4 — Progressive Disclosure
Page 5 — IA-Driven Alternative
You can add an extra page for notes or states if needed, but it is not required.
Grading Criteria
1. Continuation from Structural Blueprint - 20%
The work clearly and obviously builds on last week’s product and structure.
2. Completion of all three flows - 20%
All three required flow types are present and clearly differentiated.
3. Visual system - 20%
The file includes a clear typographic system, color system, and icon system.
4. Consistency - 15%
All three flows feel like part of the same product.
5. Figma setup - 15%
The file includes text styles, color styles and/or variables, and icon components.
6. Clarity and realism - 10%
The content is specific enough to reveal actual hierarchy, spacing, and layout decisions.
Simple Rubric
Excellent
All three flows are complete and clearly distinct
The work builds directly from the Structural Blueprint
Typography, color, and icons are consistent across all flows
Repeated icons are built as components
The Figma file is organized and easy to review
The work feels ready to support the next assignment
Good
All three flows are present
The connection to the Structural Blueprint is mostly clear
The visual system is mostly consistent
Some reusable Figma elements are set up correctly
The file is understandable, with minor inconsistencies
Satisfactory
Most required parts are present, but one area is underdeveloped
Flow differences are somewhat unclear
The visual system is inconsistent or incomplete
Figma styles/components are only partially set up
The file works, but needs stronger organization or consistency
Needs Revision
One or more required flows are missing
The work does not clearly continue from the Structural Blueprint
Visual decisions are inconsistent or screen-by-screen
Required Figma setup is missing
The submission is difficult to review
Examples From Previous Semesters
The examples below are meant to give you an idea of what 1 single flow might look like and how much detail is contained.
These were all solid, but not perfect. Your goal should be to match and exceed.
Locked Message