New homepage dashboard prototype

[fabd]

So as announced on the blog, here are some prototypes for an improved homepage dashboard.

I decided to make this my priority for the next update(s), to address several important flaws with the Koohii's homepage:

• the new user experience is very poor : there are no clear next steps on the homepage
• the current "dashboard" is really just three buttons in a row
  • to make things worse they are all three the same colour and size
  • Study and Review are really just links to the relevant pages, they are have otherwise no function
  • the due card count (in orange) just repeats info from the SRS chart page - however I assume most users who want to review will go to the SRS page first to get better details on the current state of their flashcards, so reproducing a subset of these numbers is not useful
• there is no activity log of any kind
• tracking your progress is also very underwhelming : you have to click the "Progress Chart" button

The main issues we're trying to solve

The new dashboard aims to answer two recent requests I've received:

. "I just finished adding stories and reviewing Kanji 1 to 20 today. Is there any way to keep track of the highest kanji that I have studied so far? (...) It's not always easy for me to remember the most recent kanji that I studied."

"Is there any way I could access my usage history. For example, can I see when I added cards, or how often I reviewed my cards?"

Keeping It Simple

it is intentionally kept simple, because I don't want to redesign the entire site layout at this point.\

It can not be too tall vertically, so I can fit the JapanesePod banner, and at least the most recent blog post heading -- so users can notice a new blog post without scrolling down too far.

[fabd]

Here is a full page feel for the dashboard, showing how the banner and blog post can still fit below the dashboard:

[fabd]

Here is a better view of what the new homepage dashboard could look like:

Top Left

• on the top left (the most visible area) we have the most important metric : how far am I along the RTK book? expressed in kanji covered per total (~2200 kanji in RTK 6th edition)
• "Continue with Kanji # 56" button : as long as the user adds card in sequential order, this will let the user pickup just where they left off yesterday (index of last kanji card added +1 ) .. this would take you straight to the relevant Study page
• if there are Forgotten Kanji, a useful button that reminds you there are there, for users who prefer to grind those down first before studying new cards

Current Lesson

Here we have a progress within the currently active lesson -- also derived from the index of the last kanji card the user added in sequential order.

• can motivate user to complete the lesson
• "Show Lessons" link will show what is currently the "Check Progress" page
• the "Show Lesson Details" button will open a box below with the kanji in just that lesson

Recent Activity

Koohii has never had any kind activity log (besides the "Who's Reviewing" page)... so this is long overdue !

Something I hope is not too confusing for users is that Koohii keeps track of "learned kanji" by the presence of a flashcard. It is not necessary to review these cards.

• when users don't use the Koohii SRS, they will still see blue piles -- provided they add kanji cards to keep track of their progress
• for a first implementation I may simply display the past 30 days. We can always iterate from there if people want more details.

Thankfully we do store a timestamp for both "last review" and "created at" dates... therefore once the update goes live in theory you should see the past month activity.

[fabd]

Lesson Details

This is quite bland but just to explain what the "Show Lesson Details" button does.

The button essentially would expand /.collapse a detailed section below.

The lesson details is mainly to give a more tangible look at progress within a lesson.

• It shows a grid of kanji in this lesson, keywords, indexes
• kanji already learned are hidden
• kanji yet to be learned are visible
• clicking any card would go to the Study page. so it could be mildly useful to navigate
• perhaps also show current status Forgotten / New / Succesfully Reviewed (red, blue, green) for existing cards

[fabd]

Finally this is what the dashboard could look like for a new user (very 1st draft...) :

[bradenpecora]

If you are tracking flashcard reviews, I think it could be useful to have each day's flashcard reviews column split up into successful and unsuccessful reviews. The top of the column could be red and the bottom green to visually represent/track your retention. I could also see how this could be considered clutter by some, so this is just a suggestion.
Also, I think it is important to keep a button that takes you directly to spaced repetition, especially since that is something that should be used by users at least once a day. It appears that has been removed.

[vbodengien]

Where is the Review button? It's practically the only thing I use, nowadays. That, and the overviews in the Review window: overview of days to come so that I can plan when I will do the review, and overview of where my cards are (1-7+).

[francoisthire]

Two suggestions:

• For the two progress bars, maybe a percentage can be printed too (like at the right of the progress bar?)
• When a kanji card is printed, maybe its background should depend on its current status in the SRS system? Shading could be used such as red is new or kanji we failed recently and green is the last level?

In general, the white background is probably too flashy for me, and having a way to get a darker background would be a nice improvement too.

[fabd]

Hi guys

I've taken note of all your feedback and working on it. Last week's been rough so I haven't progressed a lot.

Thought I'd post smaller incremental updates perhaps, to iterate faster.

In this mockup the top area incorporates the following changes:

• included Review in the top right @bradenpecora @vbodengien
  • Review includes a count of NEW and DUE cards (optional: we could make them clickable to go straight to review session)
  • also added a direct link to the non-SRS review modes
    • Custom Review "Learn More" link will clarify to users what non-SRS mode is (ie. no need to add flashcards, but no progress stored)
      Perhaps in the future I could also just have a large popup when you click the non-SRS button, since the "kanji Review" page is really just a small form to select the options for the review session, which could be done without even leaving the dashboard
• added percentage on the main progress bar @francoisthire
  • I'm undecided for Lessons, as there are fewer kanji in lessons, I thought perhaps a kanji count works there -- otherwise I would have a percentm but then the text above could read, eg. "19 / 24 kanji in lesson 5 of 56" which feels like too many numbers in a sentence.

[callaleia]

This looks very nice. Thank you for your hard work.
I wonder how the view would change once RTK1 is finished...

[fabd]

Hey thanks for the feedback @callaleia !

Good question. I have spent some time thinking of the various "states" of the UI, so I can focus on just the coding later.

In this case I guess I was going for simply having 100% on the main progress bar, and to add some sense of completion, a message like "RTK Volume 1 complete - congratulations!" instead of just "2042 / 2042 kanji (...)".

Indeed once RTK is complete, the top left part ; tracking the RTK overall progress ; will not change.

Did you have something in mind?

[callaleia]

That sounds good! It was actually a nice milestone for me to get the "RTK 1 completed!" on my main page originally. :)

I was just curious if there would be any way to see any kind of continuing progress after finishing RTK1 (RTK3 progress?) -- but it's an extremely low priority issue. Finishing RTK1, and then moving on to learn actual vocabulary and use of those characters, is more useful for a learner, and from a UI standpoint it's much more important to create a smooth experience for newer users too.

[fabd]

Hmm there is support for RTK3 (a lot more kanji !) ..

But I see in the code that the RTK 1 completed! stays on the homepage, even though you can see the RTK Vol. 3 progress bar on the Check Progress page.

Perhaps I could switch the Study Kanji #123 button to Start RTK Volume 3 instead, and once the user added a kanji for it, then that part of the dashboard will show progress in RTK Vol 3.

I will put it on the todo list it's definitely not a priority, though there's quite a few users who are inching towards 3 K kanji flashcards.