Decentraclass Redesign

Decentraclasses is a decentralized learning platform aiming to connect educators and learners in the Web3 space. The existing platform faced challenges in user engagement, navigation clarity, and visual consistency. The goal was to redesign the platform to enhance user experience, improve accessibility, and align the visual design with modern Web3 aesthetics.


Date

Apr 2024

Role

UX Direction, Web Design, Product

[ View Website ]

Research & Discovery

Conducted User Interviews

Key Findings:

  • Users found the navigation confusing and unintuitive.
  • The visual design lacked consistency, leading to trust issues.
  • Mobile responsiveness was inadequate, affecting accessibility
  • Analyzed platforms like Coursera, Udemy, and other Web3 education platforms to identify best practices and areas for differentiation.

Transition from Old Logo to New Logo

Design Goals

  • Improve Navigation: Simplify and clarify the navigation structure.
  • Enhance Visual Consistency: Develop a cohesive design system.
  • Ensure Accessibility: Design for responsiveness across devices.
  • Align with Web3 Aesthetics: Incorporate modern and futuristic design elements.

Design Process

  • Wireframing: Created low-fidelity wireframes to map out the new navigation structure and layout.
  • High-Fidelity Design: Developed high-fidelity mockups incorporating feedback from stakeholders and aligning with the defined design goals.Skillshare
  • Prototyping: Built interactive prototypes in Figma to simulate user interactions and gather feedback.

Design Solutions

  • Navigation

    Before: Cluttered menu with unclear labels.
    After: Simplified top navigation bar with clear, concise labels and a logical hierarchy.
  • Visual Design

    Before: Inconsistent use of colors, typography, and spacing.
    After: Established a design system with a consistent color palette, typography, and spacing guidelines.
  • Responsiveness

    Before: Poor mobile experience with elements not adapting well to different screen sizes.
    After: Implemented responsive design principles to ensure usability across devices.
  • Web3 Aesthetics

    Before: Outdated visuals not reflective of the Web3 space.
    After: Incorporated modern design elements such as gradients, futuristic typography, and interactive components to resonate with the Web3 audience.

Next Project