LeetCode Redesign - Translation and Audio Support

Overview

This project addresses language barriers on LeetCode by integrating translation and text-to-audio features to facilitate improved comprehension and reduced cognitive load for English learners.

Key Features

Learning Science Theoretical Foundations

• Sociocultural Theory (Vygotsky): Supports intellectual growth through social interaction and cultural tools.
• Multimodal Learning & Scaffolding: Facilitates learning at varied English proficiency levels through diverse interaction modes.
• Cognitive Load Reduction: Enables learners to focus more effectively on coding rather than language interpretation.

Several educational theories underpin the design decisions of this project. Lev Vygotsky’s sociocultural theory guided the inclusion of translation and audio features, highlighting the role of social interaction and cultural context in intellectual growth. These features empower users by allowing them to utilize their cultural and linguistic backgrounds in the learning process. The design also incorporates principles from multimodal learning and scaffolding theory, providing various interaction modes (visual and auditory) to accommodate users at different English proficiency levels. This approach supports learners in developing coding skills while simultaneously scaffolding their language acquisition. Additionally, cognitive load theory informed the decision to integrate audio and translation to minimize cognitive demands related to language comprehension, thereby enabling learners to dedicate more cognitive resources toward coding tasks themselves. Lastly, referencing Patricia Gándara’s work on closing the educational opportunity gap, the project strategically leverages users’ existing linguistic abilities to facilitate equitable and inclusive access to coding education.

User Interview

Our team first conducted user interviews with 10 participants to collect insights around language inequality issues on Leetcode. We used affinity maps to group keywords from user pain points, and two significant insights lead to the design of this feature. First, users frequently experienced difficulties comprehending text-heavy problem descriptions. Second, users expressed a strong need for translation and audio support in their native languages to ease these challenges.

Design Process

The design process involved iterative prototyping, user testing, and feedback incorporation. Key iterations included:

Low-fidelity prototype

The initial prototype was developed using a basic PowerPoint storyboard to simulate interactive elements. This version included translation and audio buttons placed at the end of problem descriptions, and it featured highlighting of text when read aloud. User feedback indicated several areas needing improvement. Users found interaction points unclear and buttons lacked descriptive guidance, making it challenging to understand the correct sequence of using translation and audio options. Additionally, the alignment and positioning of buttons required adjustments for better usability.

Figma prototype

In response to feedback, two significant iterations were developed using Figma. The first iteration applied the existing LeetCode visual style, improving the clarity of interactive elements based on previous feedback and integrating a tutorial section that clearly explained the functionality. The second iteration further refined the user interface by enhancing visual coherence, including adjustments to the color scheme and rounded corner designs. Button alignment and visual hierarchy were improved, and additional functionalities such as full-page translation and side-by-side views of English and native languages were introduced, along with synchronized audio for each language.