HomeWorkServicesAboutBlogContact
Start a Project
Back to Work
EdTech·Design System·Multi-Portal Redesign·UX Audit

Scora

They asked for quick fixes. We gave them a platform.

Client
Scora (scora.io)
Year
2023–24
Scope
8 Months · EdTech
Candidate Portal
SCORA
84
Score
Admin Portal
Students2,840
Avg Score74%
Tests Live18
2,840
Students on the platform
74%
Average assessment score
18
Tests live at launch
3
Portals unified under one design system
01·Background

The brief was a patch job. The opportunity was a platform.

Scora, an EdTech assessment platform, reached out with a clear brief: apply a handful of technical fixes and help get the product live. Before touching a single line of code, a rapid UX audit was proposed. The stakeholders, eager to launch, agreed, expecting it to confirm the fixes were minor. What the audit found changed the engagement entirely.

Fragmented
portals with no shared visual language
Buried
key actions deep in menu structures
Redundant
steps in every core user workflow

That single decision, a UX audit before any code changes, shifted the engagement from a short-term patch to an eight-month strategic transformation of the entire product.

Project origin, Scora
02·The Challenge

Four failure modes, all interconnected.

The audit revealed that Scora's issues were not isolated technical bugs. They were structural UX failures that had accumulated across the entire product, each one compounding the others. Launching with these intact would have meant launching with a product that actively worked against its own users.

Inconsistent UI Patterns

Buttons, forms, and layouts varied screen to screen with no consistent logic
Users had to relearn interaction patterns at every new screen
No design token system, every component was a one-off

Unoptimised Workflows

Users repeating identical actions to complete simple tasks
Key actions buried deep in navigation hierarchies
No shortcuts or progressive disclosure for experienced users

Accessibility & Hierarchy Issues

Poor colour contrast failing basic accessibility thresholds
No typographic hierarchy to guide the eye across data-dense screens
Content difficult to scan, increasing cognitive load on every view

Fragmented Portal Ecosystem

Candidate, admin, and examiner portals looked and felt like different products
No shared component library driving visual inconsistency across roles
Outdated visual design undermining trust vs. competitors
03·UX Audit

Heuristics, benchmarks, and a product roadmap in one pass.

The audit was structured against established UX heuristics and benchmarked against competing EdTech assessment platforms. Every finding was rated by severity, critical issues blocking core workflows, significant issues degrading experience quality, and minor issues creating friction. The output wasn't a list of problems. It was a strategic roadmap.

Finding
Impact on users
Severity
Navigation depth
Key actions buried 3+ levels deep, forcing users to backtrack constantly
Critical
Inconsistent UI patterns
No component consistency, buttons, inputs, and cards all styled differently
Critical
Portal fragmentation
Three portals with no shared visual language, users felt context-switched
Critical
Redundant workflow steps
Common tasks requiring unnecessary confirmation steps and re-entry
Significant
Colour contrast failures
Text-background combinations failing WCAG AA in multiple areas
Significant
Typography hierarchy
Flat type scale, primary content not distinguished from secondary
Minor
04·The Constraint

A locked brand palette, turned into an anchor.

The most significant design constraint was a locked brand colour palette. The client had existing brand assets and marketing materials that meant the colour system couldn't be changed. In a typical redesign brief, this would be a starting limitation. In Scora's case, it became the creative anchor.

The Constraint

Locked brand colour palette, the brand's colour system was fixed. No changes to primary, secondary, or accent hues. Rather than treating this as a limitation, it became the stable foundation that everything else was built around.

What It Freed

Typography scale, whitespace rhythm, grid system, component density, shadow & elevation, and motion & feedback, all of these did the heavy lifting of the visual refresh, proving hierarchy and structure can modernise a product without touching a single hex value.

05·Approach

Five pillars of strategic execution.

01

Design System Creation

A component-based design system built to unify the entire product language.

Typography scale
Colour tokens
Component library
Interaction spec
02

Workflow Optimisation

End-to-end user journey mapping across all three user types, every redundant step eliminated.

Journey mapping
Bottleneck analysis
Step reduction
Task flow redesign
03

Multi-Portal Redesign

