My Framer Site

LAYOUT

3-Column Hierarchy

Information is sorted for easier access and digestion - urgent left to secondary right. The layout is the navigation. No tabs, no clicks, no menus.

ACCENTS

Active Highlight

Relative time over dates to trigger action not just awareness. This small detain gives clarity and acts as an urgency framed deadline.

COPY

"In 6 Hours"

Light pink accent on current or upcoming class removes "where should I be" question entirely. It also adds to aesthetic and hierarchy.

COLOUR

Intentional Dark Mode

Dark interface reduces eye fatigue and strain. Students can check their dashboard any time of day or night. The added aesthetic speaks modern.

future thinking

LIVE APIs

Alerts Via Live APIs

Integrate live OC Transpo data with weather severity (Snow/Ice = add 10 mins walk) and time to next class to push alerts.

PAIRED RESPONSIVE VIEW

Mobile-First View

The dashboard was designed for desktop (Primarily used by students) - a natural choice for study. But glancing at information on phone especially between classes could be handy.

PERMISSION MODEL FOR NOTES

Collaborative Notes

The option and filter for shared and personal notes with notifications when something is shared by a classmate. Sorting, organizing and real-time edits for the notes panel as a better study aid and collaborative environment.

final design

Algonquin College

Dashboard

UI/UX Project

Student Dashboard • Wireframing

PERSONAL ACADEMIC PROJECT • 2020

Overview & problem

As a student at Algonquin College,I noticed a pattern of scattered information and the need to access different sources or apps for everything. That sparked an idea and designing a dashboard was my answer to that problem.

The goal was to design a single page glanceable dashboard that aggregated all-school critical information with zero cognitive overhead - so students could be ahead of or at least in sync with schedules.

pain points

Platform Fatique

Hover to flip

Multiple app/resource switches especially before the first class of the day. Design Response: Everything above fold, zero navigation required.

Platform Fatique

Hover to flip

Multiple app/resource switches especially before the first class of the day. Design Response: Everything above fold, zero navigation required.

missed deadlines

Hover to flip

Due dates in LMS. Higher possibility of last minute rush or too late. Design Response: Urgency framing - "In 6 hours".

missed deadlines

Hover to flip

Due dates in LMS. Higher possibility of last minute rush or too late. Design Response: Urgency framing - "In 6 hours".

announcement anxiety

Hover to flip

Grade releases and date changes in email threads or brightspace, hard to monitor. Design Response: Unified timestamp feed, sorted by latest notifications.

announcement anxiety

Hover to flip

Grade releases and date changes in email threads or brightspace, hard to monitor. Design Response: Unified timestamp feed, sorted by latest notifications.

transit + weather app

Hover to flip

Getting to campus was an obvious logistic. Students needed basic information. Design Response: Widgets - weather + bus schedule at a glance in the centre column.

transit + weather app

Hover to flip

Getting to campus was an obvious logistic. Students needed basic information. Design Response: Widgets - weather + bus schedule at a glance in the centre column.

Note Fragmentation

Hover to flip

Notes scattered across docs, emails, apps etc. Design Response: Course-tagged note library with filters.

Note Fragmentation

Hover to flip

Notes scattered across docs, emails, apps etc. Design Response: Course-tagged note library with filters.

No sense of day shape

Hover to flip

Hard for students to sense if the day was light or brutal. No glanceable overview. Design Response: Lecture list + due dates at a glance.

No sense of day shape

Hover to flip

Hard for students to sense if the day was light or brutal. No glanceable overview. Design Response: Lecture list + due dates at a glance.

Hover over any card to reveal the design response

wireframe

DESIGN THINKING

Designed around the primary goal of scanning information from left to right, prioritizing immediate tasks before secondary content.

Bifurcated into 3 clear columns with important content above fold

Left - Quick glance at important information & daily tasks - deadlines, assignments & lectures.

Center - Contextual widgets. Time, weather and bus arrival data that support planning without distracting.

Right - Passive information. An isolated panel for announcements for a clear feed separate from actionable tasks.

The idea was to prevent cognitive overload while allowing the ability to continuously monitor updates.

Other fun icons for apps are integrated on the far right for extra exploration without disturbing hierarchy. Music, Class group chats, zoom meetings, games and library for resource sharing.

DESIGN THINKING

Designed around the primary goal of scanning information from left to right, prioritizing immediate tasks before secondary content.

Bifurcated into 3 clear columns with important content above fold

Left - Quick glance at important information & daily tasks - deadlines, assignments & lectures.

Center - Contextual widgets. Time, weather and bus arrival data that support planning without distracting.

Right - Passive information. An isolated panel for announcements for a clear feed separate from actionable tasks.

The idea was to prevent cognitive overload while allowing the ability to continuously monitor updates.

Other fun icons for apps are integrated on the far right for extra exploration without disturbing hierarchy. Music, Class group chats, zoom meetings, games and library for resource sharing.