UI/UX Redesign for Writeen's Edutech Platform
Ferdisain
Writeen - Website E Learning
Overview
Writeen is an innovative Edutech platform focused on enhancing literacy skills through interactive learning. The platform integrates features such as E-Learning, Gamification (Quiz), and Articles to cater to users of all levels—from beginners to experts. My role was to revamp critical parts of Writeen’s interface, including the E-Learning, Quiz, and Article sections, while ensuring a seamless, engaging, and modern user experience.
Scope of Work
Revamp UX UI for:
E-Learning
Quiz (Gamification)
Articles, Homepage, Explore Courses, Subscription, About Us, and Responsive/Mobile Design
My Responsibilities
Conducting a heuristic evaluation to identify usability issues
Reimagining user flows and refining visual elements
Designing interactive prototypes for both desktop and mobile
Collaborating with developers and stakeholders to ensure design fidelity
The Process
1. Research & Analysis
I began the project with a comprehensive heuristic evaluation to understand the current pain points. This involved assessing the platform’s navigation, layout, and content presentation to pinpoint areas where users experienced confusion or inefficiency.
Key Findings Included:
Overly complex flows for accessing the Quiz feature
Inconsistent UI components (e.g., quiz category cards)
Lack of clear filters for quiz categories and difficulty levels
A crowded Article page with missing social proof elements
2.Defining the Challenges
For the Quiz (Gamification) Section:
Users had to follow a multi-step process—from accessing the website, navigating to the quiz page, to registering if not logged in.
The interface lacked consistency, with a confusing “Mulai Bermain” (Start Game) button that launched quizzes at random, leading to user disorientation.
No clear categorization or filtering by difficulty, making it hard to choose a quiz aligned with the user’s level.
For E-Learning & Articles:
The Explore Courses page needed better filtering (by level and free/premium status) to help users quickly find relevant content.
The Articles section required enhanced social proof (author profiles, publication dates) and content summaries to improve credibility and engagement.
3.Ideation & Iteration
Based on the insights gathered, I redefined the user flows and visual hierarchy:
Quiz Revamp:
Consolidated the introduction of quiz levels, category lists, and leaderboard into a single, streamlined page.
Introduced filters for both quiz categories and difficulty levels, ensuring that users can easily find content that matches their proficiency.
Removed redundant buttons to avoid confusion and separated the leaderboard into its own page for clarity.
Tailored quiz content to each difficulty level—for example, in the “Kesehatan” category, beginners see basic nutrition quizzes while advanced users are challenged with in-depth topics.
E-Learning Enhancements:
Redesigned the Explore Courses page with intuitive filters and a prominent search function.
Improved the enrollment process so that premium courses require a subscription, with clear visual cues and prompts.
Article Page Improvements:
Added author profiles (with photos and names) and publication dates to boost social proof and trust.
Incorporated concise summaries and reading time estimates, making it easier for users to decide which articles to read.
Additional Touches:
Refined typography, color schemes, and spacing across all sections to align with a minimalist and modern aesthetic.
Enhanced the overall information architecture on the homepage, pricing plan, and About Us pages to create a clean, organized layout that emphasizes key content.
4.Ideation & Iteration
I developed interactive prototypes using Figma for both desktop and mobile views, allowing stakeholders to experience the proposed changes firsthand. Rigorous testing followed the design phase to ensure all interactions worked smoothly:
Testing Highlights:
Adjusted modal dialogs (e.g., “Keluar Quiz”) to encourage quiz completion rather than early exit.
Ensured that interactive elements, like “Lanjutkan” (Continue) buttons, only activated when all quiz questions were answered.
Implemented user feedback loops to fine-tune navigation and content presentation.
5.Result & Impact
The revamped UI/UX for Writeen has led to significant improvements:
Streamlined User Flows: Users can now access quizzes, courses, and articles more intuitively with fewer steps and reduced friction.
Enhanced Visual Consistency: Improved typography, layout, and component design ensure a professional and modern look.
Increased Engagement: Tailored content and interactive elements (such as difficulty-specific quizzes) create a more engaging learning experience.
Improved Credibility: The integration of social proof elements in articles and clear course details boosts user trust and satisfaction.
6.Reflections & Recommendations
Key Learnings:
A clean and clear user flow is vital—users abandon interfaces that confuse them.
Building a robust design system before diving into detailed design saves time and ensures consistency.
Iterative testing and stakeholder collaboration are crucial for refining both the visual and functional aspects of a design.
Like this project
Posted Dec 30, 2025
Revamped Writeen's interface for better user experience and engagement.
Likes
1
Views
0
