Image of desktop screens and design components of an education dashboard

Student Degree Dashboard

Information Architecture + UI Design
Tools I used: Figma
Timeframe: 1 week
Project Overview
The assignment: Redesign the interface of the Austin Community College Student Service page based on some common patterns of navigation. On this page students can access things like graduation date, degree progress and schedule planning. I re-imagined the structure of the page based on some frequent actions a student might take while using the site.
User Goals
I was given some pre-defined user goals for this project. The user is a current student enrolled in three courses, and registered for one course next semester. They want to see their past and present progress in their academic program, and to find out if they are on the right track to meet their desired graduation date. I set out to determine if the current navigation and site structure was supporting the user in meeting their goals.

The Before Pics

Here's the site as it was when I observed it. I found the original navigation solution to be a little convoluted. Frankly, there was just TOO much navigation. Side menus, drop downs, breadcrumbs that weren't breadcrumbs but were also drop downs, and a course scheduling solution that required multiple tabs to be open to see what courses you still needed to take and track your progress.  A lot of choices, not a lot of payoff, and a heavy burden on our user's cognitive load. I set out to simplify.
Images of a student planning page on a college website

Establishing a Flow

Because I was approaching this interface problem with a navigational solution, I wanted to go a bit deeper into the planning phase and work out how the user would move through a new system in order to get where they needed to go. My next step was establishing some task flows that reflected the users goals. I came up with a couple of them and debated the pros and cons of each.
A box and arrow diagram outlining new site choicesA box and arrow diagram outlining new site choices
I ultimately went with Task Flow 1. I felt this sort of structure was more supportive of our user's goals, as it presented more information on single pages, and gave shorter distances between clicks. I knew I wanted to use a dashboard type UI to implement this flow. Now, I just had to put pencil to paper.

Working It Out

I sketched through some solutions for my dashboard and a few more screens , including a current courses page and a progress tracking page. After working through some layouts and doing critique with classmates, I chose my best received designs to move on to the wireframing phase.
Sketches of a educational dashboard site

Final Wireframes

Finally, some wireframes. I worked through and polished up my designs. I wanted a friendly, approachable feeling to the dashboard and an interface that gave students more control over their view. To achieve this, I created wireframes that feature rounded edges, icons, cards and collapsible elements.
Labelled grayscale wireframe showing navigation patternsGrayscale wireframe of a desktop page of the student planning site
Grayscale wireframe of a desktop page of the student planning siteImage of a wireframe of the student dashboard

And Voila!

Some final designs! I created a type system, icons and a color palette and applied these to my wireframes. I wanted to keep ACC's current cool colors, but lighten and brighten it up a little bit.
Final designs, featuring color, of the student dashboard siteFinal designs, featuring color, of the student dashboard site
Final designs, featuring color, of the student dashboard siteFinal designs, featuring color, of the student dashboard site
Style guide for the dashboard site featuring font styling, color palette,  and icons
Takeaways
  • It was really interesting to tackle a design problem from a purely navigational standpoint. Obviously there's other things (a lot of other things) to consider when working on interfaces, but coming at it from this perspective really helped me establish the link between information architecture and interface design, where they intersect, and how they support each other.
  • While completing the task flows, I couldn't help but imagine the type of interface that would be needed to complete that task flow. It can be difficult to work from a purely informational standpoint, without a visual idea creeping in.
  • I feel like I really got my workflow down in Figma on this project. Creating the re-usable components and setting my spacing, font sizes and icon sized made fleshing out the final designs easy and fast. Something I'll definitely keep doing in the future.