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.

Practice Tool: Iteration #3

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. 

Practice Tool Iteration #4

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       

University of Michigan - Ann Arbor

- Background design
- Lightmode vs. Darkmode
- Node action icons
- Logo
- Tooltips
- Homepage
- User Profile Page
- Practice Tool
- Chat sidebar

1Cademy UI General Components

The background of the map can be a little distracting. Some possible ways to fix this would be to reduce emphasis on it through blending mode, blur, etc. or altogether change it to something less busy, such as a solid color, gradient, etc.

Background Design

Logo design

Includes possible alternatives for the tooltips that pop up when you hover on an icon, with the intention of reducing their word count to make them easier/faster to read.

Tooltip Alternatives

These are our initial lightmode designs. There are four variations that play with the lightness of the foreground elements, as well as the background image and it's overlay. 

Lightmode designs

Redesign of the loading screen to improve user satisfaction by:
1. Decreasing perceived wait time
2. Making users more willing to endure longer wait times

Loading Screen Design

Update 1Cademy website meta title and description to be more useful in search engine results.

Meta Title and Description

Redesign the action icons using Material Design to...
1. More clearly communicate actions
2. Make icon locations more intuitive
3. Better align with the Material Design interface 

1Cademy Node Action Icons Design

These are our designs for the user profile page that is shareable/editable. They contain pinned nodes, trends, all nodes, an about section, and related scholars.

User Profile Page

These are our designs for the sidebar user settings. They contain different button designs and background layouts for the sidebar settings. 

Sidebar User Settings

This records and contains our design on the redesign of chat sidebar.

Learn Before

Related

Learn After