Lixor Go

A dual-interface web and mobile app that supports real-time lecture transcription and translation to enhance multilingual accessibility in classrooms. Designed with accessibility, responsiveness, and modularity in mind, Lixor GO empowers both students and instructors to communicate effectively, breaking down language barriers in real time.

Role

UX/UI Designer

Role

UX/UI Designer

Role

UX/UI Designer

Timeframe

8 Weeks

Timeframe

8 Weeks

Timeframe

8 Weeks

Team

Solo Project for Development

Team

Solo Project for Development

Team

Solo Project for Development

Tools

Figma, Jira, Slack

Tools

Figma, Jira, Slack

Tools

Figma, Jira, Slack

Contents

01

Preview

01

Preview

01

Preview

02

Context

02

Context

02

Context

03

Research Methods

03

Research Methods

03

Research Methods

04

Design Decisons

04

Design Decisons

04

Design Decisons

05

Usability Testing

05

Usability Testing

05

Usability Testing

06

Visual Design

06

Visual Design

06

Visual Design

07

Final Design

07

Final Design

07

Final Design

08

Takeaways

08

Takeaways

08

Takeaways

Preview

TLDR - Short n' Sweet Version

A classroom companion app offering live transcription and translation across multiple languages—designed to foster smooth, accessible communication between instructors and students. The platform leverages clean layouts, modular design, and real-time processing to improve educational equity.

Context

Created in response to the growing need for accessible, real-time communication tools in education. With diverse student populations and multilingual classrooms, Lixor GO supports inclusivity through dual-language transcription and mobile-first design.

The Problem

Language barriers in classrooms can lead to disengagement, misunderstanding, and unequal learning opportunities. Existing platforms like Zoom and Teams don’t offer specialized tools for real-time multilingual support tailored to classroom settings.

The Challenge

Design an intuitive, accessible platform for both instructors and students that allows real-time transcription, multiple language support, and seamless session interaction, all while maintaining low latency and high readability.

The Solution

A web app for instructors to control sessions, view transcripts, and manage student engagement, paired with a mobile app for students to access live translated transcripts, raise hands, ask AI-generated questions, and review past session content. Below is an intial design from the current code.

Research Methods

While formal interview data was not included, design requirements were extracted from instructional design checklists and comparative UI research.

Problem Statement

Students and instructors require an intuitive system that supports real-time multilingual communication in live classroom environments.

Secondary Research

Explored design references from Google Meet and Microsoft Teams for live session flow. UI inspiration from Slack and iMessage informed the chat-style transcript layout.

Context & Struggles

Many classrooms lack accessible design in real-time tools. Challenges identified include inconsistent translations, latency in delivery, and user confusion due to cluttered interfaces.

Design Decisions

Focused on modularity and clarity. Transcription bubbles were styled like chat messages for visual familiarity. Interface supported both light and dark modes, drag-to-reorder features, and AI-enhanced suggestions.

Transcript View

Implemented dual-bubble transcript viewers to display both original and translated speech. This mirrored the visual clarity found in messaging apps.

Instructor Dashboard

Developed a centralized control dashboard for instructors. Included a session management bar, transcript display, and real-time participant interactions.

Usability Testing

Focused on legibility, clarity of layout, and how quickly users could understand and interact with transcript features.

Ease of Access

Verified that students could easily locate language settings and toggle transcript visibility.

QR Code Usage

Validated QR code session joining and tested responsiveness across different devices.

Visual Design

Clean, modern, and optimized for accessibility. Prioritized contrast, readable fonts, and support for screen readers.

Design System

Designed modular components for bubbles, buttons, and navigation tabs. System allows for reuse and scalability.

Colour & Typography

Used soft neutrals for readability with highlights for interaction points. Sans-serif fonts ensured legibility across screen sizes.

Final Design

Delivered a fully responsive prototype of both instructor and student interfaces. Integrated session history, real-time features, and multiple languages.

Live Sessions

Live session interface with dual transcript support and multi-language tabs.

Dashbaord Creation

Instructor dashboard with participant engagement tools.

Student View

Student app for live viewing, session summaries, and settings customization.

Takeaways

Modular UI

Modular UI systems reduce redundancy and make cross-platform scaling more efficient.

Providing System Feedback

Integrating real-time features with clarity and feedback (like loading indicators and status visuals) ensures trust in dynamic interactions.

Last updated by Alexis on May 9, 2025, 10:43 PM EST

Designed with Framer and Iced Matcha Lattes by Alexis Williams.

Last updated by Alexis on May 9, 2025, 10:43 PM EST

Designed with Framer and Iced Matcha Lattes by Alexis Williams.

Last updated by Alexis on May 9, 2025, 10:43 PM EST

Designed with Framer and Iced Matcha Lattes by Alexis Williams.

Last updated by Alexis on May 9, 2025, 10:43 PM EST

Designed with Framer and Iced Matcha Lattes by Alexis Williams.

Last updated by Alexis on May 9, 2025, 10:43 PM EST

Designed with Framer and Iced Matcha Lattes by Alexis Williams.