Career-driven online learning platform
Platform
Web Application
Model
B2B
Category
Customer Relationship
Year
2020
Context
Background
GoValley is a well-known job training platform offering career-focused programs. Its learning management system(LMS) was initially launched by engineers to address urgent student needs. While functional, it lacked UX considerations. The team understood from day one that the system would require future redesigns to improve usability and scalability.
What’s the problem
Although many students registered on the platform, key engagement metrics like DAU, MAU, satisfaction, and retention remained low. Most users dropped off shortly after sign-up, with little ongoing interaction, which made it difficult for learners to stay motivated or track progress—resulting in poor learning outcomes and underutilized features.
Initial Idea
The product team envisioned an improved learning experience through iterative design. The PM aligned with this vision, aiming to enhance usability and engagement across the platform.
Responsibilities
My Role and Contribution
As a Front-End & UI/UX Design Intern, I contributed to both the interface design and the front-end implementation of this project. I was responsible for leading the entire design process—from research and wireframing to high-fidelity prototypes and usability testing—while also delivering production-ready front-end code to support development handoff.
Design Process
Our Design Approach
I applied a full-cycle design process—from research to testing—driven by user needs. Each phase helped uncover insights, define problems, and shape solutions. This approach ensured the final design was effective and user-centered.
Target audience
our platform uSERS
The platform primarily serves students and instructors, making up 95% of users.
Learners enroll in career-focused online courses across various fields to prepare for job opportunities.
User RESEARCH
Competitor Analysis
To understand how users will interact with the new decorative kits page, I drafted a comprehensive map detailing the end-to-end experience.
Survey
To validate student needs and learning behaviors, I launched a structured survey targeting active learners on the platform. The survey aimed to understand how students currently track their learning progress, access resources, and stay motivated throughout their course journey.
Interview
To dive deeper into user pain points, I conducted 1:1 semi-structured interviews with active students. The focus was to uncover how they engage with their learning tasks, what blocks their progress, and how platform design could better support their motivation.
Survey Summary Card
Interview Summary Card
Research Synthesis
Affinity Mapping
Interview quotes were organized into 4 clusters: Information Access, Progress Tracking, Motivation & Engagement, System Usability. These patterns validated our design direction and clarified what features to prioritize.
Personas
Based on survey and interview insights, I created two representative personas to reflect our core users. One is a part-time learner balancing a career switch with limited study time, needing efficient access to content and schedules. The other is a full-time job seeker seeking peer connection and clearer industry direction. Their goals and pain points directly shaped our design decisions.
Persona1
Persona2
Research Synthesis
Defining the Design Scope
Grounded in user research findings, we identified key design opportunities around navigation and usability. The scope focused on reworking the top panel layout and reorganizing core content to better support learning flows. We also restructured the product’s information architecture to reflect clearer user priorities and mental models.
mAPPING THE User fLOW
To address the key user pain points surfaced in research, I created four focused user flows：
These flows guided the UI structure and ensured that every interaction supports real student needs.
Design
Wireframe
Based on five featured user flows, I designed corresponding pages as sidebar navigation items. Each wireframe visualizes the homepage of a key section—Dashboard, Class Schedule, Assignments, Resources, and Community—addressing core user needs such as learning progress, scheduling, submission tracking, material access, and peer engagement.
Hi-Fidelity Design
Dashboard and Notification
The homepage offers a clear overview of each student’s learning performance. It includes course progress trackers, assignment score stats (avg, high, low, trend), and attendance rate. A categorized notification panel with icons helps users stay updated on classes, assignments, community, and system alerts.
Class Schedule
The left panel displays weekly classes by status: Upcoming, Attended, and Absent. Each session shows the topic, subject, time, and instructor, with options to schedule or cancel. The right panel offers a clean calendar view—students can select any date to check class details more easily.
Assignment
The left panel shows pending assignments, while the right displays submitted ones. Graded submissions are marked with a green check, allowing students to view the score, grader, and comments. This layout helps students stay organized and easily review their performance.
Resource
Students can filter resources by subject, with content grouped into meeting records, notes, and learning materials. Items are sorted by date, and each folder links directly to Google Drive due to the platform’s limited internal storage. This setup ensures quick access to organized external files without burdening the system.
Community
The left panel features company articles in card format, showing image, title, and publish time with page toggles. The right panel includes a discussion board where students post questions with replies and timestamps, plus a “Post” button for new threads. At the bottom right, an offer board celebrates students’ job offers—others can show support by liking the entries.
The Design Iterations
Dashboard
Gradient Color: Applied vibrant gradient backgrounds to highlight key metrics and energize the layout.
Line Chart Improvements: Added average score and comparison tags to better showcase performance trends.
Refined Notifications: Separated each message with outlines and moved timestamps for clearer reading.
Time Selector Dropdown: Introduced a dropdown with popular time ranges based on user research.
Class Schedule - Display
Enhanced Visual Details: Refined the class icon, vertical dividers, and added gradient for better visual focus.
Improved Calendar Clarity: Switched to a white background to make the calendar view cleaner and easier to read.
Simplified View Toggle: Restructured switch options into “Upcoming” and “Past” for clearer navigation. Divided “Past” view into “Attended” and “Absent” for better structure and readability.
Class Schedule - Reschedule and Cancel
Flexible Time Selection: Replaced fixed time slots with recommended options and a scrollable custom time picker.
Action Confirmation Flow: Added a notice window and double-confirm modal to prevent accidental reschedule or cancellation.
Assignment
Status Tags Added: Each assignment card now includes a status tag to clearly indicate its progress.
Icon Enhancements: Icons were updated with color to improve visual recognition and hierarchy.
Graded vs. Ungraded Distinction: Submitted assignments are now color-coded to show whether they’ve been graded.
Assignment - Grade Window
Clearer Grade Layout: The grade window was visually refined for better structure and readability.
Profile & Comment Styling: Added grader profile icons, background for comments, and bold score labels for emphasis.
Resources
Dropdown Visual Update: Improved the dropdown menu’s visual design for a cleaner and more modern look.
Date Button Layout: Added outlined separators to each clickable date button for better structure and clarity.
Community
Article Card Layout: Improved the card structure and displayed publish time as a tag for better context.
Discussion Board Styling: Increased spacing between posts, highlighted reply count with color tags, and aligned pagination buttons.
Post Button Enhancement: Updated the post button with a more eye-catching gradient style.
Offer Board Optimization: Reduced the offer board’s height and enabled scrolling for a more compact layout.
iMPACT
Product Outcomes
After multiple rounds of iteration and refinement, the redesigned learning management platform was successfully launched. Following a period of team-led monitoring and post-launch analysis, we observed strong user engagement trends. As a result, the platform saw a 12.6% increase in Daily Active Users, along with an 8.9% boost in retention and 11.3% growth in engagement, largely driven by the introduction of structured dashboards and AI-assisted learning tools.
Daily Active User
+ 12.6%
Daily Active User
+ 8.9%
Daily Active User
+ 11.3%