Data Visualization / Dashboard Design / Figma Make

Campus Study Space Finder

An interactive data visualization product that helps Sheridan students compare campus study spaces by noise, comfort, crowd level, amenities, and learning mode.

Open live prototype View process

Campus Study Space Finder prototype showing filters and interactive campus map

Role

Dashboard UX Designer, Data Visualization Designer

Tools

Figma Make, React, Recharts, Tailwind CSS, AI-assisted iteration

Focus

Campus map, study-space filters, comparison and recommendation flow

Overview

Helping students choose a study space with less guessing.

Students often waste time moving between campus spaces because the information they need is scattered or invisible: how quiet a space is, how crowded it feels, whether outlets are available, and whether the room supports solo or group work.

This dashboard turns those questions into a visual decision tool. Users can start from a campus map, filter by study mode, inspect location details, compare spaces side by side, and review recommendation cards for different study needs.

Live Prototype Preview

Open in new tab

Product System

A map, analytics dashboard, and recommendation flow working together.

The interface is designed around a student decision loop: locate a space, understand the tradeoffs, compare options, and choose a place that fits the current task.

Campus Study Space Finder interactive campus map with numbered study space markers — Map-first browsing
The main screen starts with a visual campus map so students can orient themselves before moving into detailed metrics.

01

Study mode filters

Users can filter locations by Quiet, Group, Long Stay, or Quick Stop so the map immediately supports different study needs.

02

Interactive campus map

Numbered map markers make the campus easier to scan, while each location can open a detail panel with metrics and context.

03

Space analytics

Bar charts and scatter plots help students compare comfort, noise, crowd level, outlets, and satisfaction at a glance.

04

Recommendation and compare

Personalized recommendation cards and side-by-side comparison help users move from browsing to choosing a space.

Campus Study Space Finder analytics dashboard with metric comparison and scatter plot — Analytics dashboard
Metric controls switch the bar chart focus, while the scatter plot helps compare spaces through noise level, comfort, and satisfaction.

Process

From product requirements to a working Figma Make prototype.

The process moved through problem framing, user flow mapping, map readability, chart selection, and AI-assisted front-end iteration. Each step made the dashboard easier to scan and easier to use.

1. Define the product problem

I framed the dashboard around a practical campus issue: students often know they need a place to study, but they cannot quickly compare noise, comfort, crowding, outlets, and fit.

2. Map the decision flow

The user flow lets students start from the map, filter by study mode, inspect a location, compare up to three options, or ask for a recommendation.

3. Make the map readable

The campus map was redrawn and simplified so it could work as an interface, not just a reference image. Numbered pins make locations easier to identify.

4. Build charts and feedback states

The final prototype uses chart components, metric toggles, detail panels, and recommendation cards to keep the decision process visible.

Process 01

User flow logic

The flow is non-linear: users can filter, inspect a pin, compare spaces, review analytics, or return to the map at any point.

Process slide showing the Campus Study Space Finder user flow chart

Process 02

Map refinement

The map was simplified from the original campus reference so the interface could support quick orientation and cleaner markers.

Process 03

AI-assisted build process

AI was used as a coding partner for component building, troubleshooting, and iteration while design judgment stayed with the designer.

Process slide describing AI-assisted development and design iteration

Design Decisions

Prioritizing quick comparison over decorative data visuals.

The chart system uses simple visual forms because the user goal is fast comparison, not data exploration for its own sake. Bar charts work for metric ranking, scatter plots show relationships, and radar charts support side-by-side space profiles.

The interface also avoids a single linear path. Students can browse visually, use filters, inspect details, compare, or jump to recommendations depending on how much they already know about the campus.

Process slide showing chart design choices for the dashboard

Chart choices were selected for readability, comparison, labels, spacing, and clear interaction states.

Skills Used

Dashboard UXData visualizationInformation architectureInteractive filteringMap-based UIRechartsFigma MakeAI-assisted prototyping

Result

The final prototype presents a complete decision system: filter the campus map, inspect study spaces, compare chart-based metrics, and receive recommendations that translate data into a clear next step.

Open live prototype