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. Prototyping & Testing

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.

Results & 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.

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.