Skip to main content
UI Coach Logo
Back to challenges
Intermediate

Transparent Late Assignment Path

Design a classroom submission flow that applies a clear late policy while supporting extensions and documented exceptions.

Responsive web, Mobile

The brief

Understand the problem

Background

A single due date can hide grace periods, approved extensions, penalties, and institutional support. Students need to understand the consequence of submitting now, and teachers need a consistent record without exposing private circumstances.

User context

Kim finishes an essay four hours after the deadline because of a documented accessibility issue. Her instructor has granted an extension, but the course portal still shows the standard late warning.

Product problem

Submission status must reflect the policy that actually applies to each student while keeping exception details restricted.

Objective

Create assignment detail, late-state calculation, extension request, and submission receipt for one course policy.

What to design

Define the experience

Required experience

  • Review due time, grace period, and personal extension
  • Preview the current submission consequence
  • Request an extension with minimum necessary information
  • Submit work and receive a policy-aware receipt

Screens and states

  • Assignment detail
  • Late-status review
  • Extension request
  • Submission receipt

Core user flow

Follow the critical path

  1. 01

    Kim opens the essay and sees her approved extension beside the standard date

  2. 02

    The review confirms that submitting now carries no penalty

  3. 03

    She uploads the final file and checks its readable preview

  4. 04

    The receipt records her applicable deadline and on-time status

Product rules

Requirements and constraints

Requirements

  • Calculate status from the student's applicable policy, not only the class default
  • Explain penalties with exact dates and worked examples
  • Keep accommodation reasons hidden from peers and unauthorized staff
  • Record file version, upload time, policy state, and receipt number

Constraints

  • Teachers cannot retroactively change a submitted student's visible policy without an audit event
  • Timezone and daylight-saving handling must be explicit
  • The flow cannot require medical details for an initial extension request

Reality check

States worth considering

Upload begins before but finishes after the deadline
An extension approval arrives during submission
The wrong file is uploaded
The course is in another time zone

Ready-to-use content

Mock data

Use this content to test hierarchy and realistic data states. You can expand it when the concept needs more depth.

Policy dates

  • Class due date: October 12 at 23:59
  • Grace period: 12 hours
  • Approved extension: October 14 at 17:00

Finish line

What to deliver

  • Four responsive screens showing a personalized deadline and verifiable receipt

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Color palette
#79674F
#EDE6D2
#090C0F
#B7B7B7
#A7A7A7
Font pairing
NunitoSpace Mono

Nunito & Space Mono

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations

Theory to review

UX principles for this brief

Use these as decision lenses, then validate the design with the people and context in the brief.