University of Michigan - Ann Arbor

The second iteration of the practice tool design includes various components of the first iteration along with a new leaderboard design. This horizontal leaderboard shows the progress made by a learner as they earn points by answering questions correctly.  An expanded version of the leaderboard also shows progress made for each community.


Another important feature added here is the 'View Node Tree' button. Whenever a question is answered incorrectly, the view node tree button opens a preview of the relevant question node and provides an explanation for the correct answer.

Practice Tool Iteration #2

Launch Page #2 (Practice Tool)

Question Page #2 - Correct Answer (Practice Tool)

Question Page #2 - Incorrect Answer (Practice Tool)

An overlay preview window that shows the question node and the related concept/reference node to the answered question. There is also a 'Expand' button on the top-right to allow the user to open the node tree in a new tab and traverse other related nodes.

Node Preview #2 (Practice Tool)

Leaderboard #2 (Practice Tool)

Your (User) Progress #2 (Practice Tool)

Question Page of Practice Tool Iteration #2 - Correct Answer

The third iteration of the practice tool design includes designs based on the second iteration but with new additions. We added an option to choose communities to learn from, feedback for the user to see what questions they got right and wrong, and a new sidebar that expands into the leaderboard. We also added emoji feedback for each practice question for the user to rate the question they just answered. We also rethought how the progress bar would look at the top and added user points along the horizontal bar.

Learn Before

Related