EDUC - OpenUP Project Overview

Summary

I restructured navigation, rebuilt search and filters, and introduced role‑coded cues (brand color paired with explicit labels) to make OpenUp faster to scan and use—improving task speed, success, and SUS while staying WCAG‑compliant.

Project at a Glance

TL;DR

The Challenge

OpenUp is an alliance academic platform (think LinkedIn for academia) spanning Jobs, Calls, Projects, Events, Groups and more. Engagement and usability had dipped: the left‑rail nav didn't scale, filters were hard to access and use, labels were generic, and contrast/hierarchy were weak. We needed faster findability without breaking brand or accessibility (WCAG 2.2; AA contrast).

What We Learned

• • Navigation was hard: too many items in the nav bar and some confusing or redundant pages.
• • Filters missed key facets and sat far from results; people scrolled back just to adjust.
• • Color semantics drifted (same color, different meanings across pages).
• • Contrast and target sizes fell short; elevation was heavy.

What We Changed (4 moves)

1) Clarified IA and primary navigation

Decision. Move Home, Jobs, Calls, Projects, Events into a top navbar; keep secondary areas (Facilities, Groups, Mentoring, Podcasts, Courses) in the side rail; add Saved for retrieval.

Why. Recognition over recall; aligns with familiar mental models.

Impact. Contributed to −39% time‑to‑task and +24 pp task success.

2) Made filters findable and faster to use

Decision. Sticky filters, prioritized facets, progressive disclosure for secondary options; refined labels via card sorting.

Why. Reduce back‑and‑forth scrolling; match user vocabulary.

Impact. Faster refinement and fewer mis‑filters; part of the overall time‑to‑task reduction.

3) Added role‑coded cues (color + label)

Decision. Map EDUC brand colors to five personas and use only on repeatable surfaces:

• • Cards in mixed lists: outline stroke + labeled role badge
• • Profiles: role badge + avatar ring; primary action styled
• • Never reuse persona colors for system feedback (success/warn/error)

Why. Let color tell one stable story—who, not what—and always pair with a label (WCAG 2.2 SC 1.4.1: Use of Color).

Impact (A/B, n=5). First‑click correctness 60% to 86.7%; time to first correct click 11.2s to 6.8s; fewer wrong‑persona clicks.

4) Tokenized hierarchy and accessibility

Decision. Apply design‑system tokens (type scale, spacing), soften elevation, standardize CTA color, meet AA contrast and hit‑target sizes.

Why. Clearer hierarchy, better readability, consistent interactions.

Impact. Reflected in SUS +11.7 and qualitative ease‑of‑use gains.

Validation and Iteration

Methods: internal pluralistic walkthrough to moderated usability tests with the same scenarios pre/post (n=12); focused A/B (n=5) for role‑coded lists and profiles.

Biggest miss: the green hero banner biased perception toward "Student." We tested neutralized header variants to reduce this drift.

Accessibility: role color is always paired with a text label (SC 1.4.1); contrast and target sizes tuned to AA; persona colors never reused for system feedback.

Outcomes

Delivery and Collaboration

Worked with project coordinators and a cross‑functional research group (students, staff, researcher) for walkthroughs and tests. Produced token‑level specs (where role colors do and do not appear), component states, and IA/filter documentation to support handoff.

What's Next

• • Confirm role‑coded effects at scale: rerun A/B with larger N; include mixed‑persona items.
• • Keep auditing accessibility: adjust Student vs Success green; reinforce system states with iconography and copy.

Data Notes

• • A/B (n=5) is exploratory; needs a larger sample.
• • Post‑launch analytics for zero‑result rate is not yet instrumented.
• • SUS/task metrics are only from n=12 moderated sessions.

Detailed Case Studies