Design Principles

Manuscripta's interface design is informed by Nielsen's usability heuristics, reviewed as part of the HCI component of the module. Given the dual-app nature of the system and the diverse profile of the student user base the following principles were prioritised throughout the design process.

Principle	Description
Simplicity	Interfaces minimise visual clutter and distractions. The student E-ink display shows only essential elements - content and navigation - with no colour, animation or unnecessary chrome. The teacher interface focuses on three core tasks: content generation, distribution and monitoring.
Consistency	Visual elements maintain predictable behaviour across both applications. Consistent typography, button styles and layout patterns reduce the learning curve and prevent confusion, particularly important for younger learners and neurodiverse users who benefit from routine and predictability.
Accessibility	High contrast ratios of at least 7:1 for E-ink displays, adjustable text sizes, and optional text-to-speech ensure students with varying sensory and cognitive needs can interact comfortably. Reading level adjustment supports comprehension across ability levels.
Feedback	Real-time feedback informs users of system status at every stage. Students receive immediate confirmation when answers are submitted. Teachers receive live progress updates and help request notifications. Loading states and confirmation messages ensure neither user is left uncertain about what the system is doing.
Error Tolerance	The system handles mistakes gracefully. Auto-save prevents work loss during network interruptions. Teachers can regenerate content if initial AI output does not meet their needs. Students can request help without penalty or drawing attention to themselves.
Privacy by Design	No data leaves the local network at any point. The interface contains no login screens, cloud sync indicators or external service integrations, reinforcing to both teachers and students that the system operates entirely within the school environment.

Sketches

We began by constructing personas and researching accessibility needs across our target audience, which identified the following requirements guiding our initial student interface sketch:

Initial Prototype

We translated our sketches into a digital interactive prototype using Google's AI Studio to generate basic React Typescript frontends. These simulated both the student and teacher interfaces, and were shared with clients via follow-up email and during design review calls to validate our design decisions and identify remaining usability issues.

You can explore the initial prototypes for the teacher and student interfaces here and here respectively.

Initial Prototypes

Prototype Evaluation against Nielsen's Heuristics

What Worked Well

Heuristic	Observation
Aesthetic and Minimalist Design	The monochromatic layout reduced visual noise effectively, keeping the interface calm and focused for all students
Match Between System and Real World	The worksheet and quiz formats mapped directly to materials teachers already use in the classroom, reducing the learning curve
Error Prevention	Auto-save prevented work loss during network drops, removing a significant source of anxiety for both teachers and students

Issues Identified

ID	Heuristic	Issue Identified	Client Feedback	Changes Made	Severity
C6	User Control and Freedom	No mechanism for teachers to regain student attention once content was distributed	"Ability to lock tablets to get students' attention when needed."	Classroom Attention Management, a Lock All Screens button was added for one-click control during instruction	3
C7	Consistency and Standards	Content was not organised hierarchically — units and lessons were treated as flat items	"Can we structure content as Units containing Lessons?"	Hierarchical Content Organisation, teachers can now specify unit and lesson numbers when creating content, then select and deploy via organised dropdowns	2
C8	Flexibility and Efficiency of Use	Students had to navigate away from lesson content to access quiz questions	"It would be nice if students could easily switch between lesson and quiz."	Seamless Navigation between Materials, a quick toggle was added allowing students to switch between lesson content and quiz questions without navigating away	2

Severity ranges from 1 (lowest) to 3 (highest).

Improved Prototype

Following the initial prototype evaluation, a second iteration was produced incorporating C6 through C8. A final round of feedback was gathered from personal contacts in the educational sector.

Teacher Interface

Student Interface

Evaluation

Heuristic	Issue Identified	Changes Made	Severity
Visibility of System Status	Student statuses shown with small coloured labels were difficult to read at a glance	The entire student block is now colour-coded to represent status - on task, needs help, or disconnected	2
Consistency and Standards	Terms such as lesson, quiz and worksheet were ambiguous to new users	Labels and terminology were clarified throughout both interfaces	2
Flexibility and Efficiency of Use	Lesson plans and teaching materials lacked optional numbering for organisation	Numbering was made optional when creating content	1

Final UI

The final interface evolved from our prototypes primarily through aesthetic refinement on the teacher side and functional simplification on the student side. Both applications adopt a modern, scholarly design language: pairing the Fraunces serif typeface for headings with IBM Plex Sans for body text, set against a muted palette of brand green, warm orange accents and soft cream backgrounds.

Teacher Portal

The teacher portal received primarily aesthetic updates, bringing the interface in line with the project's visual identity. The layout is organised into four core sections - Library, Classroom, Responses and Settings - each accessible from a persistent sidebar. The design prioritises clarity and efficiency, ensuring teachers can generate, manage and distribute content without navigating unnecessary complexity. The website itself mirrors the teacher portal's visual language, maintaining consistency across the project.

Library

Classroom

Responses

Settings

Student Device

The student interface retains the minimal, distraction-free character of the prototype but introduces key functional changes. The tabbed navigation was replaced with a dropdown selector, allowing students to scroll through and select any material, worksheet or feedback item. This allows the number of items on device to now grow dynamically. At the bottom of the screen, a persistent Raise Hand button allows students to silently request help at any time, while a Submit Answer button appears contextually when a worksheet is active. The simplify, expand and summarise buttons from the prototype were removed as those features were descoped from the final build.

Citations