New Homepage Dashboard Prototypes - Round 2

[fabd]

Here is updated prototypes aka "mockups" for a new homepage.

I feel the mockups are defined enough for me to begin implementation.

Here is a summary of tweaks:

• ✏️ incorporated feedback from the previous thread, namely :

  • percentages on progress bars
  • include direct links to SRS and other review modes
  • display current SRS status of flashcards when "expanding" a lesson to see the kanji in that lesson

• ✏️ improved the Welcome screen (first time user) - adding a picture of the RTK book, and link to the sample chapter, so users have clear next steps even if they have just heard about RTK

• ✏️ experimented with a different kind of progress bar for current lesson : the bar is made of "bubbles" so that each dot/bubble matches exactly 1 kanji in that lesson - I thought this may give a more finegrained view of progress even without looking at the lesson details - Implementation-wise it'ds be actually easier to just use the same progress bar as the main RTK progress bar above, however I felt it looked a bit bland and repetitive to have two progress bar looking too similar

• ✏️ improved the lesson details view : it was hard to make nice looking kanji cards, it was also dfifficult to indicate clearly the state of existing cards -- finally it occured to me to use a design similar to a Panini Sticker book : an outline shows where a kanji card can be added, that way the kanji cards added VS those not added yet are clearly distinguished.

  I also struggled for a while with the idea of being able to add cards from that view. It seemed like a no brainer at first but after a while of thinking this through I realized it doesnt work : imagine a new user goes to the Study page and learns 11 kanji, the user comes back to the homepage : if they have not added cards yet, then the main RTK progress bar is still at 0%, and the green button that lets you pickup where you left would still show Study Kanji #1 .. because the user's current "position" in the index has to be derived somehow from flashcards.

  It makes more sense also that there is fewer ways to do the same thing, being able to add cards from the homepage imho would add further confusion as you can add cards via Study pages (top right), AND in the Manage pages.

  So the expected flow will be : user goes to Study pages via the Study Kanji #123 green button (where 123 is "last flashcard added in sequence + 1") - user adds cards one by one , in the Study pages (ie. study, edit story, click to add card, then click "next" button) - user goes back to homepage and sees the progress bar has advanced, the "Study" green button has also been updated so clicking it will let them continue, and clicking Show Kanji under Current Lesson will show the cards that have been just studied and added (they will all have a blue tag saying "New").

  What we CAN do however, in Lesson View, is have each card function as a direct Study page link - I think that could be very handy -- and if the user forgot to add cards, that could be an easy way to continue where they left, as seeing the kanji in the lesson will give them a better context, then click the kanji they last were working on.

• ✏️ finally the Check Progress page , now "View All Lessons" is updated to use a similar progress bar design...

  AND you will be able to expand each lesson just like Current Lesson on the homepage - consistent behaviour, and functionality currently inexistent.

  I feel like this redesigned lesson view take up a lot of vertical space - however I think it's pretty easy nowadays to scroll vertically whether on desktop or mobile - I also think that for the user to have to scroll down a lot as they progress through RTK lessons ; in this page specifically ; may actually have a positive impact since it lets the user appreciate all that has been accomplished so far whereas a "collapsed " vierw of sorts that shows current lesson at top of page would make this progress less apparent -- having said that if I could find a more compact design that would be good too

• the Activity Log is unfinished - I feel it's functional enough (simple bar chart) for me to begin researching the implementation - I will probably implement a simple working version and iterate based on user feebdack

[fabd]

A typical view for a returning user

[fabd]

First time user - "Welcome" section

A "Welcome" section is displayed to help new users get started, and give more context about the RTK book.

[fabd]

Example of what it would look like after studying Kanji 1 - 11

The user went through kanji 1 to 11, returning to the homepage :

• the progress bar has moved
• the Study Kanji main button will let them resume where they left
• the lesson view shows cards that were added while advancing through study pages (the kanji cards would show "New" - this mockup shows what different SRS status could look like)
• the NEW cards in the Review area could potnetially take the user directly to SRS review
• notice the Current Lesson progress bar visually indicates there are 4 kanji left

