Tools used: Adobe Illustrator (mockups), Github (discussion with development and issue management), Trello (project management with non-dev)
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.
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:
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.
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 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.
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:
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.
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:
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:
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.
The final product greatly improved clarity and readability of the information and was well-liked by the client.