Duolingo Feature Prototype

Gender Swipe – A Duolingo Prototype for Spanish Noun Gender Practice

Brief

Create a high-fidelity prototype for a hypothetical product within the existing Duolingo design system.

This prototype helps Spanish learners master noun gender using a swipe-based interaction like Tinder. Users swipe left for "el" and right for "la," reinforcing correct article usage. Inspired by Duolingo’s insights and personal learning challenges, the feature integrates seamlessly into Duolingo’s design system, offering a fun, intuitive solution to a common obstacle.

PHASE 01

Research

Personal Experience

Personal Experience

Personal Experience

As a student of Spanish and avid user of Duolingo myself, one of the main challenges I faced was memorizing the correct article "el" or "la" for irregular nouns. I used a combination of GPT and other customizable learning programs such as Educaplay to experiment with alternative learning methods that didn't exist within Duolingo's platform.

Desk Research

Desk Research

Desk Research

According to Duolingo’s blog article “The top 5 mistakes that Spanish learners make”, It's very common for learners—especially those whose language doesn't have this sort of grammatical gender—to struggle not just with the gender of the noun but also with matching gender across all the necessary words. This indicated that a feature focused on gender could be valuable.

Proposed Solution

Inspired by popular dating apps like Tinder, the exercise would present users with nouns in a swipeable format. Users would swipe left for masculine nouns (EL) and swipe right for feminine nouns (LA), mimicking the familiar gesture-based interaction of dating apps.

PHASE 02

Prototyping

The chart below corresponds with the various actions from Part 1. Blue dashed lines indicate the flow of actions while black dashed lines label the components.

Initial Skeches

Inspired by popular dating apps like Tinder, the exercise would present users with nouns in a swipeable format. Users would swipe left for masculine nouns (EL) and swipe right for feminine nouns (LA), mimicking the familiar gesture-based interaction of dating apps.

Converting Layouts to Figma

After gathering the fonts and color codes, I used Figma to quickly mock up several layout options. Ultimately, for mobile users, having two, large, square buttons colored in the traditional baby blue and pink at the bottom made the most sense ergonomically.

Shoe-horning Existing Platforms

To test out the play mechanics of this feature, I used an educational game builder platform, Educaplay, which thankfully happened to have a binary, swipe left/right game mechanic already. However, I wanted to match Duolingo's branding.

I tested several layout options in Figma for visual and usability optimization. Ultimately, for mobile, the two horizontally stacked square buttons was the most effective.

Framer Import

Framer is quickly becoming my new favorite Website and prototype builder as it can not only import Figma layouts directly, but can also copy/paste page elements from Websites, rapidly and seamlessly capturing Duolingo's interface.

Coded Embed

Building the swiping mechanics within Framer or Figma proved to be quite difficult, so I found modified the CSS and HTML of an opensource Javasrcipt code of a Tinder replica on a code repository site, CodePen.

I found a pre-existing Tinder Javascript code snippet in a repository called Codepen, which I forked (copied) and modified the HTML and CSS to match the styling of Duolingo.

PART 03

Outcome

I was quite satisfied with my ability to fool users into thinking they were on the actual Duolingo site, both on Desktop and mobile by building additional Duolingo pages leading up to the swiping portion.

I was able to completely replicate the levels menu of Duolingo using a plugin built by Framer. This saved a substancial amount of time.

Using an existing page layout, which I imported into Figma, I also used GPT to generate the text for the lesson, trained on the verbiage and structure of the same lesson, but focused on definitieve articles.

The idea was to have students select all nouns of the appropriate gender. Users would receive feedback in the form of sound effects and color highlighting indicating right or wrong answers.

Finally, using the Tinder swipe mechanics, users would swipe left for "El" (masculine) and right for "La" (feminine) nouns, creating a fast-paced micro-learning experience.

Case Studies

Every project we deliver is a reflection of our commitment to quality, designed to inspire and drive success.

Enchanted Prompt Wizard

User research, branding, & prototyping of educational microlearning app, training teachers in prompt engineering.

UX Reserach

Instructional Design

Prototyping

Product Design

Branding

Snacktopia

Business plan / branding development, UX design, & prototyping of nutrition-driven gamified learning product

UX Reserach

Prototyping

Product Design

Branding

Solopreneur Starterkit

Branding, development, video production, & instructional design of online, 9-week training course for entrepreneurs.

Branding

Product Design

Instructional Design

UX Reserach

Vibe Coding

Series of experimental micro-apps built through with collaboration Anthropic's Claude & other coding agents.

Prototyping

Product Design

Web design

AI-First Development

The Integration Project

UX consultation & prototyping for key features of AI-driven healthy habits app startup.

Consulting

Prototyping

UX Reserach

Instructional Design

Amiara

Branding development, prototyping, and front-end design for AI-driven entrepreneurial startup.

Product Design

Web design

Branding

Duolingo Product Concept

Development of high-fidelity prototype of experimental learning feature concept for Duolingo app.

Prototyping

Product Design

AI-First Development

Instructional Design

UX Reserach

Whole Foods Market

Human-Computer Interaction research & hueristic analysis for Whole Foods self-checkout POS systems.

UX Reserach

Consulting

Apeiron

UX consultation & Website design/development for longevity and health optimization clinic in Austin.

Web design

Consulting

UX Reserach

Sharpnack Site Redesign

UX consultation, branding implementation, & Website design / development for Midwest lawfirm.

UX Reserach

Web design

Consulting

Cyberpunk Concept Site

Design & development of experimental cyberpunk concept site in Framer and Claude.

