Darker node and sidebar color, book pages background

Lightmode Design 1

Darker node and sidebar color, glasses background

Lightmode Design 2

Lighter node and sidebar color, 4 story library background

Lightmode Design 3

Lighter node and sidebar color, lots of windows library background

Lightmode Design 4

Lightmode Design dark overlay 1

Lightmode Design dark overlay 2

Lightmode Design dark overlay 3

These are our designs for the toggle button to switch between lightmode and darkmode.

Lightmode toggle buttons

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. 

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

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.

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