Main Page Idea #1  of Practice Tool Iteration #4

Main Page Idea #2  of Practice Tool Iteration #4

The fourth iteration of the Practice Tool focused on changing the main page of the Practice Tool to allow users to select and check the communities they're learning from. 

University of Michigan - Ann Arbor

The UI design for the 1Cademy Practice Tool was started in June 2021. The structure for the practice tool is evolving over several iterations and design critiques. Currently the main components of the practice tool are:

- Practice Tool Launch Page
- Question Page
- Expanded Leaderboard
- Question/node feedback       

Practice Tool

This is the first iteration of the design and includes a practice tool launching page, a leaderboard that displays the progress made by the user, a page that displays the questions with answer options for the user to answer, and a page that displays the nodes related to the question, if answered incorrectly.

Practice Tool: Iteration #1

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

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

Learn After