Unispace

Story

1. 01

   01Challenge

   Conditional form complexity

   12 base fields expanding into 4 distinct paths with 0-5 additional fields each. Designing one pattern to cover all cases without cognitive overload.

   Solution

   Same-page progressive disclosure

   Status fields expand inline below the dropdown, labeled as a distinct section. Users always see their position in the form with no multi-step wizard.

2. 02

   02Challenge

   Role asymmetry

   Students self-register; lecturers are added by admin. A student who later becomes a lecturer has two separate accounts. The system had to communicate this clearly.

   Solution

   Single login endpoint, role-based redirect

   One login screen routes to the correct dashboard based on backend role. Role switching is documented as a tooltip, not a UI element.

3. 03

   03Challenge

   Certificate gating

   The certificate button is always visible but only activates when an admin uploads the certificate. Communicating a 'feature exists but isn't ready yet' state without frustrating users.

   Solution

   Visible-disabled with tooltip

   Certificate button always rendered, opacity 40%, cursor: not-allowed, with tooltip: 'Available once your administrator uploads your certificate.'

4. 04

   04Challenge

   Public vs. private boundary

   The portfolio page is a public shareable URL; the cabinet is fully private. One system, two access contexts, one coherent visual language.

   Solution

   Dedicated public portfolio route

   /portfolio/[username] is a clean, minimal public page optimized for first impressions, no nav clutter, no login prompts. One-click copy button in the private cabinet.

5. 05

   05Challenge

   Verification flow edge cases

   5 distinct states: initial, auto-redirect (countdown), manual redirect, resend link, password recovery. Every state needed a clear action and fallback.

   Solution

   Countdown + parallel CTA

   Visual countdown timer (5 seconds) for auto-redirect, plus a manual "Go to Login" button. User stays in control regardless of their speed.

1. 01Cognitive load reduction

   Conditional Fields, Same Page, Not Wizard

   Splitting status-specific fields into a separate step would create unnecessary friction at a critical dropoff point. Same-page expansion keeps the user grounded, always aware of total form length, and avoids 'where am I?' confusion across 4 possible paths.

2. 02Accessibility and brand

   Dark Mode as Default for Internal Tools

   Unispace is an internal platform used for hours at a time. Dark mode reduces eye fatigue during extended sessions, creates a professional environment that aligns with Unilab's engineering brand, and makes the blue accent significantly more impactful.

3. 03User control and clarity

   Countdown Timer with Parallel Manual CTA

   After verification, users lose orientation instantly. A visible countdown (5s) provides clear feedback that something is happening; the manual button preserves user agency for those who don't want to wait. Both user types served simultaneously.

4. 04Feature discovery

   Certificate, Visible, Disabled, Explained

   Hiding the certificate button entirely would make users unaware the feature exists. Showing it as disabled with a clear tooltip sets correct expectations and keeps users engaged rather than confused.

5. 05Audience-specific design

   Portfolio as a Dedicated Public Route

   The portfolio page serves a completely different audience, potential employers and clients, not platform users. It was designed from scratch for first-impression clarity: no nav, no login prompts, clean project banners.

6. 06Form usability

   Region → City Cascade Dropdown

   Showing all Georgian cities at once creates a 70+ item dropdown that is nearly unusable. Filtering cities by selected region reduces the list to 3-12 items, eliminates impossible combinations, and cuts selection time by an estimated 60%.

• 3 Roles Live

  Student, Lecturer, and Admin dashboards fully designed, documented, and handed off to development.

• One Place for Information

  Projects, documents, statuses and certificates that used to live in different places now sit in one work platform, each role seeing its own part.

• 38+ Component Library

  Reusable, documented component library with full state coverage.

• 42 Screens Delivered

  From registration to portfolio, every screen for every role across three breakpoints (1440 / 768 / 375px).

• Clean Figma Handoff

  Full Figma annotations, component specs, spacing tokens, and interaction notes. Engineers had everything they needed on day one.

• 17 Edge Cases Covered

  Every form state, empty state, loading state, error state, and conditional path documented and designed before handoff.