RIPE Labs

Project along with @Renata Vásquez and @Raimundo Rufín

About the client: RIPE NCC

RIPE Labs is a blog for network operators, developers, researchers and industry experts. It’s a platform where they can share and discuss innovative Internet-related ideas that support the RIPE community, usually pretty technical stuff.  RIPE NCC staff as well as the audience this platform is intended for, author articles on the platform. Anyone can read and contribute to RIPE Labs. Registration is free and open to anyone.  RIPE Labs has been providing the Internet community with articles since 2009; everyone is invited to submit ideas, and the editor, evaluates what can be shared on the platform.

Brief

To create an online journal that transforms the RIPE Labs blog into a community hub. This is a community-driven brand building opportunity for the RIPE NCC and an opportunity for us to connect with new audiences. This platform will connect people and encourage collaboration.

Problem statement

Solution statement

User description

Value Creators

Branding

RIPE Labs is the experimental partner of the RIPE NCC, the fun one. The one who sees a puzzle in an obstacle and uses its collaborative nature to defy challenges. Powered by information sharing, innovative thinking and a fearlessness to push boundaries without being reckless. RIPE Labs is brave, inclusive and resourceful.

The RIPE Labs symbol comes from one of the hexagons that are part of RIPE NCC. This hexagon is also embracing a smaller hexagon that represents the community of RIPE Labs.

We are here to bring together Internet experts. We are curators of expert content who value innovation. We’re rethinking Internet technology for tomorrow’s inclusive, open, sustainable Internet.

Platform Redesign

Landing Page and Navigation

One of the more noticeable changes in RIPE Labs is the display of an article as a Hero banner at the very top of the landing page. To be selected as Featured Article of the Week is an achivement and honor in the RIPE Labs community. In every article card we can see the author of the article, to start adding faces into a very technical community.

We can navigate the main categories or access the "All Categories" page. This is also accessible from the footer.

Articles, Podcasts, Videos and Polls can be found at the main page.

Create a new article

In order to make the process of creating an article less exhausting, we divided it into 3 steps:

Basic information where we must specify the title, image and description (information you will find later in the article cards). The tags are no longer suggested by the author, but by the editor of RIPE Labs, to avoid endless tags accumulating in the site.
It was a requirement that the platform worked with Tailwind, since it was the library used by the whole company. That's why we designed a "floating blocks action menu", where we can choose the type of content we want to add (call Tailwind's boxes), and order them however needed. The blocks available include Header, Paragraph, Quote, File, Image, Embedded Link, Survey and Media content (podcast and video).
After writing our article through the blocks, we can add other contributors, specify the language and location of the article, if there is another article that relates to this one (to help moderators choose tags and prepare editions); and of course, declaring intelectual property.
When clicking submit, a dialog appears notifying us that the article isn't automatically published, that it must go though editor's review, and that we can check the progress and suggestions. We will be notified when it is approved and published.

Article editing

The editor's review functionality works very similar as Google Docs' comments and suggestions. The functionality works cross-platform in order to get notified and make changes on the go. When all changes are approved by the editor, the article is published.

Profile Display

In order to give more sense of community, it was important to give more visibilitiy to authors, a face to each article and contributor of RIPE Labs.

When you visit a profile, you can read more about the person, linked social media, see their articles, achievements, tags or topics in which they may be a top contributor, comments and likes.

Media content

Apart form the articles, we can find a section of podcasts and video content.

These work very similar to articles. You can have individual stories or series episodes. While you are listening, you can exit the podcast page thanks to the Player floating controls. All podcasts include full transcripts.

Design System

RIPE Labs entire Design System was built dedicated for this project.

All cards and elements are responsive, meant to work from small mobile devices 320 px (iPhone 5, SE 320px / Fluid container 24px margin on the sides) to 4K extra-wide monitors (4k - 3840px / Container 2910px (Scale 970px Container x3).

Launch at RIPE 81 Conference

RIPE Labs was launched at the RIPE81 Conference in 2020, in which Alun Davies, new RIPE Labs editor, walks us through the changes and improvements on the platform, towards a community-based site.

User Feedback and iteration

User testing

In order to test the platform before development, a prototype on Maze with screens and certain tasks to perform. This prototype was sent to all RIPE NCC community, as well as some users from the previous RIPE Labs site; ranging from active members to occational visitors.

Thanks to the comments and feedback from the prototype insights provided by Maze, and the answers recieved after asking specifically "Was there any section in which you felt lost or didn't like? Specify why" we were able to iterate again, until mostly positive comments about functionality were achieved.

Comments from User Feedback

RIPE Labs has already been developed.

You can visit and join the community on labs.ripe.net