Web design

Branding

Graphic Design Collection

Collection of independent and commissioned poster & cover designs based on films and inspiring maxiums.

Branding

Synth Tabletop Game

Branding / concept development, & graphic design for physical, vaporwave-themed table-top game.

Prototyping

Product Design

Branding

Daily UI Practice

Documentation of collection of daily UI practice in Figma, replicating popular app UIs.

Prototyping

Web design

Case Studies

Every project we deliver is a reflection of our commitment to quality, designed to inspire and drive success.

Enchanted Prompt Wizard

User research, branding, & prototyping of educational microlearning app, training teachers in prompt engineering.

UX Reserach

Instructional Design

Prototyping

Product Design

Branding

Snacktopia

Business plan / branding development, UX design, & prototyping of nutrition-driven gamified learning product

UX Reserach

Prototyping

Product Design

Branding

Solopreneur Starterkit

Branding, development, video production, & instructional design of online, 9-week training course for entrepreneurs.

Branding

Product Design

Instructional Design

UX Reserach

Vibe Coding

Series of experimental micro-apps built through with collaboration Anthropic's Claude & other coding agents.

Prototyping

Product Design

Web design

AI-First Development

The Integration Project

UX consultation & prototyping for key features of AI-driven healthy habits app startup.

Consulting

Prototyping

UX Reserach

Instructional Design

Amiara

Branding development, prototyping, and front-end design for AI-driven entrepreneurial startup.

Product Design

Web design

Branding

Duolingo Product Concept

Development of high-fidelity prototype of experimental learning feature concept for Duolingo app.

Prototyping

Product Design

AI-First Development

Instructional Design

UX Reserach

Whole Foods Market

Human-Computer Interaction research & hueristic analysis for Whole Foods self-checkout POS systems.

UX Reserach

Consulting

Apeiron

UX consultation & Website design/development for longevity and health optimization clinic in Austin.

Web design

Consulting

UX Reserach

Sharpnack Site Redesign

UX consultation, branding implementation, & Website design / development for Midwest lawfirm.

UX Reserach

Web design

Consulting

Cyberpunk Concept Site

Design & development of experimental cyberpunk concept site in Framer and Claude.

Web design

Branding

Graphic Design Collection

Collection of independent and commissioned poster & cover designs based on films and inspiring maxiums.

Branding

Synth Tabletop Game

Branding / concept development, & graphic design for physical, vaporwave-themed table-top game.

Prototyping

Product Design

Branding

Daily UI Practice

Documentation of collection of daily UI practice in Figma, replicating popular app UIs.

Prototyping

Web design

Case Studies

Every project we deliver is a reflection of our commitment to quality, designed to inspire and drive success.

Enchanted Prompt Wizard

User research, branding, & prototyping of educational microlearning app, training teachers in prompt engineering.

UX Reserach

Instructional Design

Prototyping

Product Design

Branding

Snacktopia

Business plan / branding development, UX design, & prototyping of nutrition-driven gamified learning product

UX Reserach

Prototyping

Product Design

Branding

Solopreneur Starterkit

Branding, development, video production, & instructional design of online, 9-week training course for entrepreneurs.

Branding

Product Design

Instructional Design

UX Reserach

Vibe Coding

Series of experimental micro-apps built through with collaboration Anthropic's Claude & other coding agents.

Prototyping

Product Design

Web design

AI-First Development

The Integration Project

UX consultation & prototyping for key features of AI-driven healthy habits app startup.

Consulting

Prototyping

UX Reserach

Instructional Design

Amiara

Branding development, prototyping, and front-end design for AI-driven entrepreneurial startup.

Product Design

Web design

Branding

Duolingo Product Concept

Development of high-fidelity prototype of experimental learning feature concept for Duolingo app.

Prototyping

Product Design

AI-First Development

Instructional Design

UX Reserach

Whole Foods Market

Human-Computer Interaction research & hueristic analysis for Whole Foods self-checkout POS systems.

UX Reserach

Consulting

Apeiron

UX consultation & Website design/development for longevity and health optimization clinic in Austin.

Web design

Consulting

UX Reserach

Sharpnack Site Redesign

UX consultation, branding implementation, & Website design / development for Midwest lawfirm.

UX Reserach

Web design

Consulting

Cyberpunk Concept Site

Design & development of experimental cyberpunk concept site in Framer and Claude.

Web design

Branding

Graphic Design Collection

Collection of independent and commissioned poster & cover designs based on films and inspiring maxiums.

Branding

Synth Tabletop Game

Branding / concept development, & graphic design for physical, vaporwave-themed table-top game.

Prototyping

Product Design

Branding

Daily UI Practice

Documentation of collection of daily UI practice in Figma, replicating popular app UIs.

Prototyping

Web design

Let’s bring your vision to life

Free Chat

Ready for a serious chat?
Set up a time on our calendar to have a one-on-one discuss about your project goals.

Slide into our DMs.

Write us a quick message letting us know about your project.

Extreme close-up black and white photograph of a human eye

Contact us

Let’s bring your vision to life

Free Chat

Ready for a serious chat?
Set up a time on our calendar to have a one-on-one discuss about your project goals.

Slide into our DMs.

Write us a quick message letting us know about your project.

Extreme close-up black and white photograph of a human eye

Contact us

Let’s bring your vision to life

Free Chat

Ready for a serious chat?
Set up a time on our calendar to have a one-on-one discuss about your project goals.

Slide into our DMs.

Write us a quick message letting us know about your project.

Extreme close-up black and white photograph of a human eye

Contact us