Assignment 1: Redesign a form

Weight: 10% of the final grade · Deadline: announced in class

The brief

Find a form that genuinely annoyed you — a college admission form, a bank application, an online booking, a government portal. Screenshot it. Then rebuild it in Figma so that it works.

You are not being marked on decoration. You are being marked on whether the rebuilt version is measurably easier to complete.

What to submit

1. The original, screenshotted, with at least five annotated problems. Say what is wrong and which concept from the lectures it violates.

2. Your redesign as a Figma frame at 1440×1024 (desktop) or 390×844 (mobile). Pick one; do not do both badly.

3. A one-paragraph rationale — what you changed and why. Three sentences is enough if they are the right three.

Most-lost marks

Every year the same marks go missing in the same places: unnamed layers, text that is not using a shared style, and contrast that fails on the primary button. The checklist below is not busywork — it is the list of things I actually check first.

Before you submit

Pre-flight checklist

0% ready

• Every layer renamed — no "Frame 27" or "Rectangle 12" anywhere
• All frames use Auto Layout, not manual positioning
• Text uses shared text styles, not one-off font settings
• Colours come from published colour styles, no raw hex values
• Body text contrast passes WCAG AA (4.5:1) against its background
• Primary button contrast passes WCAG AA
• Tap targets are at least 44×44 pt
• Error states designed, not just the happy path
• The original screenshot is included and annotated
• File shared as "Anyone with the link → can view"
• Link pasted into the submission form before the deadline

How it is marked

Criterion	Marks
Problem analysis of the original	25
Information hierarchy and grouping	25
Visual craft (spacing, type, colour)	20
Accessibility (contrast, target size, labels)	20
File hygiene (naming, styles, Auto Layout)	10