Qurious

Designing AI-powered real-time
interpretation platform for events

Designing AI-powered
real-time interpretation
platform for events

Lexcode Inc.

Design - Launch: 8 months

Product Designer

7 min read

CONTEXT

The Traditional Interpretation

At Lexcode, we specialize in breaking language barriers through diverse linguistic solutions. Our interpretation service, eQQui, has long been a staple for large-scale international events. Traditionally, the eQQui workflow was hardware-intensive, requiring the recruitment of specialized interpreters and the distribution of physical receiver devices to audiences. Audiences would have to manually tune into specific channels to access their preferred language.

On every large event with over thousands of audiences, I assisted eQQui on the ground, and here, I witnessed physical hardware constraints created significant friction for audiences.

PROBLEMS

Audience are physically present, but mentally disconnected

This is the roadmap of how we translated the Lexcode epiphany into a high-performance platform built for the future of interpretation.

Lack of user familiarity with receiver device

Lack of user familiarity with receiver device

A significant portion of attendees are unfamiliar with how to properly operate the translation receivers.

Equipment shortage

Equipment shortage

Insufficient quantities of translation devices mean not all attendees who need them can access this service. This creates an equity issue where some participants are excluded from full event participation.

Loss of audience engagement

Loss of audience engagement

When attendees couldn't access or use the translation receivers effectively, they disconnected from the session entirely, turning to their smartphones and missing valuable content.

I realized we had to stop fighting the smartphones and start using them! Qurious was born to turn the device of distraction into a tool for connection.

PROJECT TIMELINE

Began the journey to transform this vision into reality.

This is the roadmap of how we translated the Lexcode epiphany into a high-performance platform built for the future of interpretation.

TYPEFACE

Inter

Inter

Inter

My experience managing interpretation events revealed a key demographic of older professionals. I selected Inter for its superior legibility, ensuring users with aging vision can effortlessly read real-time translations without eye strain.

My experience managing interpretation events revealed a key demographic of older professionals. I selected Inter for its superior legibility, ensuring users with aging vision can effortlessly read real-time translations without eye strain.

The quick brown fox jumps over the lazy dog

Header 1

36 pixels

Weight

Semi Bold

The quick brown fox jumps over the lazy dog

Header 2

24 pixels

Weight

Semi Bold

The quick brown fox jumps over the lazy dog

Header 3

20 pixels

Weight

Semi Bold

The quick brown fox jumps over the lazy dog

Body 1

20 pixels

Weight

Regular

The quick brown fox jumps over the lazy dog

Body 2

16 pixels

Weight

Regular

The quick brown fox jumps over the lazy dog

Body 3

14 pixels

Weight

Regular

COLORS

More than aesthetics, color with a goal!

Guides the user's eye to primary interactions and call-to-action buttons

Guides the user's eye to primary interactions and call-to-action buttons

Primary

#F0562C

Utilized for secondary elements, hover states, and to establish visual hierarchy without overwhelming the user.

Utilized for secondary elements, hover states, and to establish visual hierarchy without overwhelming the user.

#3C150B

#782B16

#B44021

#F0562C

#F48061

#F7AA95

#F7AA95

Utilized a semantic color system to visually communicate the lifecycle of an event, from 'Live' to 'Ended' sessions, without relying solely on text.

Utilized a semantic color system to visually communicate the lifecycle of an event, from 'Live' to 'Ended' sessions, without relying solely on text.

#9668F6

#2C81F0

#1A9A1A

#F0562C

#E0E2E7

Foreground colors are used for text content, icons, and other elements rendered on top of a background.

Foreground colors are used for text content, icons, and other elements rendered on top of a background.

#030617

#6D6E73

#F5F5F5

Background colors are used for styling the backgrounds of the elements on the page and the page itself.

Background colors are used for styling the backgrounds of the elements on the page and the page itself.

#FEFEFE

#FFFFFF

#F8F9FA

Border line used to define component boundaries and separate content sections cleanly.

Border line used to define component boundaries and separate content sections cleanly.

#E5E5E5