All three portals redesigned from the same design system, each tailored to its user's specific context.

Candidate portal
Examiner portal
Admin portal
Role-based UX
04

Rapid Prototyping & Iteration

Early prototypes tested with stakeholders before development began. Iteration happened fast, elements that didn't resonate were cut before they became code.

Stakeholder testing
User validation
Pre-dev iteration
Risk reduction
05

Website Redesign

Marketing website redesigned in alignment with the platform overhaul, extending the refreshed visual language to the first touchpoint.

WordPress implementation
Conversion design
Trust signals
Brand alignment
06·Design System

The single source of truth for every future decision.

The design system wasn't a deliverable, it was the infrastructure that made everything else possible. Without it, redesigning three portals in parallel would have produced three more fragmented products.

Typography Scale

Display, heading, body, caption, and label scales with line-height and tracking specs. The system that replaced the flat type hierarchy the audit identified.

Colour Tokens

Semantic colour roles (primary, surface, status, feedback) mapped from the locked brand palette. Tokens, not raw values, ensuring consistency across all contexts.

Component Library

Buttons, inputs, cards, modals, tables, navigation, badges, and status indicators. Every component documented with states, default, hover, active, disabled, error.

Interaction Patterns

Loading states, error handling, empty states, and feedback animations. Consistent interaction behaviour across all portals regardless of which team built each one.

07·Portal Architecture

Three portals. Three contexts. One ecosystem.

The most visible output of the design system was what it made possible: three completely different portal experiences that felt, for the first time, like they belonged to the same product. Each portal's UX was tailored to its user's specific workflow. The visual language was shared.

Candidate Portal

Test-taking flow optimised for focus, no distracting UI elements during exams
Progress visibility, upcoming tests, results, and overall performance at a glance
Mobile-friendly layouts for students accessing from low-end devices
Clear feedback states, saving, submitting, and timing communicated without ambiguity

Examiner Portal

Question creation efficiency, reduced steps between idea and published question
Question bank management with filtering, tagging, and bulk operations
Preview mode showing exactly how candidates will experience each question
Workflow that mirrors how examiners actually think, not how the database is structured

Admin Portal

Data density, maximum information per screen without cognitive overload
Bulk operations for managing large student and test cohorts efficiently
Score distribution visualisations and performance reporting built in
Permission and role management with clear, audit-friendly access controls
08·Impact

What delivering beyond the brief actually produced.

Scalable design system

A reusable component library and token system that enables the Scora team to build new features consistently without design involvement in every component decision. The design investment compounds with every future addition.

Streamlined workflows

Redundant steps eliminated across candidate, examiner, and admin journeys. The number of interactions required to complete core tasks reduced significantly, turning friction into flow.

Unified multi-portal experience

For the first time, all three user-facing portals felt like one coherent product. Consistent interaction patterns, shared visual language, and aligned information architecture.

Future-ready platform

The platform was not just redesigned, it was architected to scale. New features, portals, and user types can be added without breaking the system or requiring another full redesign.

09·Learnings

What strategic UX engagement actually looks like.

01

Small fixes rarely solve product problems

Surface-level patches address symptoms, not causes. The Scora audit proved that the presenting issue was a downstream effect of structural UX failures. Addressing only the symptoms would have shipped a fundamentally broken product.

02

A UX audit is the highest-leverage first step

One audit session, before any design work, reframed the entire project scope, aligned stakeholder expectations to reality, and produced a strategic roadmap. The cost was a fraction of the cost of shipping without it.

03

Constraints become anchors when respected

The locked colour palette that seemed restrictive turned out to be clarifying. With colour off the table, every other design decision had to carry the full weight of the visual transformation.

04

Design systems are infrastructure, not deliverables

The most lasting impact wasn't any individual screen, it was the design system that made all the screens possible. Infrastructure decisions taken early compound in value over every future feature cycle.

Scora came in with a launch deadline and a list of technical patches. A single UX audit before touching code changed everything, revealing issues deep enough that shipping without addressing them would have been a strategic mistake. Eight months later: a design system, three redesigned portals, and a new website.

More Work

Like what you see?

Let's build something worth a case study.