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

The State of Edtech

Final product: https://www.edsurge.com/research/special-reports/state-of-edtech-2016

Tools used:  Adobe Illustrator (mockups), Github (discussion with development and issue management), Trello (project management with non-dev) 

The Challenge

Our task was to design a microsite for EdSurge's Research and Development department called "The State of Edtech". This website must have 3 tiers of navigation.  The first tier allows users to navigate between chapters (there are 4 of them), as well as to the main site, and to the about page. The second and third tiers only involve chapter 1.  They must allow users to navigate between “trends” (topics), and then also know which section of a particular trend they are currently reading, and how much longer the trend is in general.

Finding a Good Solution

First, we were prepped with the problem above and asked to brainstorm ways to solve the problem.  Each of us made drawings and notes about several ways we could possibly solve the problem.  Then, in one 4-hour long whiteboarding session including myself, the lead ux designer, and our head of product, we looked around the web for any websites that have solved similar problems.  In that process, we stumbled upon a lovely tool from Vox media called “cards”.  Here is a screenshot example of one of their card decks:

Inspiration for our navigation and layout: Vox.com's "Cards"

We found this site to be extremely compelling for several reasons:  It was easy to navigate, the content was easily digestible, and the side bar made it clear to readers to know exactly where they were in the reading, and how much left there was to read on a given topic.

Initial Wireframes

Agreeing that this general structure was worth trying out, we set off to design some wireframes for the microsite.  Here is a wireframe that I created:

The initial wireframes, showing both mobile and web navigation elements

The chapters, intro page, and about page are listed on the top nav, while each trend represents a card with several sections in each card.  These can be navigated to by clicking on the arrows or by using the side navigation.  On mobile, swiping right or left will navigate between trends, and using the top hamburger menu will navigate between chapters. 

Hi-Res Mockups

Once this general layout of the navigation was agreed upon, we set to make high-res versions, complete with full specs to hand off to the engineers.  Below is the first iteration of those designs, which we later tweaked and added full specs to:

The first version of the high-resolution mockup

In addition to the specs clarifying spacing and sizing of elements, a CSS style sheet was made available for the engineers to use. This helped them take the guesswork out of writing the style code.  

The finishing touch: A data visualization

While there were countless small items that needed to be designed, exported, then imported into the site, I’ll focus primarily on one, in which I was heavily involved.  On the introductory card is an interactive graph that shows which trends are important to certain types of people (teachers, administrators, edtech entrepreneurs, etc). Initially, this was represented as a bubble chart with varying toggles, shown below:

The original infographic represented as a bubble chart
I immediately saw several things about this chart that could be confusing to users.

Several aspects of this design interfered with the clarity of the information. I argued the following:

  1. Using bubbles as a unit of measurement makes it difficult for users to compare data.
  2. It is very unclear why a slider is used in the graphic, but the interaction implies that it should be a toggle.
  3. The theme here appears to be planets in space, and using that metaphor completely distracts users from the main idea.

Emphasizing these 3 points, I recommended changing to a bar chart, and illustrating the toggle as buttons rather than toggles.  After a few iterations of sketches and wireframes, here is the final mockup that I proposed, and what was eventually implemented on the site. As you can see, the graph changes slightly on mobile, as the labels move below the bars in order to improve clarity and visibility of the chart.

openinggraph.001.jpeg
The final interactive infographic mockup (shown with redlines), optimized for both web and mobile

Conclusions:

The final product greatly improved clarity and readability of the information and was well-liked by the client.

Recent Projects