Internet.org by Facebook
The ask
Create a set of templates that provide usable options for internet.org a Facebook organization. One of the biggest challenges was appreciation and empathy for users in India that may not have the same internet experience.
Content creation & templates
For internet.org creating more template options for news articles and the various categories was important. The system was in need of being updated to meet the every demanding and changing needs for Facebook’s philanthropic arm.
Long form content wireframe
We were asked to create more full screen article posts, they should consider various formats of content, such as, videos, images, no images, thinking of every scenario would provide them with a set of options. Some small differences were where the title should appear, if the image should and could (technically) be full bleed. The answers would fall in how the page would render across different regions of the world.
Presenting wireframe options
Option 1: title below hero
Our options needed to account for different media, we explored details such as where the title should appear, what would be best for users across the globe.
Features
Full bleed image with video, persistent navigation, a clear fold that visualizes and communicates that more information is below, and inline photo options within the content. Long form articles would also need a “read more” as the content could be long form verses short form.
Option 2: title above hero
We also explored placing the title above the video, it was critical that we communicate the worse case scenario, how would a long title look above a video, was it clear that one should scroll, as this had been a friction point.
Article details & features
Features
In this option there was also a persistent nav, text that appears above the fold for clear indication of scrolling behavior, in line imagery and infographics.
Exhausting all options
We explored intricate levels of detail that would allow Facebook to use various templates depending on if they want the nav full bleed, solid background, and also explored title placements, should it be above or below the hero video. These we referred to as “Navigation led, Full bleed, and Title led”.
The presentation to Facebook
We presented our options to the team at Facebook. We discussed the possibilities the pros, the cons, the levels of effort it would take their development team to implement such solutions. As a team we weighed the options and decided to explore Option 1 - Title Led.
The mockups
Internet.org has since implemented the template and this new solution now allowed the team to create more in depth posts, these options were not available at the time and the team needed more flexibility. The demos were created in Sketch and Keynote in order to demonstrate the fold, scroll and appearance of elements.