From accumulated features to a coherent product ecosystem.
VAC had grown into a feature-rich learning platform, but its interface had accumulated inconsistent navigation, layouts, states and interaction patterns. As the solo Product Designer, I audited the platform, prioritised release-blocking UX risks, rebuilt the shared product shell and stabilised core learner workflows. The four-month initiative shipped as a major VAC release and created the design foundation through which adjacent company products could later plug into the platform.
Select the evidence board to inspect the supplied product frames.
End-to-end platform audit, stabilisation and delivery
Product Designer owning the design workstream
Core product areas represented in retained stabilised evidence
Major product release delivered with engineering
Section 1 of 12Overview
Overview
A release-stabilisation project became a product reset.
The original mandate was to audit VAC and polish new functionality before release. The audit revealed that isolated fixes would not be enough: navigation, page hierarchy, interaction patterns, accessibility, empty states and visual language were inconsistent across the platform. The work therefore expanded into a structured product stabilisation effort.
Fragmented
Feature-rich screens lacked a consistent shell, hierarchy and interaction language.
Systemised
Shared navigation, page anatomy, filters, cards, tables, forms and state patterns.
Stabilised
Core learner journeys became clearer, more predictable and production-ready.
Extensible
The new shell created a foundation for adjacent products to connect into VAC.
The turning point was recognising that VAC did not need another layer of polish. It needed a stable interaction model that could hold the product together as it grew.
Context
A configurable LMS had accumulated product debt across its most important journeys.
VAC is a deskless training LMS used by organisations to deliver courses, exams, surveys, resources, achievements and communications. The product supported tenant branding and several user roles, but years of feature growth had produced inconsistent structures across learner, author and administrative surfaces.
Every area behaved differently.
Users had to relearn navigation, filters, tables, forms and feedback patterns as they moved between learning, messaging, reporting and account tasks.
Product inconsistency constrained growth.
A fragmented experience made new functionality harder to adopt, increased implementation effort and weakened VAC’s ability to act as the centre of a broader product ecosystem.
Multi-role platform
Learners, authors and administrators required related but distinct workflows.
Tenant branding
The product needed consistency without eliminating customer identity.
Active feature roadmap
New functionality had to ship while foundational issues were being stabilised.
Engineering delivery
The system needed to be feasible for incremental implementation, not only visually ideal.
Role & ownership
I owned the design programme as the sole Product Designer.
Across four months, I conducted the platform audit, synthesised systemic issues, defined the stabilisation strategy, redesigned the shared shell and representative workflows, and prepared the product for engineering implementation and release.
- Navigation and IA fragmentation
- Visual and interaction inconsistency
- Accessibility and readability risks
- Workflow and click-depth problems
- Missing states and feedback
- Unified product shell
- Navigation hierarchy
- Page, card and table patterns
- Learning, messaging and account flows
- Empty, warning and confirmation states
- High-fidelity stabilised frames
- Reusable component direction
- Workflow specifications
- Engineering handoff
- Implementation support for release
Process
A four-month stabilisation framework connected diagnosis, system design and release delivery.
The work was sequenced to reduce release risk. I first established the recurring failure patterns, then stabilised the product shell before extending the same interaction rules into high-frequency learner workflows and engineering-ready states.
Audit
Review core surfaces through heuristics, accessibility, navigation, consistency, state coverage and task-flow lenses.
Prioritise
Separate release blockers, system-level issues, workflow redesigns and longer-term product opportunities.
Stabilise
Introduce a shared shell and apply coherent patterns across the most important learner journeys.
Ship and scale
Deliver engineering-ready UI and establish a product foundation that could support future integrations.
Audit and synthesis
Map recurring UX debt across navigation, dashboards, reporting, messaging, authoring and authentication.
Principles and shell
Define prioritisation rules, navigation hierarchy, page anatomy and the reusable visual direction.
Workflow stabilisation
Apply the system across learning, resources, progress, messaging, account, exams and achievements.
Handoff and release
Complete interaction states, organise implementation slices and deliver the stabilised release direction to engineering.
Platform audit
The audit revealed a product-system problem rather than a collection of page defects.
The retained audit boards show issues across dashboard, navigation, reports, categories, messaging, examinations, authentication, authoring and user-progress reporting. Recurring patterns mattered more than any individual screen.
Orientation and structure
Top and side navigation lacked a clear relationship, terminology overlapped and important destinations were buried.
No shared interaction grammar
Buttons, forms, cards, tables, filters and page layouts varied by feature area.
Too much to process
Dense screens lacked clear primary actions, grouping and progressive disclosure.
Readability and contrast
Low contrast, small controls and crowded information increased effort across long administrative tasks.
Empty, loading and feedback gaps
No-result pages and incomplete workflows often failed to explain what happened or what to do next.
Feature growth without a foundation
New functions risked multiplying inconsistency and making future product integration more expensive.
Direct comparisons make the stabilisation visible.
Each pair links a retained audit condition to the stabilised design response. The supporting composite boards remain available elsewhere in the case study.
Dashboard: from competing summaries to prioritised learner work
The original dashboard exposed several summary blocks without a strong next-action hierarchy. The stabilised version foregrounded current courses, progress, tasks and intentional empty states.
Reporting: from a dense administrative table to summary-to-detail comprehension
The stabilised Progress Report established learner context and high-level signals before exposing activity charts, completion status, filters and course-level records.
Messaging: from a form page to a recognisable communication workspace
The original compose screen behaved like an isolated utility. The stabilised version introduced inbox organisation, message reading, replying and composition through one coherent model.
Authentication: from a visually separate entry point to the VAC product language
The stabilised sign-in, registration and OTP experiences aligned brand, typography, input hierarchy and alternative authentication routes while keeping the task focused.
Strategy
Not every issue deserved the same response or release priority.
I organised the work around four levels: stabilise the shared shell, repair high-frequency learner tasks, complete missing system states and create a scalable foundation for future VAC and ecosystem features.
Predictability before novelty
Shared layouts and behaviours reduced the need to relearn each product area.
One action hierarchy
Primary, secondary, destructive and passive actions received consistent visual treatment.
Progressive complexity
Filters, detail and advanced actions appeared when relevant rather than competing on first view.
States are part of the product
Empty, warning, confirmation and completion states explained status and next steps.
Tenant-aware consistency
The interaction model remained stable even when customer branding changed.
Design for extension
Navigation and page patterns anticipated other company products connecting into VAC.
Findings translated into release rules
This table makes the prioritisation logic explicit so the audit did not turn into an unbounded redesign.
| Audit finding | Design response | Representative product evidence |
|---|---|---|
| Navigation was scattered Overlapping destinations and weak orientation increased click depth. |
Introduce one persistent shell. Group destinations by learner intent and expose nested areas contextually. |
Dashboard, Learning and Account use shared side navigation with consistent active, expanded and utility states. |
| Pages lacked hierarchy. Controls, content and secondary detail competed equally. |
Standardise page anatomy. Title, filters, search, content region and primary action follow one order. |
Resources, Courses and Messaging repeat filters, search and content layouts. |
| Empty states were unfinished. No-result screens did not guide the user. |
Design explanatory states. Use illustration, plain-language status and a relevant next action. |
Dashboard, Collections, Files and Badges share one empty-state pattern. |
| Critical flows lacked safeguards. Exam and purchase actions needed clearer confirmation. |
Make state transitions explicit. Use focused modals, warnings and completion feedback. |
Exam attempts and purchase flows communicate start, incomplete, submit and success states. |
| Growth increased inconsistency. New features had no reusable foundation. |
Build shared patterns. Navigation, cards, tabs, tables and messaging become reusable product primitives. |
Platform-wide stabilised frames show a common language across eight or more product areas. |
The release model made scope decisions explicit
The categories below communicate the prioritisation logic used to prevent a platform-wide audit from becoming an unbounded redesign.
| Priority | Decision rule | Representative scope | Why it mattered |
|---|---|---|---|
| P0 | Required for a coherent and trustworthy release | Shared navigation, critical forms, warnings, confirmation and completion states | Users could not safely or confidently complete important journeys without these foundations. |
| P1 | High-frequency learner or administrator friction | Dashboard, learning discovery, progress reporting, messaging and authentication | These areas shaped everyday product comprehension and adoption. |
| P2 | System consistency and reusable scale | Cards, tables, filters, pagination, page anatomy, empty states and visual hierarchy | Reusable rules prevented each new feature from creating another interaction model. |
| Roadmap | Valuable, but not necessary to stabilise this release | Advanced onboarding, deeper behavioural analytics and additional authoring improvements | These opportunities needed further discovery rather than being rushed into the stabilisation scope. |
Architecture
The new shell created a stable mental model across the platform.
The redesigned side navigation grouped high-frequency learner tasks into Dashboard, Learning, Resources, Messaging, Achievements, My Learning and Account. Lower-frequency utilities—language, support and logout—were separated from task navigation.
Persistent orientation
Brand, notifications, progress, profile and core navigation remain stable across areas.
Contextual expansion
My Learning and Account reveal related destinations only when those sections are active.
Repeated anatomy
Titles, tabs, filters, search, content and actions follow a consistent reading order.
Stabilised UI
Core surfaces were redesigned around a common product language.
The frames below show how the audit translated into production-ready patterns across discovery, progress, learning, communication, account and achievement journeys.
Make the dashboard actionable and calm
The redesigned dashboard prioritised current courses, progress and immediate tasks. Card filters, visual statistics and designed empty states replaced the earlier cluttered summary blocks.
Turn progress reporting into a readable learner story
Profile context, summary metrics, activity, completion status, filters and detailed course records were organised into one progressive report rather than disconnected report widgets.
Standardise content discovery
Resources and Learning adopted a consistent discovery model: category and type filters, search, content cards, clear labels and predictable actions.
Complete the end-to-end learning and purchase journey
Course, collection and examination discovery connected to detail, enrolment, payment and confirmation screens, creating a coherent journey rather than isolated feature pages.
Rebuild messaging around familiar inbox patterns
Compose, inbox, sent, drafts and trash were brought into one stable structure. Reading and replying used a focused content surface, while composition received clear field hierarchy and recipient controls.
Give account, authentication and achievement states equal design attention
Account information, personal files, sign-in, sign-up, OTP, leaderboards and badge states were integrated into the same product language, including complete empty states and focused forms.
Product system
The stabilised UI was held together by reusable product primitives.
The value of the redesign was not limited to the visible frames. It established repeatable decisions that could be implemented across current features and future product integrations.
One shell and active-state model
Global, contextual and utility destinations follow a predictable hierarchy.
Title, controls, content and actions
Repeated reading order makes unfamiliar areas easier to understand.
Shared content discovery pattern
Courses, exams, resources and collections reuse images, metadata, status and actions.
Consistent filters, status and pagination
Data-heavy screens become easier to scan and extend.
Empty, warning and success states
The interface explains system status and next steps throughout the journey.
Stable host for connected products
Shared navigation and components reduce the friction of introducing adjacent services.
VAC shared product shell
Navigation, account context, notifications, tenant-aware styling, reusable cards, forms, tables and system states.
- Creates one mental model across current and future surfaces.
- Reduces UI reinvention when new capabilities are introduced.
- Improves engineering consistency during incremental release delivery.
Reusable primitives that anchored the system
| Primitive | Role in the product | Where it appears | Why it scaled |
|---|---|---|---|
| Navigation shell | Creates orientation, wayfinding and utility access. | Dashboard, Learning, Messaging, Account and future connected products. | One active-state model reduced relearning and supported cross-product expansion. |
| Page anatomy | Orders title, filters, actions and content into a stable reading flow. | Collections, Courses, Messaging, Resources and reporting areas. | Users can scan unfamiliar screens faster because structure stays predictable. |
| Cards and list tiles | Present discoverable content with metadata and next actions. | Courses, exams, files, badges, resource listings and collections. | The same component grammar works across content types and tenant branding. |
| Tables and filters | Support data-heavy management views. | Administrative views, learner records, messaging and reporting. | Reusable filter, search and pagination patterns lower both UI debt and engineering effort. |
| System states | Explain warnings, empty states, confirmations and completions. | Purchases, exams, empty collections, messaging and upload flows. | State coverage increases trust and reduces user hesitation in important tasks. |
Delivery
The product system was structured for incremental implementation rather than a single fragile redesign.
The handoff separated the shared shell, reusable patterns, high-priority workflows and state coverage so engineering could build coherent slices while preserving the logic of the overall product experience.
Production-oriented design evidence
- High-fidelity platform frames
- Navigation and expanded-state behaviour
- Cards, filters, tables and form patterns
- Empty, warning, confirmation and success states
- End-to-end learning, messaging and account journeys
A stabilised version of VAC
- Clearer learner navigation
- More coherent feature adoption
- Consistent interaction patterns
- Better readiness for new functionality
- A foundation for ecosystem integration
Shared shell first
Establish navigation, page anatomy, core typography, colour roles and action hierarchy before feature-level divergence.
Reusable product primitives
Translate repeated cards, filters, tables, pagination, forms and empty states into implementation-ready patterns.
Complete workflow slices
Deliver connected states for learning, exams, payments, messaging, authentication and account management.
Stabilised product direction
Provide the engineering team with a coherent target that could be implemented and extended without reintroducing fragmentation.
Outcomes & evidence
The release improved the product experience and strengthened VAC’s commercial foundation.
The project is reported to have improved task success and customer retention, reduced turnover or churn, supported higher profit per subscriber and enabled a larger company-product ecosystem around VAC. Exact historical percentage changes are unavailable.
Major product stabilisation
The redesigned shell and core learner journeys were delivered into a new VAC version.
Verified delivery outcome.Task success
Clearer navigation, page anatomy and workflow states reportedly made important tasks easier to complete.
Directional product outcome; original measurement unavailable.Retention and customer value
The improved product experience reportedly supported better retention, lower churn and increased value per subscriber.
Directional business outcome; no percentage is claimed.Company ecosystem foundation
The shared shell and product language allowed adjacent products to connect into VAC more coherently.
Strategic platform outcome.Evidence retained
- Five audit boards covering major product areas and system concerns.
- Stabilised frames across at least eight core product surfaces.
- Verified four-month solo Product Designer ownership.
- Verified engineering handoff and shipped release.
- Verified role as a foundation for wider company-product integration.
Evidence to recover
- Exact task-success baseline and post-release result.
- Retention and churn definitions, periods and percentages.
- Profit-per-subscriber calculation and comparison window.
- Usability-test sample and task list.
- Accessibility audit scores and implementation QA.
- Exact release date and engineering-team composition.
Metrics I would instrument today
Course discovery · enrolment · exam completion · message composition · profile update
Time on task · click depth · backtracking · search and filter usage · error recovery
Organisation renewal · active learner return · administrator activity · feature adoption
Revenue per subscriber · expansion revenue · paid content conversion · support cost
Accessibility defects · inconsistent components · UI regressions · unresolved empty states
Connected-product adoption · cross-product task completion · integration support effort
Reflection
The project changed how I think about “polish.”
Product polish is not the final visual layer applied before release. It is the consistency, state coverage and architectural clarity that allows users, engineers and future products to rely on the interface.
Audit for patterns, not screenshots
The most valuable findings were repeated system failures that appeared across unrelated features.
Stabilisation is product strategy
A coherent shell can improve current tasks while increasing the speed and quality of future delivery.
Business value follows product confidence
Retention, expansion and ecosystem growth become more credible when the core product feels understandable and dependable.
The release was successful because the work connected three layers that had previously been treated separately: individual screens, the product system and the commercial platform.
Need a guided walkthrough of the work and decision-making?
Start a conversation