Tabasque
Title
Research and design for an intuitive student dashboard to reduce time-to-comprehension by 52% and improve user delight
CompanY
Next Steps Idaho |
Statewide platform that helps Idaho students explore careers, plan for educational paths after high school.
Statewide platform that helps Idaho students explore careers, plan for educational paths after high school.
ROLE
ROLE
Lead Product Designer |
Experience Design, Prototyping, Usability Testing, High Fidelity Mockups
Experience Design, Prototyping, Usability Testing, High Fidelity Mockups
Timeline
Timeline
16 months |
Start to launch with a fully remote team.
Start to launch with a fully remote team.
ANY CHALLENGES IN THIS PROJECT?
ANY CHALLENGES IN THIS PROJECT?
Since Next Steps Idaho's CMS platform was built with Wordpress—which had significant limitation in functionality—this meant:
Since Next Steps Idaho's CMS platform was built with Wordpress—which had significant limitation in functionality—this meant:
Since Next Steps Idaho's CMS platform was built with Wordpress—which had significant limitation in functionality—this meant:
An MVP of this dashboard would be launch, and designs needed to be more simplified.
An MVP of this dashboard would be launch, and designs needed to be more simplified.
An MVP of this dashboard would be launch, and designs needed to be more simplified.
I had to ennsure the design wouldn't rely too much on admin input in the backend—to save admin users time
I had to ennsure the design wouldn't rely too much on admin input in the backend—to save admin users time
I had to ennsure the design wouldn't rely too much on admin input in the backend—to save admin users time
AS DESIGN LEAD,
AS DESIGN LEAD,
I drove the redesign of a dashboard that enabled users to efficiently manage and track their learning modules across the whole platform.
I drove the redesign of a dashboard that enabled users to efficiently manage and track their learning modules across the whole platform.
52%
52%
reduction time-to-copmrehension
3.75/5
3.75/5
user satisfaction rating
HOW MIGHT WE?
HOW MIGHT WE?
Create a visually engaging end-to-end dashboard experience in 4 months!
Create a visually engaging end-to-end dashboard experience in 4 months!
The original design team ignored conventional designs for dashboards and built with little to no research, adding features as one offs, losing sight of how students needed to learn.
The original design team ignored conventional designs for dashboards and built with little to no research, adding features as one offs, losing sight of how students needed to learn.
LEGACY DESIGN
LEGACY DESIGN
Users took an average of 20 seconds to understand how the dashboard worked because of the flat hierarchy, and lack of clarity, they struggled
Users took an average of 20 seconds to understand how the dashboard worked because of the flat hierarchy, and lack of clarity, they struggled
Disjointed layout
Disjointed layout
The separation of grades and lessons make it unclear to users that these elements were intended to be related.
The separation of grades and lessons make it unclear to users that these elements were intended to be related.
weak mental modelS
weak mental modelS
“Pick up where you left off” element lacked urgency and clarity, causing lesson completion to feel optional rather than required.
“Pick up where you left off” element lacked urgency and clarity, causing lesson completion to feel optional rather than required.
lack of visuals
lack of visuals
The dashboard felt clinical and uninspiring, lacking visual hierarchy, personality, or engaging elements to motivate users.
The dashboard felt clinical and uninspiring, lacking visual hierarchy, personality, or engaging elements to motivate users.
Poor discoverability
Poor discoverability
Categories are hidden behind multiple clicks, reducing visibility and making the interface feel opaque.
Categories are hidden behind multiple clicks, reducing visibility and making the interface feel opaque.
Disjointed layout
The separation of grades and lessons make it unclear to users that these elements were intended to be related.
weak mental modelS
“Pick up where you left off” element lacked urgency and clarity, causing lesson completion to feel optional rather than required.
lack of visuals
The dashboard felt clinical and uninspiring, lacking visual hierarchy, personality, or engaging elements to motivate users.
Poor discoverability
Categories are hidden behind multiple clicks, reducing visibility and making the interface feel opaque.
RESEARCH AND DISCOVERY
RESEARCH AND DISCOVERY
I gained insight on student behavior by reviewing our internal analytics tool where I discovered usage spiked near the end of the school year for 11th-12th graders.
I gained insight on student behavior by reviewing our internal analytics tool where I discovered usage spiked near the end of the school year for 11th-12th graders.
This usage coincided with students rushing to complete modules for financial aid requirements. Even Next Steps Idaho’s Head Admin noted students weren’t taking time to explore the dashboard. Combined with its lack of visual cohesion, this made it clear the design needed greater clarity, and faster access.
This usage coincided with students rushing to complete modules for financial aid requirements. Even Next Steps Idaho’s Head Admin noted students weren’t taking time to explore the dashboard. Combined with its lack of visual cohesion, this made it clear the design needed greater clarity, and faster access.
MARKET RESEARCH
MARKET RESEARCH
In the scholarly articles I researched, I identified MUST HAVE features
In the scholarly articles I researched, I identified MUST HAVE features
Features pulled from academic research states students would benefit from generous visuals that helped remind students of assignments, due dates and , track progress that was are helpful signifiers and motivators/gamification.
Features pulled from academic research states students would benefit from generous visuals that helped remind students of assignments, due dates and , track progress that was are helpful signifiers and motivators/gamification.
MAIN USER
MAIN USER
Using my research and analytics, I synthesized all my data to develop the "Pragmatic" user persona.
Using my research and analytics, I synthesized all my data to develop the "Pragmatic" user persona.
USER FLOW
USER FLOW
Before designing, I created user flows for lessons and assessments to brainstorm where features, information and content should be.
Before designing, I created user flows for lessons and assessments to brainstorm where features, information and content should be.
DESIGN ITERATION
DESIGN ITERATION
In my design explorations, I focused on hierarchal layout, displayed all sections of student lessons, documents and assessments.
In my design explorations, I focused on hierarchal layout, displayed all sections of student lessons, documents and assessments.
side bar for links
side bar for links
I used conventional side bar layout for students to collect and save their links and bookmarks within the whole platform
I used conventional side bar layout for students to collect and save their links and bookmarks within the whole platform
everything in one place
everything in one place
All sections are displayed on one page for students to scroll through to find what they need.
All sections are displayed on one page for students to scroll through to find what they need.
More visuals
More visuals
The dashboard felt clinical and uninspiring, lacking visual hierarchy, personality, or engaging elements to motivate users.
The dashboard felt clinical and uninspiring, lacking visual hierarchy, personality, or engaging elements to motivate users.
high cognitive load
high cognitive load
Based on feedback, the information architecture needed better content grouping for discoverability.
Based on feedback, the information architecture needed better content grouping for discoverability.
Final Design: Based on user and stakeholder feedback, I incorporated more visual cues like: a bolder color palette, iconography and segmented progress bar to distinguish states of completion and categorization of grades and content for a more actionable, intuitive interface.
Final Design: Based on user and stakeholder feedback, I incorporated more visual cues like: a bolder color palette, iconography and segmented progress bar to distinguish states of completion and categorization of grades and content for a more actionable, intuitive interface.
Navigational tabs
Navigational tabs
Reorganized sections and grades into tabs, streamlining navigation and improving content accessibility.
Reorganized sections and grades into tabs, streamlining navigation and improving content accessibility.
states of completion
states of completion
By using icons and color, students could easily tell what was urgent, what was done, and what to focus on next.
By using icons and color, students could easily tell what was urgent, what was done, and what to focus on next.
Interactive Side bar
Interactive Side bar
The separation of grades and lessons make it unclear to users that these elements were intended to be related.
The separation of grades and lessons make it unclear to users that these elements were intended to be related.
Upcoming events
Upcoming events
To boost visibility, I created an ‘Upcoming Events’ section linking Next Steps Idaho programs in the dashboard.
To boost visibility, I created an ‘Upcoming Events’ section linking Next Steps Idaho programs in the dashboard.
Final Design: Interactive prototype
Final Design: Interactive prototype
Final Design: Interactive prototype
THE RESULTS?
THE RESULTS?
"It looks like canvas!"
"It looks like canvas!"
"It looks like canvas!"
To address the dashboard’s lack of cohesion, I tested ease of use, navigation, and satisfaction. Time-to-comprehension dropped from 20 to 9.8 seconds, and one user compared the redesign to Canvas—a compliment I’ll gladly take.
To address the dashboard’s lack of cohesion, I tested ease of use, navigation, and satisfaction. Time-to-comprehension dropped from 20 to 9.8 seconds, and one user compared the redesign to Canvas—a compliment I’ll gladly take.
DESIGN TAKEAWAY
DESIGN TAKEAWAY
Designing for human needs is holistic
Designing for human needs is holistic
Designing for human needs is holistic
Understanding our users in a more well thought out which reflected in our dashboards because we understood their needs and the context in which they used the dashboard.
Understanding our users in a more well thought out which reflected in our dashboards because we understood their needs and the context in which they used the dashboard.
Final Design: Based on user and stakeholder feedback, in the final iterations, I incorporated a bolder color palette to distinguish states of completion, emphasized iconography, and categorization for a more intuitive interface.
Navigational tabs
Reorganized sections and grades into tabs, streamlining navigation and improving content accessibility.
states of completion
By using icons and color, students could easily tell what was urgent, what was done, and what to focus on next.
Interactive Side bar
The separation of grades and lessons make it unclear to users that these elements were intended to be related.
Upcoming events
To boost visibility, I created an ‘Upcoming Events’ section linking Next Steps Idaho programs in the dashboard.
Navigational tabs
Reorganized sections and grades into tabs, streamlining navigation and improving content accessibility.
states of completion
By using icons and color, students could easily tell what was urgent, what was done, and what to focus on next.
Interactive Side bar
The separation of grades and lessons make it unclear to users that these elements were intended to be related.
Upcoming events
To boost visibility, I created an ‘Upcoming Events’ section linking Next Steps Idaho programs in the dashboard.
