Preview image. Unlock full-res
A project timeline interface for MediConnect showing four sequential design phases, each color-coded with progress indicators and task tags.
Summary
A project timeline interface dividing design and development work into four sequential phases: Research & Ideation, Wireframing & User Flow, High-Fidelity Design, and Testing & Iteration, each with distinct color-coded cards and task badges.
Visual description
Dark teal background with a subtle grid pattern. Header at top left shows "03" badge plus "Project Timeline" label with a thin horizontal line. Explanatory text in upper right defines the timeline format. Four rounded-corner cards arranged horizontally, each representing a phase with a progress indicator (dots and circles) along the top edge. Cards use distinct pastel backgrounds: mint green for Research, soft pink for Wireframing, light blue for High-Fidelity, and pale yellow for Testing. Each card lists the phase name in large black sans-serif type, followed by 2-4 task tags in outlined button style (e.g., "User Interviews", "Define Objectives" for Research; "UI/UX Design", "Design Testing" for Testing). Layout is spacious, left-to-right flow, implying sequential progression.
Key takeaway
Clean phase separator using color and cards instead of a linear timeline line. Task tags as outlined buttons nest naturally within each phase for scannable checklists. Subtle progress dots at card top suggest temporal advancement without visual clutter.
Reuse notes
Strong for project dashboards, design system documentation, or workflow breakdowns in SaaS platforms. Works especially well when phases need equal visual weight. Pair with detailed expandable task lists beneath each card for deeper interaction.