[fabd]

Redesigned "Check Progress" page

This page is now accessible via the link Show all lessons on the homepage.

It will be possible to view kanji in each lesson.

[francoisthire]

I am wondering whether the progress bar could show the restudy cards? Maybe we could use several colors for progress bars which would override so that we can see the various learning levels for one lesson in only one progress bar?

[fabd]

At first I thought this would be information overload, but on further thought, I see how it would be useful to have at least a sense of succesful vs restudy coverage across all lessons without expanding the lessons.

I'm thinking I may use the same design then on the homepage "Current Lesson" progress bar (differentiating Restudy cards inside the progress bar).

I iterated on this page this morning. See new post below.

Thanks for the feedback!

[fincentxyz]

Wow, incredible work on just the mockups alone. They look professional, I really like them personally. Goodluck with tweaking the designs and eventually implementing them!

Just dropped you 5 euros on PayPal, thank you for maintaining the site for such a long time!

[fabd]

Thank you Fincent7!

[francoisthire]

Is it possible to make the backgrounds of learned cards a bit less flashy? Or is it a feature?

[fabd]

It's a visual way to differentiate very clearly added vs non-added cards.

I remember you made a commented about dark mode or something like that?

I think the site as a whole is already not very bright since it has lots of warm tones, and doesn't use a bright #fff background.

So I'd recommend using something like Stylish extension in Chrome/Firefox if you'd like to customize the site further, that will let you change the colours of the cards by overriding the CSS.

Site could also have a dark more but since it has a lot of legacy code in there, implementing a simple light/dark theme switch isn't trivial, or would be very hacky in the current codebase (too much old css).

So in other words as I am not ready to implement something like a "dark mode" that is consistent across the site, and I haven't found a satisfying visual cue for learned cards -- then using custom css is your best option.

I tried other designs where all cards have the same background, but the learned ones have a different tag, or border.. but it's just not obvious.

Here is some other designs , in the top right you can see an example, where I could have used a border to differentiate added/vs not added card, (assume we use any colour you like as a bg) -- it;'s just not obvious at a glance. The "panini sticker book" style i went for in the row below (as if "filling empty slots") imho is much more obvious.

[fabd]

New iteration on the "View All Lessons" page

