CLOSE ✕
Get in Touch
Thank you for your interest! Please fill out the form below if you would like to work together.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

OnTrack Student Platform

Final Prototype: http://ontrack.webflow.io/

Tools Used: Webflow, Omnigraffle, sketchbook

The Project

I was asked to redesign a web platform that allowed students to watch videos online about preparing for college, and be tracked and assessed by their school counselors. This meant that I needed to design separate, but interacting platforms for the following groups of people:

  • Students
  • Mentors
  • School Counselors
  • School Administrators

Below is a screenshot of what the platform looked like originally.  It immediately became clear to me that the visual design needed a “makeover”, but as I later assessed the UX of the site as well, I found many more things that could be improved there as well.

oldontrack.png
Original platform as designed by an outside engineering firm

Research and Competitive Analysis

I spent the first week exploring the platform as a user and trying to understand what the user flows were for each type of user (student, mentor, counselor, and school administrator). I was given access codes to all the platforms and told to explore them as if I were a user.

Concurrently, I explored web platforms that accomplished similar goals of making video content accessible on the web.

I looked for similarities in how they presented information, how they “gamified” the user flow, and what features they utilized that OnTrack did not have. 

I presented my findings at the end of the week, making recommendations for each individual feature I felt necessary to change and/or improve. Below is an example of 2 slides from that presentation.

Screen Shot 2016-04-07 at 5.41.32 PM.png
Presentation slides on research and competitive analysis on learning resource libraries

Wireframes

I immediately started sketching and wireframing all of the platforms. Below is an example of an annotated wireframe that I presented to the team.

Hi-res wireframe of the student homepage and profile

Live HTML prototypes made in Webflow

The developers were accustomed to receiving Photoshop mockups, but I wanted to make sure that the final product had all of the interactions and mobile functionality correct.

I decided to use Webflow, which creates responsive, clean and usable html and css, complete with all of the flows and interactions that I wanted to have. 

The intent here was to create a prototype that was visually correct and had interactions that simulated a working product. I then created another document full of specs and interaction clarifications for the developers to use as needed when they rebuilt the site.  Below is an example from that document:

specsexample.jpg
Specs and clarifications of the student homepage (part of a 46 page document)

Results

Here is a link to the final interactive prototype made in Webflow. After I delivered the prototype, along with a long document of specs like the page shown above, the project was handed over to external developers.

After contacting the company one year later, I received this message from their content director: 

"We've more than tripled our number of partnerships from last year to this year (5 to 17) and I would not be surprised if we're up to 30-40 partnerships with schools and after school organizations by next year. Your improving our site's look definitely helped with that!"

Recent Projects