V2 of Vocab Analytics and Vocab Details

[wcjord]

Designs needed!

[KhueDao1]

On Figma is where I have my work progress updated weekly Figma Khue Update

And here is specifically what V2 looked like as of Dec 12th
View in Figma Vocab Analytic

[wcjord]

@KhueDao1 Noting our discussion in-real-life the other day about modifying these to be more Flutter- and FluffyChat-friendly. We want to gradually incorporate more solar punk and game-y designs while staying easy-to-implement in Flutter and reasonably consistent with existing UI styles.

[wcjord]

It currently quite odd that the progress bar maxes out and then stops filling though you can keep doing practice with it. The distinction between "unlocking" a construct and it being added to your list versus getting 30 xp on it versus what xp more than means is all ambiguous.

Before we use big data to figure out exactly how to say when a user has "mastered" a construct, we might be able to give it an intrinsic game meaning that addressed the UX issue and makes "leveling up constructs" feel like a worthwhile and meaningful set of subgoals by giving them a visual interpretation.

Unlocked word = seed.
Whenever you first use the word, you gain a little seed.

Word with 30 xp = green sprout.

Word with ~200 xp = sunflower.

From 0 to 30 xp, the progress bar increments is green over a gray background. After 30 xp, the progress bar is gold over a green background. Inspiration drawn from many popular games.

We could even do a full animation from seed to flower that we display.

[wcjord]

From @KhueDao1 :

Here is the Figma File
Vocab Analytic will display the garden section at the top and how many lemmas a user has collected in each XP tier, with an icon next to it.
For consistency, I use the brand's primary colors of Yellow, Green, and Purple.

Light Mode

[wcjord]

Hey @linhtphung @KhueDao1 I did another version of this. Some notes:

• This incorporates the emoji/image for the lemma. If not yet set, then it shows just an emoji placeholder.
• When we're ready to add practice via this page, the practice button can be in the top right of the view.
• We don't have the phonetic spelling info yet so this can be just the audio button. This isn't too hard to lemma definition though. Related question - is it 80% of what the learner needs to just have the phonetic spelling for the lemma or do we also really need it for the forms? If necessary, we ask an LLM to give us all the forms of a word when we get a definition and emoji for the lemma.
• The icon beside "noun" will be replaced by the pos-specific icon that we're developing as part of the grammar iconography. It'll add a bit of visual variety to what's there - both in form and color.
• Long-pressing on any particular piece of AI-generated content should eventually offer the user the ability to edit it.
• There are no pronunciation activities so this analytics will be omitted for now. We can already display the other items.
• Each icon will have a hover tooltip with a name. I'm not too concerned about making these explicit. They'll be used in a lot of places so I think the user will know what they are.
• The last line of analytics (with the book icon) would probably be interpreted as "Reading" via the image. Indeed, the tooltip could also say this. However, it's actually practice activities. I believe we've discussed this though and decided that this was a fine conflation. We don't really have a way of deciding that you've "read" something other than by doing practice activities with it.
• We'll want to limit the list of uses that we display the messages for somehow, probably to like the 4 most recent.

@Kelrap is lined up to implement this coming week!

[linhtphung]

This looks fine, but maybe some minor tweaks in

• Since we don't have the phonetic transcription and practice activity yet, I think the "speaker" icon should be next to the word to the right.
• The font size should be increased because currently, it looks too small for the phone screen.
• Maybe just show up to three examples of how the word was used under writing.

[Kelrap]

I've implemented most of this in vocab-v2. There's a few minor things I didn't get around to, and some things that can't be added until other changes are made.

To be added:

• Highlight vocabChip on hover
• Add decorative flowers on vocab page tiles
• Long-press on AI-generated content to edit it.
• Use POS-specific icon below app bar on definition page (not possible yet)
• Add practice button to definition page (not possible yet)
• Show phonetic spelling info on definition page (not possible yet)
• Add display for pronunciation activities on definition page (not possible yet)

[wcjord]

Hey make an issue ticket and put this there and attach the relevant PR please! @Kelrap

[wcjord]

Another version of vocab details which showcases the user with highest XP for that word, including links to public spaces (think university and languages schools) that they're part of.

My intentions with this design is to

• give social meaning to per word XP by introducing a "leaderboard" mechanic in a way that offers many (as many as the words in a language) chances for users to be Number One on some unique, meaningful dimension.
• By showing the spaces they're in, students can feel some pride for "repping" their tribes.