VocabApp – Eselsbrücke Tab Redesign

Enhanced UX flow for user-friendly mnemonic creation

Objective:

Redesign the Eselsbrücke tab to guide users in writing memory-friendly mnemonics using intuitive interactions and supportive options.

Key Improvements:

1. Removed old Save button

2. Introduced inline send/edit icons

3. Added guided and fallback support for users

Introductory Sentence

1. Displayed at the top of the Eselsbrücke tab:

2. “Eselsbrücken help you remember a word up to 300% better. Write yours here:”

3. Info icon placed at the end

4. Popup explains the purpose of Eselsbrücken

Text Field with Inline Icon

1. Clean chat-style input field

2. Send/save icon inside the text box

3. After saving:

4. Field becomes read-only

5. Icon changes to edit (pen) icon

Help Me Create One

1. Button placed below the input field

2. Label text:

3. “Here are some words that sound like the German word in your language. You can use those to create an image in your head for the Eselsbrücke.”

4. On click: shows similar-sounding words for idea generation

I Still Need Help

1. Appears after Help Me Create One is clicked

2. Shows a scrollable list of pre-created Eselsbrücken

3. User can select a suggestion via radio button

4. Guiding text:

5. “Pick one of our pre-created Eselsbrücken to use.”

UX Highlights

1. Encourages creativity with smart suggestions

2. Minimal UI with inline actions (send/edit)

3. Supports all user types: self-creators or guided learners

4. Smooth transitions between states (input > suggestions > fallback)