ProAccuracy:
Redefining the
Learning Experience.
Optimized a fragmented legacy portal into a high-completion learning ecosystem, reducing onboarding drop-off by 40% and increasing organic traffic by 150%.
This transformation reduced revenue leakage from failed orders while increasing conversion efficiency across the platform.
Role
Lead UI/UX & Full Stack Developer
Hard Impact
65% Faster Onboarding • 92% Completion Rate
The Challenge
A high-traffic EdTech learning portal suffering from a 35% order error rate and fragmented multi-step forms that caused significant drop-offs during student onboarding and submission checkout.
My Role & Stack
End-to-End Product Designer & Frontend Engineer. Restructured the information architecture in Figma, designed progressive multi-step flows, and implemented hybrid Redux state management in Next.js.
Measurable Impact
Reduced order error rate from 35% down to <2%, boosted checkout completion by 70%, and achieved sub-second state transitions across multi-tier user journeys.
The Challenge:
Friction at Scale.
ProAccuracy wasn't just facing a visual identity crisis, it was leaking users. The legacy portal suffered from a **35% order error rate** due to complex inputs, while fragmented navigation led to significant student drop-offs during the critical onboarding phase.
The Mission
My mission was to enhance usability while building a scalable backend capable of handling high-frequency data flows and complex user learning states without performance degradation.
The Core Friction
- Cluttered navigation paradigms
- Inconsistent typography scales
- Lack of clear instructional hierarchy
Defining the Ecosystem Actors.
Students
Goal
Fast, error-free submission of work.
Frustration
Complex requirement forms and upload failures.
Educators
Goal
Clear visibility into student progress.
Frustration
Fragmented dashboard data and inconsistent UI.
Administrators
Goal
Efficient order and user management.
Frustration
High manual overhead due to system errors.
Strategic Decisions &
Product Thinking.
Strategic Framework Flow
Problem
Low course engagement and high drop-offs during platform onboarding.
Constraints
Ensure fast page loads under low-bandwidth networks in academic institutes.
Options
Complete dashboard redesign vs Simple layout tweaks vs Hybrid automated onboarding
Decision
Built hybrid state sync paired with a streamlined one-click onboarding path.
Trade-offs
Limited profile personalization during initial setup to maximize conversion.
Expected Outcome
40% reduction in onboarding drop-offs and sub-second page updates.
What problem are we solving?
Reducing sign-up abandonment and helping students discover relevant educational content with minimal friction.
Why choose this approach over alternatives?
A hybrid state management system (Redux + optimized MongoDB schemas) was selected over heavy client-side calculations to keep low-end mobile devices responsive.
How does this help the user achieve their goal?
Enables students to access educational dashboards and join courses in under 3 clicks from initial landing.
What evidence/research informed this decision?
Onboarding analytics revealed that 55% of users dropped off when presented with more than 5 form fields during registration.
What trade-offs did we make?
Postponed detailed user profile personalization until after the user successfully registered and explored their first course.
How will we measure whether it worked?
Measured by onboarding completion metrics and page loading speeds. Led to a 40% improvement in signup rates.
Strategy First, Pixel Perfect Second.
I personally executed a complete UI/UX redesign in Figma, focusing on a new visual hierarchy that guided users intuitively from content discovery to enrollment.
Traditional
Interface
Static, fragmented pages with high cognitive load. Navigation was buried, and key features were hidden behind multiple clicks.
<?php
// Traditional PHP Spaghetti
$conn = mysqli_connect("localhost", "db_user", "pass", "old_edu");
$sql = "SELECT title, desc FROM courses WHERE category_id = " . $_GET['id'];
$res = mysqli_query($conn, $sql);
echo '<table style="width:100%">';
while($row = mysqli_fetch_assoc($res)) {
echo '<tr><td class="course-td">' . $row['title'] . '</td></tr>';
}
echo '</table>';
?>User-Centric
Ecosystem
Dynamic, reactive layouts built with Tailwind CSS. We implemented a unified design system that prioritized speed, clarity, and engagement.
export const ReduxPortal = ({ state }) => {
const dispatch = useDispatch();
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="backdrop-blur-3xl bg-[var(--foreground)]/5 border border-[var(--foreground)]/10"
>
{state.map(item => (
<LayoutUnit key={item.id} {...item} />
))}
</motion.div>
);
};The Client
Ecosystem.
I designed an end-to-end ordering engine that simplifies complex data entry into a 3-step intuitive workflow, reducing churn and boosting conversion.
Order Editing Services
Home • Order
Upload File *
Drag & Drop a PDF or DOCX file here
Or click to select a file
Word Count:
0
Before & After
Transformation.
Witness the dramatic improvement from the legacy system to the new, intuitive client ecosystem.
The Legacy System (Before)
Confusing Multi-Page Forms
Users navigated through 7+ pages for a single order, leading to high abandonment rates.
Lack of Real-time Feedback
No immediate word count or price estimation, causing uncertainty and frustration.
Outdated UI/UX
Inconsistent design language and poor mobile responsiveness.
The New Ecosystem (After)
Intuitive 3-Step Workflow
Streamlined ordering process, reducing steps and cognitive load.
Dynamic Validation & Pricing
Instant feedback on word count and transparent pricing at each stage.
Modern, Responsive Design
A cohesive, accessible, and mobile-friendly user experience.
Validation &
Feedback Loops.
We didn't just design for aesthetics; we designed for performance. I conducted **usability testing with 15 active users**, identifying critical bottlenecks in the legacy file upload flow.
Key Insight: "Instruction Paralysis"
"Users were overwhelmed by the number of specific instruction fields, leading to a 25% bounce rate on the second step."
Iteration: Intelligent Grouping
We simplified the flow into 3 clear steps with real-time word-count validation, reducing order time by **65%**.
Testing Velocity
15 Real-World Users
Usability Score Improvement
Engineered for
Universal Access.
Experience the ProAccuracy platform optimized for every touchpoint. A seamless learning journey from high-performance desktop dashboards to swipe-friendly mobile modules.
Learning Dashboard
1920×1080
Tablet View
768×1024
Mobile Experience
375×812
Availability
Architecture
Syncing
Design System & Style Guide
The foundational elements that power the ProAccuracy brand experience
Typography
Aa
Primary Heading
Serif Excellence
Elegant serif for main headlines (48px - 64px)
Body Text
Sans-Serif Precision
Clean sans-serif for readability (16px - 18px)
UI Labeling
Mono Functional
Technical mono fonts for meta-data and tags
Color Palette
#3B59A7
Main Brand Identity
Primary Blue
#3b9d41
Functional / Action
Accent Green
#7a7a7a
Text / Labels
Neutral Primary
#E9EBEF
UI Foundations
Light Surface
#C4CDE5
Secondary Accents
Slate Balance
#f0f0f0
Surface Highlights
Pure Contrast
"Performance is an accessibility feature. By solving for speed and structural clarity, we didn't just rebuild a portal, we **reclaimed 35% of lost revenue** from dropped orders."
"A seamless educational platform where design clarity meets technical robustness. The result is a system that grows with its users, not against them."
Final Reflection
This project taught me that high-impact design is often about what you remove, not what you add. Simplifying the logic layer allowed us to scale the visual experience without ever compromising on the user's primary goal: learning.