Learning Postcards: Sketching the UX

I spend time earlier this month to learn and set up a new stack for this app. I also refined the definition of it by digging into Micro-learnings and brainstorming on the concept. We did a #PKMChat on Microlearning to collect some feedback and opinions. Now it’s time for creating.

I attended a webinar on Product Design this evening. I know the process of sketching, doing sprints of design and working with users but I felt I could now rush and design without even a sketch. After the webinar, I recollect my new practice of doodling. I decided to give it a go. A quick hand-drawn sketch of what I plan to code. I deliberately avoid the ruler or the templates. I need to practice drawing nicer straight lines. So it’s quickly done, almost back-of-the napkins mode.

This what I plan to implement now. I’m going to focus on the learning experience first. The first cards will be designed manually by myself. The design tool will come next, while the learning part is validated by a group of volunteers.

Check the details below:

Learning Postcards Microlearning Index cards and learning process

  1. When you reach your space you face your index card box.
    1. Cards are grouped by decks.
    2. The top left deck is the inbox.
    3. cards are slightly offset to show their titles. This is very near from the last design of Kneaver but the software stack behind is completely different.
    4. When you hover on a deck, cards spread letting you see them in more details.
    5. click on a card or on a deck to move to the next display below.
  2. Cards can also be presented as a table.
    1. The table list all the cards corresponding to a filter.
    2. The filter is selectable on the upper right. When you select a filter the display is changed accordingly.
    3. You can click on columns headers to sort by columns
    4. The table presents the title, tags, completion status and last review.
    5. A color code signal the cards that should be reviewed now based on space repetition plans.
    6. Click on a card and proceed to the card display. Depending on the completion stage you go directly to the front, back or detail view.
  3. Decks present all their cards arranged in a long scrollable view.
    1. Cards are displayed according to the masonry layout.
    2. Click on any card to proceed to the detail view.
  4. Front detail view
    1. Present a slide viewer for each element of the content.
    2. The content can be made of videos, images, svg drawings, or text
    3. You can slide your finger and move backward or forward
    4. A button on upper right let you flip the card
    5. This is the time to get acquainted on the topic, the knowledge carried by the card
    6. All together, it must be fast, less than 5 minutes.
    7. You can quit at any time and return to the exact same point
    8. The UX should allow a use in distracted mode, standing and in mobile conditions.
  5. Back view is to deepen the knowledge
    1. The back view is made of widgets.
    2. We start with 4 types of widgets: quizz, forums, links, and application exercises
    3. Some widgets may require more space, in this case, a modal box is opened as shown in the last picture.
  6. a share button allows the learner to share again the card via email, Twitter, Facebook.
    1. For this first iteration, only twitter will be implemented using Twitter Intents.
  7. Links shared allow new users to join and find the said card in their inbox. This means they will find a single card in their inbox and a few demo cards in other decks.