• show the restudy status on the progress bar itself - to get a sense of overall "retention" of the kanji in each lesson at a glance, without having to expand any of the lessons
• moved the kanji count (eg. ( 15 / 15 )) in the lesson title since it's difficult to overlap that info on those progress bars
  • display the kanji count instead of the index range (eg. #16 - 34 for lesson 2) : I think the index range of each lesson is not that useful to view in the lessons list, and you can always expand the kesson ("Show Kanji") to see the indexes
• this iteration shows more accurate data - if the user expands Lesson 5 - and shows "NEW" cards which technically count towards progress , even if not reviewed yet. I didn't use a blue color on the progress bar for those NEW cards as the color is quite strong and distracts imho from the ones that have been reviewed (green / red)

[francoisthire]

I really like this new proposition. I was wondering if you have thoughts about the design for very long chapters such as chapters 23,25,... ? Maybe the bar should be splitted?

[fabd]

@francoisthire Hmm yes if there are too many kanji in one lesson, then implementation wise I'll probably switch a css class, which allows the individual "ticks' on the bar to be smaller. Likely I'll remove the little "dots" if there are like 50+ kanji, and then reduce the spacing to 1px or even remove it.

So for those few, really long lessons the progress bar won't look as nice. But you'll still see the colored sections. I mean worst case you have at least 200+ pixels wide in the bar where each px can represent one card.

ps: glad you like this new design! Thanks for the feedback, I am also glad to have iterated over it as it's definitely better than the previous one.

[Inclushe]

The colors of the UI elements make everything look way too busy. Not everything needs a solid color. I'd recommend subduing the colors of elements that aren't the main focus of the page. A good start would be to change the elements with a solid color bg and white text to a light color bg with dark text. Also, if you can afford it, I highly recommend reading Refactoring UI.

[Inclushe]

Bumping.
Also, is this part of a site-wide update you'd like to make? If so, I have some ideas for that.

[fabd]

I'm just one guy doing this in my spare time, so a site-wide redesign - which typically includes not just colors but also updating tons of templates - is a too large undertaking.

I explained the scope for this update in the previous thread : #240 - mainly an improvement for the homepage and new users experience - and secondary to improve the flow. Then I'll continue to look at other bits and pieces I can improve. The Study pages can have many improvements, but these need to be broken down in manageable updates.

For users who mainly just want kanji stories, there is not much I can do. These users can just go to the Study page and search for a kanji and that's it. So the homepage redesign is to improve the flow for users who are satisfied with Koohii's flashcard system, in which case then Koohii can track the user's progress, ... in which case then we can have some kind of a meaningful dashboard.

I think if we think up from there, the changes we need to make should be obvious.

This is not helpful.

[Inclushe]

That sounds like a plan.

In regards to improving the flow for those who just need the kanji stories, this is outside the scope at the moment, but we could add AnkiConnect support to the story cards.

In regards to my "thinking up from there" comment, there are some features I don't use, like the current lesson section and custom reviews, that are more prominent in the dashboard mockup when I would think they should be re/moved. Of course, I don't understand everyone's workflow and I don't want to hide useful features that people use for the sake of simplicity.
I know that you have Google Analytics on the site. Could you use that to determine if people actually use the lessons feature and other secondary features?

Also, are there any more relevant comments/requests you've received?

I want to make a Figma mockup but I need those questions answered before I work on that.

[Inclushe]

Bump

[Inclushe]

In regards to my "thinking up from there" comment, there are some features I don't use, like the current lesson section and custom reviews, that are more prominent in the dashboard mockup when I would think they should be re/moved. Of course, I don't understand everyone's workflow and I don't want to hide useful features that people use for the sake of simplicity.
I know that you have Google Analytics on the site. Could you use that to determine if people actually use the lessons feature and other secondary features?

Also, are there any more relevant comments/requests you've received?

@fabd What are your thoughts on those points? I'd like to make a quick mockup but I'd like your thoughts on those first.

[fabd]

I've been experimenting with using "heatmap" colors for the SRS status, similar to the Contributions chart seen on Github profile (cf. artlcle Building a Heatmap Chart Component.

So the idea is if you relax your eyes, the tags on the cards can also act as a heatmap, I put four levels of color for cards that have 1, 2, 3 and 4+ reviews , looks pretty cool :)

[fabd]

It's almost there... but as usual in UX ... it's the finishing that takes 80% of the time :/

This screenshot is not a great example -- in htis case if the user has "gaps" in the sequence (missing cards), then the dashboard zill assume that the last kanji in sequential order with no gaps is where the user is at; and derive the "current lesson" from there.

So if you have eg. kanji 1-130 and then 132-500 ... it will assume you are studying lesson 8, and your "next kanji to study" is #131.

I have no simple solution for making that more obvious. The app needs to know, one way or another, how far the user is along the sequence. I could have the user tick a box somewhere ona study page to say "I have sutdied this far", it will still require user input, -- and that would be irrelevant for those users who dont want to use Koohii SRS. I mean, it would be extra input for tracking progress but the users can just go to the Study pages and lookup whatever index they want.

For those users that use Koohii SRS - I'm trying to think of the simplest way to keep track of where the user is in the book. For now, I assume users either will add card one by one on the Study page (top right), or add a bunch of cards at once in "Manage Flashcards" after a round of sutdy, at which point the progress bar will move.

[callaleia]

Thank you for your work on designing and implementing this. The changes look good so far :)