FOOD ORDERING LANDING PAGE

Overview BRIEF

Design a welcoming landing page that helps hungry users discover a meal, understand the value, and place an order with confidence. Clarify value and dietary signals before asking for the checkout.

Tools & Skills Required SKILLS PRACTICED

Wireframing, Responsive Grids & Visual Hierarchy CTA Placement & Conversion Path Design Color Systems, Food Photography Styling & Typography Scales Spacing Rhythm & 8pt Grid Architecture Reusable Card, Badge & Button Component Consistency Accessibility Checks (WCAG Contrast, Touch Targets, Scannability) User Research Synthesis & Interactive Usability Testing

Target & Key Sections to Design SPECIFICATION

• Hero section: with a clear value proposition and primary call to action;
• Featured dishes & categories: organized for fast browsing and instant discovery;
• Menu previews: with transparent pricing, ingredients, dietary labels (Vegan, GF, Halal), and imagery;
• Trust & fulfillment indicators: delivery estimates, customer ratings, trust signals, and active promotions;
• Simple order-start flow: transitioning seamlessly between mobile and desktop viewports.

LANDING PAGE BLUEPRINT • CONVERSION SIGNALS

Hero Header: [Value Prop + Instant Zip Search]

Dietary Badges: [Gluten-Free • Vegan • Halal]

Price Card: [$14.50 • 25-35 min delivery]

Primary CTA: [Start Custom Order →]

Social Proof: [4.9 ★ • 12,400+ local reviews]

02 | INTERMEDIATE TRACK A • SERVICE ARCHITECTURE

2 INTERMEDIATE

COLLEGE ATTENDANCE APPLICATION

Overview BRIEF

Coordinate student, faculty, and administrator workflows across mobile check-ins and administrative dashboards. Design modular systems that scale across roles and screen sizes.

Tools & Skills Required CONCEPTS APPLIED

Multi-Role UX Architecture (Student, Faculty, Admin Persona Paths) Dashboard Architecture & Data Density Balancing Mobile Check-in Ergonomics & Touch Target Layouts Status Token Design (Present, Late, Excused, Absent) Exception Workflows & Verification Approval Gates Audit Log Data Tables & Alert Push Notification Systems

Target & Service Architecture SPECIFICATION

• Role-specific dashboards: tailored views for marking, reviewing, and verifying student presence;
• Roster & schedule management: class schedules, live rosters, status toggles, and attendance percentage reports;
• Exception handling states: clear UI states for medical excuses, manual corrections, and permission gates;
• Audit & alert engine: chronological audit logs and automated push alerts for unverified absences or threshold drops.

ROLE ROSTER • STATUS DISPATCH STATE

Student View: [Geofence Tap-In]

Current Course: [CS-302 • Lab 4]

Overall Rate: [94.2% • Compliant]

Faculty Roster: [Live Status Toggles]

Medical Excuse: [Approval Pending]

Admin Audit: [Logged • SHA-Verified]

03 | INTERMEDIATE TRACK B • PLATFORM ECOSYSTEM

3 INTERMEDIATE

ONLINE LEARNING PLATFORM

Overview BRIEF

Structure course discovery, self-paced content, and measurable student progress across web and tablet layouts. Design modular systems that scale across curriculum tiers and learner milestones.

Tools & Skills Required CONCEPTS APPLIED

Modular Design Systems & Atomic Component Architecture Course Discovery & Multi-Tier Syllabus Filter UX Video/Lesson Player Ergonomics (Resource Trays, Transcripts) Progress Gamification & Milestone Achievement Badges Multi-Device Responsive Breakpoints (Desktop, Tablet, Mobile) Design Tokens Across Cards, Navigation, Forms & Assessment States

Target & Platform Ecosystem SPECIFICATION

• Catalogue discovery: browse course libraries, filter syllabus tiers, and streamline enrollment flows;
• Modular lesson player: interactive video workspace with resource trays, transcripts, and deadline alerts;
• Learner profile ecosystem: personalized progress meters, completion badges, and milestone trackers;
• Unified design tokens: synchronized styles across cards, navigation bars, assessment states, and feedback modals.

LEARNING ECOSYSTEM • PLAYER BLUEPRINT

Active Track: [UI/UX Systems]

Module 03: [Atomic Tokens]

Video Player: [Tray + Transcript]

Progress: [68% Completed]

Badge Earned: [Layout Master]

Milestone: [Certificate Ready]