VCCS

Introduction

VCCS was independently built from scratch — owning frontend (Next.js), backend (Node.js), AI API integration, testing, documentation, and product delivery end-to-end. It launched as a live platform at vccs.com.pk.

A student-focused guidance platform built to support onboarding, recommendation journeys, consultation-oriented dashboards, and guided digital experiences. The product is designed for students navigating career decisions — many of whom are visiting a guidance tool for the first time and need a clear, low-friction path to the consultation outcome.

Problem Statement

Students needed a clearer path from first visit to recommendation and consultation, without getting lost in confusing steps or disconnected screens. The original flows had too many decision points early in the journey, which caused users to drop off before reaching the consultation booking step.

Scope

Public discovery pages for trust-building and overview, student onboarding flow with profiling, recommendation journeys for registered users, consultation-oriented dashboard experience, and guided user flows with simple progress indicators across the full journey.

Target Audience

Students looking for career guidance, recommendations, and a more structured consultation experience. Many users are first-time visitors with no prior experience with digital guidance tools, so the interface had to be self-explanatory at every step.

Functional Requirements

• Public pages for discovery and trust-building before sign-up
• Student onboarding flow with profile setup and goal definition
• Recommendation journeys personalized to student profiles
• Consultation-oriented dashboard with appointment visibility and history
• Simple progress indicators across the multi-step user journey

Challenges

• Keeping the experience simple for first-time users who may be unfamiliar with digital guidance tools
• Distinguishing guidance steps from consultation steps clearly so students always know where they are
• Making recommendation and consultation flows feel guided rather than like form-filling
• Maintaining visual clarity across multiple steps without the interface feeling repetitive or long

Solution

I shaped the product experience around guided movement through the product: lightweight discovery pages that built trust before asking for sign-up, clear onboarding with purposeful profiling steps, structured recommendation flows that felt like a conversation rather than a form, and a consultation-oriented dashboard that gave students a clear view of their next step.

Technical Overview

Next.js product UI with Tailwind CSS, Node.js backend work, AI API integration, access-aware flow design with public and authenticated states, reusable screen sections, and guided flows built around onboarding and consultation as the two core outcomes. Client repositories remain private per NDA.

Advantages

• Clearer consultation journey for students from first visit to booking
• Stronger onboarding and recommendation flow structure reduced early drop-off
• Simple visual structure across guidance and dashboard screens kept the interface approachable
• Reusable product patterns made it straightforward to extend the journey with new recommendation types

Limitations

• Guidance products need ongoing content refinement as career pathways and recommendation logic evolve
• Multi-step consultation flows still require careful UX tuning to avoid drop-off at each transition point

Outcome

VCCS became a more structured student product with clearer onboarding, better recommendation flow clarity, and a more usable consultation experience. Students reached the consultation booking step with fewer backtracks because the navigation mirrored the intended guidance sequence rather than presenting all options at once.

Key Learnings

• Guidance products need clarity more than feature density — students need to understand what to do next, not be impressed by the number of features
• Onboarding and recommendation journeys need very clear transitions between phases to maintain user confidence
• Simple product structure improves consultation flow usability by removing decisions that do not contribute to the end goal