GrantMe - EdTech

Tripling engagement with a dashboard redesign

Impact

+20% page usage

Role

Full Time Product Designer

Team

Product Manager, Engineering, Student Success Team (Account Management Team)

The problem with delivering minimal value

Our dashboard, the home page and most visited page on our web-app had a very low engagement rate. As the page that's supposed to drive action to other parts of our product, we felt this to be very concerning - so we dug deeper.

The process

Verifying the problem

Looking into user heatmap data and other quantitative and qualitative research, we verified that this was a problem.


9%

Most users that visited the dashboard did not interact with it

#1

The dashboard was the most viewed page on our platform


Only 9% of students (users) that visited the dashboard clicked on it. The dashboard guides students to achieving their goals with our product, it's role includes driving attention to things that need action, such as upcoming deadlines.

A low engagement rate means our students are missing out on key actions, and we are failing to deliver value.

Uncovering student needs to identify gaps

University preparation is a huge deal to students. We knew this, but we were missing how this translated into their dashboard. I designed surveys, ran interviews, and analyzing recordings, to understand their thoughts.

Aligning with devs on business requirements

We had limited developer resources so I worked with the Engineering manager and developer team to prioritize which user flows to build for.

Important items for students

  • Scholarship & school deadlines
  • Time-sensitive opportunities, such as upcoming appointments or live workshops
  • Updates on work in progress, such as essay feedback

Poor hierarchy resulted in minimal value

The current dashboard hid important items from our students, resulting in key opportunities being missed.

Insights

  • Crucial items were located under the fold of a typical desktop laptop, the most common device for our users
  • Low relevance information at the top of the page, especially for returning users
  • Important items such as upcoming appointments or tasks were missing completely

Measuring success

How might we help students take action on their next best course of action?


Dashboards are typically a place with lots of information. We wanted success to include higher engagement but also ensure our students weren't getting overwhelmed.

Goal metrics

  • Increase click-through on the dashboard
  • Time on page does not increase significantly

Ideating with subject-matter experts

Students don't know how to achieve their goal, but they look to our SAM team (an internal team of Education Consultants) to guide them. So I initiated ideation and design review sessions with this team, along with online research, to understand what I need to bring to the dashboard.

Insights

  • Students have 3 general areas to work on
  • Students need help prioritizing what to do next
  • Overcrowding a dashboard can lead to feeling overwhelmed

Testing and iterations

I iterated on mid-fi wireframes to help determine what general elements to have on the dashboard, then moved to hi-fi when I needed more detailed testing insights from non-product team members and users.

Key insights

  • Hierarchy in terms of size on screen greatly influenced how important something was perceived to be.
  • Information can be grouped differently, to help users digest information in a more natural way.

Key components of the final design

The final product was pushed live to 2000+ students.

Bringing focus to important items

Key design outcomes

  • Brought urgent items above the fold for a typical student laptop height.
  • Made less urgent items smaller, giving more space for higher priority, dynamic, information.
  • Removed items that weren't expected to be on the dashboard.

Elevating high priority items

Key design outcomes

  • Hierarchy - elevate the user's highest priority items (tasks, funding applications, and school applications) by displaying them near the top of the screen.
  • Minimal and exhuastive - other items of interest are located lower on the screen to not distract and to convey that these 3 items (tasks, funding, and school) are highest importance.
  • Progressive disclosure - from user feedback, I learned the numbers for each coloured block was unclear. I added hover tooltips so users can clarify without overloading the block for returning users that already know.

Grouping information naturally

Key design outcomes

  • Since application deadlines are a major factor in helping users prioritize next steps, I added a large upcoming deadlines list.
  • Users only cared about specific school or funding information when a deadline was coming up. So, I consolidated school and funding deadlines in one block, instead of in separate blocks, sorted by closest deadlines.
  • To make next steps for each application deadline clear, I added a status column with status messages and links on what would be next steps for that application (Ex: Submit Writing, Review Edits, etc).

Impact

+20%

Click-through rate

-3 seconds

Time on page

With click-through rate increasing and time on page remaining roughly the same, we concluded that we made the page more valuable while avoiding extra complexity - a success🎉!

Reflection: Page loading time

A unique challenge about this design was the page loading time. The dashboard had significantly more items to load, since we were displaying a variety of different information. Working early with developers helped me be aware of this idea early on the design process. By being aware of this, I was able to think of work-arounds, and prioritize certain features.



Reflection: Working with developers

With a low developer budget, I collaborated closely with developers to determine project scope and prioritize essential features. Consistent and early communication with developers helped me avoid redundant work, while remaining focused on a feature's core purpose, risk analysis, and staying flexible helped me prioritize features quickly.



← Back to Case Studies