Final Prototype: http://ontrack.webflow.io/
Tools Used: Webflow, Omnigraffle, sketchbook
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:
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.
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.
I immediately started sketching and wireframing all of the platforms. Below is an example of an annotated wireframe that I presented to the team.
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:
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!"