INTERACTIVE MEDIA DESIGN
Laboratory Activity
Mid-High Fidelity
Prototype Design
Login · Home · Store
SUBJECT TYPE TIME
Interactive Media Design Individual Lab Output 90 – 120 Minutes
Activity Overview
What you will build and why it matters
In this laboratory activity, you will design a Mid-High Fidelity interactive prototype for a mobile or
desktop application of your choice. Your prototype must consist of at least three screens — a Login
Page, a Home Page, and a Store Page — connected through correct user flow with real
interactions and animated transitions.
Unlike wireframes or low-fidelity mockups, a mid-high fidelity prototype is expected to closely
resemble the final product in visual design, component styling, and interactivity. You are evaluated
not just on what the interface looks like, but on how it behaves.
Fidelity Target Reference
Aspect High Fidelity Mid Fidelity (Target) Low Fidelity
Typography Actual fonts, sizes, and Consistent font family; Placeholder text only; no
weights specified sized appropriately font decisions
Color Full color palette applied; Colors applied but Grayscale or no color
hex values defined inconsistent or incomplete applied
Layout Pixel-level precision; Mostly precise; minor Rough placement only
proper spacing/grids alignment issues
Imagery Real images or high- Styled placeholder boxes Plain empty boxes
quality placeholders used with labels
Components Custom, styled UI Generic but labeled Wireframe-level shapes
components (buttons, components
cards)
Interactions Clickable prototype with Some links work; minimal Static screens only
transitions/animations animation
RECOMMENDED TOOLS
Figma ([Link]) — free, browser-based, best-in-class prototyping
Adobe XD — available in Adobe Creative Cloud
Protopie — powerful micro-interaction tool (free tier available)
InVision Studio — alternative with strong animation support
You may use any professional design tool approved by your instructor.
Requirement Specifications
What your prototype must fulfill
2.1 Global Requirements
The following requirements apply to the prototype as a whole, regardless of which page is being
evaluated.
RE Minimum of 3 screens — Login Page, Home Page, and Store Page — must be present and
Q-
complete.
G1
RE The prototype must be interactive: all primary navigation paths must be clickable and functional.
Q-
G2
RE A minimum of 2 distinct animated elements must be present anywhere across the prototype.
Q-
G3
RE Visual design must meet mid-high fidelity standards: real typography, defined color palette, styled
Q-
components.
G4
RE A consistent design system (colors, fonts, spacing, component styles) must be applied across all
Q-
3 pages.
G5
RE The prototype must be presented in a defined device frame (mobile 390x844 or desktop
Q-
1440x900 minimum).
G6
RE All interactive flows must be logical and error-free — tapping/clicking a button must lead to the
Q-
correct screen.
G7
2.2 Required User Flow
The three pages must be connected in the following logical navigation flow. Additional screens and
flows are allowed but these paths are mandatory.
LOGIN PAGE HOME PAGE STORE PAGE
Entry point
--> Post-login
--> Browse & buy
FLOW NOTES
Login Page: Tapping/clicking the login button must navigate to the Home Page.
Home Page: Must contain a link or navigation element that leads to the Store Page.
Store Page: Must contain a way to return to the Home Page (back button, nav bar, etc.).
You may add additional pages (e.g., Product Detail, Profile, Cart) for bonus credit.
2.3 Per-Page Specifications
Each page has its own set of required elements, required interactions, and required or suggested
animations.
Page 1 — Login Page Entry Point
Required Elements Interactions Animations / Transitions
App logo / brand name Login button navigates to Home Button press feedback
Page (scale/color change)
Email or username input field Forgot password shows overlay Screen-to-screen transition on
or new screen login
Password input field Input fields are Input field focus animation
tappable/focusable (border/glow)
Login / Sign In button Form validation state visible Logo entrance animation (optional
(optional) bonus)
Forgot password link
Sign up link or redirect
Page 2 — Home Page Post-Login
Required Elements Interactions Animations / Transitions
Top navigation bar or header Navigation links route to correct Page entrance transition from
screens Login
User greeting or profile element Content cards are tappable Card hover/tap highlight effect
Featured content area Back / logout interaction exists Banner auto-scroll or swipe
(banner/cards) animation
Navigation to Store Page Scroll behavior defined (fixed Navigation transition to Store
nav, etc.) Page
At least 2 content sections or
cards
Bottom navigation bar (mobile)
or sidebar (desktop)
Page 3 — Store Page Browse & Buy
Required Elements Interactions Animations / Transitions
Page header with store title Search/filter interaction is Product card tap/press animation
present (can be visual)
Search bar or filter controls Product card tap shows Add to Cart button confirmation
feedback animation
Product grid or list (min. 4 Add to Cart updates cart count Page transition from/to Home
products) Page
Product card with image, name, Navigation back to Home Page Filter/sort panel slide-in (optional
price works bonus)
Add to Cart button per product
Cart icon with item count
indicator
2.4 Animation Requirements
You must include a minimum of 2 animated elements across your prototype. The table below
defines the animation types accepted and the quality criteria for each.
Animation Type Description / Example Quality Criteria Counts Toward
Min.
Screen Transition Animated navigation between Smooth, consistent YES — counts as 1
pages (slide, fade, push) direction and duration
Micro-interaction Button press feedback, input Purposeful, not YES — counts as 1
focus glow, toggle switch distracting; correct timing
Component Card entrance, list item stagger, Adds context; easing YES — counts as 1
Animation banner carousel curve applied
Loading / State Skeleton loader, spinner, empty Communicates system YES — counts as 1
state animation state clearly
Scroll Animation Parallax header, sticky nav fade, Performance-conscious; YES — counts as 1
element reveal adds depth
Decorative / Background gradient shift, lottie Subtle; does not distract Bonus only
Ambient icon, logo pulse from content
Submission Checklist
Complete every item before submitting
Work through this checklist before you hand in your prototype. Every checked item means your
submission is ready. If any box is unchecked, revisit that requirement.
Category Checklist Item Done
Files & Setup Prototype file is saved and shareable (Figma link, XD file, etc.) []
Device frame is defined (mobile or desktop; correct dimensions) []
Prototype is set to Start at the Login Page []
Login Page App logo or brand name is displayed []
Email/username input field is present and styled []
Password input field is present and styled []
Login button is styled and clickable []
Login button correctly navigates to the Home Page []
Forgot Password and Sign Up links are visible []
Home Page Navigation bar or header is present []
User greeting or profile element is included []
At least 2 content sections or cards are visible []
Store Page can be reached from the Home Page []
Page entrance transition from Login is defined []
Store Page Store header / title is visible []
Search bar or filter controls are present []
At least 4 product cards are shown (image, name, price) []
Add to Cart button is present on each card []
Cart icon with item count indicator is visible []
Navigation back to Home Page is functional []
Animations At least 2 animated elements are present and working in prototype mode []
Screen transitions between all 3 pages are defined []
At least 1 micro-interaction (button press, input focus, etc.) is present []
Animations have appropriate easing and duration (not instant, not too []
slow)
Visual Design A consistent color palette is applied across all 3 pages []
Typography is defined (actual font family, not placeholders) []
Spacing and alignment are consistent across components []
Components (buttons, inputs, cards) are styled, not plain wireframe []
shapes
Images or high-quality placeholder images are used []
Flow & Interaction All primary navigation paths are clickable and route correctly []
No dead ends — every screen has a way to navigate forward or back []
Interactive states (hover, pressed, focused) are defined where []
applicable
Prototype can be demoed end-to-end without breaking []
BEFORE SUBMITTING
Remove all construction guides, notes-to-self, and unfinished frames before sharing your file link.
Make sure sharing permissions are set to 'Anyone with the link can view'.
Grading Rubric
How your prototype will be scored
Scoring Scale: 5 — Excellent | 4 — Proficient | 3 — Developing | 1–2 — Incomplete. Each criterion is
scored and multiplied by its weight. Maximum score: 100 points.
Criterion Excellent 5 Proficient 4 Developing 3 Wt.
Completeness (All 3 All 3 pages fully 5 All 3 pages 4 All 3 pages present 3 20
Pages) designed with present; 1–2 minor but several %
every required required elements required elements
element present missing. are absent.
and visible.
Visual Fidelity Mid-high fidelity 5 Mostly mid-fidelity; 4 Mostly low-fidelity; 3 20
clearly met: real some wireframe- heavy use of %
fonts, full palette, level areas remain. placeholder shapes
styled components, and grayscale.
imagery.
Prototype Flow & All flows work 5 Most flows work; 1– 4 Flows are partially 3 25
Interactions correctly. Every 2 links missing or set up; multiple %
primary path leading to wrong broken or missing
navigates to the screen. links.
right screen. No
dead ends.
Animations (Min. 2) 2+ animations 5 2 animations 4 Only 1 animation 3 20
present, present but one present, or %
purposeful, smooth, lacks polish or animations are
and correctly timed. appropriate easing. jarring/instant.
Easing applied.
Design Consistency Uniform design 5 Mostly consistent; 4 Noticeable 3 10
system across all minor deviations in inconsistencies in %
pages: consistent 1–2 areas. layout, color, or
colors, fonts, component style
spacing, and across pages.
components.
Polish & Craft Prototype feels 5 Good overall; a few 4 Several areas feel 3 5%
production-ready: rough edges in unfinished or
clean layout, spacing or hastily assembled.
intentional spacing, alignment.
refined details.
TOTAL Score = (sum of criterion score × weight). Maximum: 100 points. 100
%
Bonus Credit (up to +10 points)
Bonus Criterion Condition Points
Additional screen(s) beyond the required 3 (e.g., Product Detail, Cart, 1+ extra +3
Profile) screens, fully
designed and
connected
Additional animations beyond the required minimum 3 or more total +2
animated
elements
Advanced micro-interactions (form validation states, loading skeletons, At least 2 +3
toggle animations) advanced
interaction
states
Component library or design system panel created in Figma/XD Reusable styles +2
and
components
documented
Submission Instructions
What to Submit
1. Prototype link (Figma share link / XD Cloud / Protopie Cloud) — set to Anyone with link can view.
2. A brief screen recording or video walkthrough (1–3 minutes) demonstrating the full flow and
animations.
3. This completed checklist — either printed and signed, or submitted digitally with checkboxes filled.
Deadline and submission method will be announced separately by your instructor.
SHARING SETTINGS
Before submitting a Figma link, click Share > Change to Anyone with the link > set to Can view. Then
paste the link into your submission. Links that require sign-in will not be graded.
End of Activity · Design with intention. Prototype with purpose.