THE PROBLEM
Strong product thesis, fast shipping, and the experience debt that grew underneath it.
When Say Design joined Memorang, the company was already delivering real value. The end-to-end AI stack for education was live, partners were onboarding, and the product was directionally sound. Velocity itself was not the problem. The problem was that velocity alone does not compound unless the organization has a system for iteration. UI decisions were sometimes made locally for a single feature rather than globally for the system. As surface area grew across five services and partners expected consistent UX across modules, every new feature added experience debt: fragmentation, inconsistent mental models, and higher support and onboarding costs. The work was not broken. It was unsystemic.
Figma was used to explore. Implementation moved into production fast. The baseline disappeared.
Figma was used at Memorang, but it was not always treated as a maintained source of truth. A design file would explore and communicate, then implementation moved into production quickly. That can work for one-off shipping, but it creates a structural gap for iteration. Over time, the absence of a persistent design baseline produced inconsistency where multiple implementations of the same concept lived in parallel, drift between design intent and shipped code, slower iteration because there was no stable foundation to refine, and collaboration overhead where each new feature re-litigated foundational decisions that had already been made and forgotten. Design existed. The system around design did not yet exist.
Every new feature increased complexity unless we had repeatable patterns.
The core issue was not "we need a design system." The deeper issue was experience debt. Every new feature risked increasing complexity unless the team had repeatable patterns. As partners scaled usage, the product would need to be self-serve, discoverable, and trustworthy without constant training and support. Memorang serves enterprise credentialing bodies, publishers, and academic journals where clarity, governance, and trust matter more than visual polish. A clean UI alone does not serve a partner running a high-stakes professional certification program. Consistent primitives, auditable history, role-based permissions legible in the UI, and trust cues across every artifact type are the real deliverables. That standard is what the design system had to meet.
THE DESIGN JOURNEY
Building a platform UI operating system, not improving isolated pages.
Implementation alignment from day one. Patterns shipped before polish. AI-forward prototyping to compress decision cycles.
Shadcn primitives, Radix behaviour, Tailwind tokens, Storybook as living documentation.
A design system fails when design and code diverge. From day one, the foundation was built on primitives Memorang's engineering team already used. Shadcn provided the composable component base. Radix UI provided accessible behaviour primitives. Tailwind carried the token system. Storybook served as living documentation for components, states, and behaviour. This was not a theoretical alignment. Memorang's public tech stack lists React, Radix UI, and partnerships with leading AI providers. The design-to-code mapping was 1-to-1 from the start, which meant every Figma component had a code counterpart, every state was implementable, and engineers never had to translate between design intent and shippable interface.
Clarity-first UI for enterprise workflows. Visible metadata. Explicit context. No hiding to look clean.
Memorang's users run high-stakes workflows. They are configuring credentialing programs, building knowledge graphs, and managing compliance across multiple stakeholders. Clarity is not the same as minimalism. Clean UI alone increases cognitive load when users need descriptions, helpful hints, visible metadata, and explicit state. The discipline became: when complexity grows, do not hide information to make the UI look simpler. Reduce complexity through hierarchy, consistent grouping, clear headers and sub-headers, descriptive labels, and explicit empty-state guidance. This made the product harder to design and easier to use. Every screen carried more information than a typical SaaS dashboard, but every piece of information had a predictable place.
Time compression, not automation. Faster loops between question and testable prototype.
As Memorang leaned more AI-forward, the design workflow itself absorbed AI tooling. The output was not automation. The output was time compression. AI-enabled prototyping shortened the loop between question and testable interaction prototype, allowed faster iteration on variants before committing to a final pattern, and produced concrete artifacts that aligned stakeholders earlier. The main value was that the design team could explore three variants in the time it used to take to build one, then take the winning variant into Storybook for engineering implementation. Better decisions through more options, faster. Confidence through testable artifacts rather than polished but theoretical Figma files.
THE SOLUTION
Hub, EdWrite, EdFlow, EdSpace, and AiBL all run on the same primitives, same navigation principles, and the same record-level template.
Hub, EdWrite, EdFlow, EdSpace, AiBL: different rooms in the same building.
Memorang's platform spans five distinct services that partners move through to launch and operate AI-native learning products. Hub is the unified entry point and control plane covering organization and project selection, governance, navigation, and global search. EdWrite is the content and knowledge system where partners author, structure, and import source materials. EdFlow is the agent builder and training environment for configuring, testing, evaluating, and deploying AI agents. EdSpace is the commerce and operations layer covering products, orders, access codes, entitlements, and support. AiBL is the learner-facing app and delivery layer. The work was making these five services feel like different rooms in the same building rather than different products: shared navigation principles, shared record-level patterns, shared mental models for moving between list and detail.
One template, every artifact, every service.
In complex systems, the detail page is where most work happens. If detail pages are inconsistent across artifact types, the product will always feel fragmented. The Record Detail View template solved this with a fixed structure: a record header carrying title, status, and primary actions; a content region with predictable sections and tabs; a property panel for metadata, related entities, and suggestions; and an activity timeline for traceability and audit. The same template renders a content item, an AI agent, a customer record, an order, a media object, or a knowledge graph node. Each new artifact type inherits a proven pattern instead of inventing a new layout. This single template became the most reusable primitive in the platform.
The system is workflow change as much as UI change.
A property panel created a predictable place for status, metadata, linked entities, audit history, and contextual suggestions. The main content region stayed focused on the core task while metadata stayed visible, addressing one of the platform's most consistent user requests: visibility without navigation. Microcopy and empty states became their own discipline. Documented rules and patterns shipped for empty states with recommended next actions, dialog and CTA copy conventions, content hierarchy and descriptions, and consistent error and feedback patterns. The intent was to reduce reliance on designers for routine questions by making patterns accessible across the whole organization. The result: greater consistency across modules, faster shipping with fewer review cycles, and better self-serve behavior for end users.
THE KEY MOMENT
Different data, same page type.
Multiple artifact types ship across Memorang's platform: content items, AI agents, datasets, graders, orders, customers, media, knowledge graph nodes. Each one demands a detail view. The temptation in a fast-shipping environment is to design each detail view bespoke to its artifact, optimised for the specific properties that record carries. The signature decision rejected that path entirely. The Record Detail View became one template that adapts to any artifact: same header pattern with title, status, and primary actions, same content region with predictable tabs, same property panel for metadata and related entities, same activity timeline for traceability. Different data, same page type. The user learns one detail-view pattern once, then applies that learning across every part of Memorang. Each new artifact type inherits a proven pattern instead of inventing a new one. This single template did more to unify the platform's experience than any other decision in the system. It is the design language for any future cross-service feature, the foundational primitive that lets Memorang ship at platform speed without paying experience-debt interest on every new feature shipped.
The work, in detail.
Component variants, Record Detail View applied across artifacts, knowledge graph canvas, self-serve onboarding flow, design system tokens, and the full platform surface area.
Memorang
industry:
Ed-Tech, B2B SaaS, AI
SCOPE:
Website
,
Product
duration:
2 Years - Ongoing
key outcome:
47%
faster question reviews
