This mockup makes the following changes to the current action icons design:
1. All icons are Material Design (to improve responsiveness)
2. References icon is a paper 
3. Unhelpful is now a downward arrow
4. Helpful is now an upward arrow
5. Bookmark is now filled to match the rest of the icons
6. Mastered is now an eye
7. Child nodes is now a back and forth arrow
8. "idea" node icon is now an illuminated icon
9. Node height icon is now a single double-headed arrow
10. Number indicators for icons are lowered

All icons are 18px in size, following Material Design guidelines. 

Icons Redesign Using Material Design

These are the current action icons design. 

Current Action Icons

Parent Child Icon

Not Mastered Icon

Bookmark Icon

Material Design upvote and downvote icons

Upvote and Downvote Icons

Reference Icon

Tags Icon

Edit/Propose Node Icon

Last Edit Time Icon

Resize Height Icon

Profile Icon

1Cademy Node Type Icon

Material design idea node type icon. Note that there are 3 different versions.

Idea Node Type Icon

Relation Node Type Icon

Mastered Icon

Current Mastered Icon

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 

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

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.

Chat sidebar

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       

Learn Before

Related

Learn After