In June 2016, I was contracted by The Bassiouni Group (TBG) in New York to design and manage the launch of the online version of an evidence gapmap (EGM) for UNICEF Innocenti, which is the research arm of United Nations Children’s Fund (UNICEF). EGMs are designed to be a snapshot in time of rigorous literature on a specific topic, in this case adolescent wellbeing.
I started out by gathering technical requirements from UNICEF Innocenti, conducting interviews to generate ideas for the EGM, and scouring the web for existing examples of EGMs.
Examples of Other EGMs
The next step I took was to speak with key stakeholders to generate ideas on the best interface design.
Highlights of Generative User Interviews
- Design for researchers, adolescent experts and policy writers with varying Internet connection speeds.
- Include as robust as possible search bar – custom Google search + crawlable site good option given budget.
- Front-end documentation and on-boarding useful for field-based experts to understand methodology.
- Backend either needs to be robust for Innocenti to update or work with PlaNet to do direct editing.
- Mobile might be useful for those in the field. Best to include because site is responsive and having mobile designs is the standard UNICEF is pushing overall.
- Need more input and testing on filters to include.
Once I synthesized the background research, I created an initial wireframe to capture the major features and basic layout:
- Comparing absence/presence of literature is important. So is visualizing the proportional amount of literature! Use bars instead of bubbles to make the latter clearer.
- Include key filters at the top.
- Use modal pop-ups to allow user to see list of studies that fall into a cell.
As my colleagues continued on defining the studies that would eventually populate the EGM, I went back to my group of test users and asked them to define what filters should appear on the online version, as well as what the default settings should be. Since UNICEF staff are stationed around the world, I used Excel to recreate the look and feel of the wireframe to make it easy to participate offline and without downloading any new software. To the right/below is a sample result.
A synthesis of the results produced the following filters. Note these are not the default settings.
The software development company, PlaNet, then produced a coded prototype, which went through a final round of user testing. The final EGM is available online here.