DEFINE

Features & Prioritization

Established a functional foundation bridging research to interface, ensuring every feature addresses a specific user need before visual design.

EVENT ORGANIZER

Organizers must set-up an event containing event information and speaker details.

Must generate QR Codes for both speaker and audiences for a seamless access to the event.

Be able to download or get the link for the QR Code.



To ensure accessibility, a direct web link is provided for audience members using non-mobile devices, such as laptops.

SPEAKER

QR Code quick-access to event. No need for registration.

Must see a countdown when the event will start.

Must see event information

Before event starts, speaker must test their microphone.

Speakers can select their preferred microphone input before or during a session.

Must see audience's comments/questions.

AUDIENCE

QR Code quick-access to event. No need for registration.

Language selection page before joining the room for instant translated transcriptions for all users upon entry.

Transcription Tab: See the real-time translation of speaker’s speech.

Summaries Tab: Lets attendees catch up on content they missed and gives those who prefer digesting information in short form a quick way to review key points.

Discussions Tab: Allows attendees to post comments and direct questions to the speaker during or after a session.

USER FLOW

Lead to the right path

I reduced the onboarding time for speakers and audiences to mere seconds via QR entry.

Question

Represents the innate human drive to inquire, explore, and bridge the gap of the unknown. It is the "what did they say?" moment that sparks the need for connection.

Earpiece

Represents the technological solution, the medium through which understanding is delivered instantly into the user's ear.

Logo

These elements merge to form a stylized 'Q' and an earpiece, revealing the silhouette of a person actively speaking, just like in a live event.

HIGH-FIDELITY WIREFRAMES

Let's start our event and break language barriers through Qurious!

A synchronized ecosystem connecting event organizers, speakers, and audience in real-time.

Organizer

Speaker

Audience

EVENT ORGANIZER

The command center where organizers creates event and manage sessions.

Reduced the complexity of event creation into a single, intuitive form.

The Filled State

QR Code Access for Speaker and Audience, passing complex sign-up flows to ensure the event starts on time and everyone have an access instantly!

SPEAKER

Speaker scans the QR Code

View event countdown, session details,
and test mic before the event begins.

View event countdown, session details, and test mic before the event begins.

View audience's questions and
feedback in real-time.

AUDIENCE

Let’s see how the audience can understand the speaker in their chosen language.

In just a scan of QR Code, they now have an access to real-time interpretation.

In just a scan of QR Code, they now have an access to real-time interpretation.

In just a scan of QR Code, they now have an access to real-time interpretation.

Designed it the way that audience doesn’t need to register, just enter their name and they are instantly inside the event!

Designed it the way that audience doesn’t need to register, just enter their name and they are instantly inside the event!

Implemented early language selection in onboarding flow, enabling instant translated transcriptions for all users upon entry to event session.

Implemented early language selection in onboarding flow, enabling instant translated transcriptions for all users upon entry to event session.

In just a scan of QR Code, they now have an access to real-time interpretation.

AUDIENCE'S MAIN SCREEN

Now, its time to see, hear, and understand instantly, easy right?

Real-time translation, instant summaries, and seamless attendee interaction, all in one place

Designed dark mode for dim event environments,
minimizing distraction for fellow attendees
and to reduce eye strain.

Designed dark mode for dim event environments, minimizing distraction for fellow attendees and to reduce eye strain.

Project takeaways

Usability testing reveals truth

Usability testing reveals truth

No matter how confident I felt about a design, real users always taught me something new. Usability testing with functional prototypes became my reality check, exposing assumptions, revealing confusion points, and highlighting opportunities I'd completely missed from my designer's perspective.

The power of field observation

The power of field observation

While research provided a strong foundation, field observations revealed real-world pain points that significantly enriched my understanding, making them highly valuable to the project.

TEAM

The Minds Behind Qurious

Behind every pixel and line of code is a team dedicated to breaking down global language barriers.

Curious about Qurious? You may visit: qurious.eqqui.com

You made it to the finish line!

Thank you for scrolling all the way to the end.