The World Economic
Forum
Senior JavaScript developer heavily involved in delivering a React‑based rebuild of the World Economic Forum online platforms, including the introduction of new Topics and My Forum user features.
In Detail
The World Economic Forum maintains a suite of online websites, platforms, tools, and other hypermedia, many of which were developed and published in isolation, and most of which were, at the time, more than eight years old.
This mixture of digital properties, technologies, and generations meant that maintenance and enhancement across the board had become progressively more difficult. In the past year, a new project had arisen to unify these disparate pieces. The goal was a new, React‑based technological foundation on top of which new features could be developed, and, in time, old features could be redeveloped.
I joined the project as part of a small team of developers continuing the development of this foundation layer, using Chakra UI alongside Styled Components. The use of Chakra allowed us to produce new features quickly and with minimal nitty‑gritty type styling; however, it also proved a hindrance in achieving the really polished finish our designers pushed for. This meant we spent a decent amount of time improving and refining the base theming, and negotiating with the design team to bring some aspects into a more standardised and structured state.
One of the primary focuses during my tenure was finding ways to unify the look and feel of the different sections of the platform. Bringing the overall shared website anatomy together was a logical starting point; we redesigned and developed a new, shared header, footer, navigation, and user menus, intended to be drop‑in replacements for the existing (differing) implementations.
We also developed a new featured section of the platform specifically for Topics of discussion within the Forum. As an example, this is the Artificial Intelligence and Robotics topic page. We also developed and released a new user feature called My Forum, which allows users of the Forum to customise the content they see within their user account by following specific topics of personal interest.
Upon release, we received amazing feedback both from inside the Forum and from users and members. The work we undertook has been seen as a real step‑change in terms of quality and direction.
Standardising Font and UI Elements
A key part of unifying the various different online properties of The Forum was to standardise the look and feel. This was achieved by rolling out a new web font across the platform and building a new library of reusable components, which are slowly being adopted by each team.
A New Header and Site‑Wide Navigation
In reviewing the existing platform, a key problem that arose was that users struggled to navigate. Each disparate section had its own header, footer, and navigation, which meant that key items of navigation ‑ and in some cases, even the logo ‑ changed as a user traversed the site.
With input from the various stakeholders, our team designed and developed an all‑new header and navigation to be used across the platform. This ensured that each area of the platform receives standardised, even footings within the navigation, making it easier for users to access each area and travel between them. It also offers the opportunity to promote the new Topics pages.
... And a New User Menu Too
Previously, the User Account had been hidden on a stand‑alone page accessed via an icon, which meant that even basic account functionality, like logging out, was hidden behind an additional step and page load. Rebuilding the site‑wide navigation gave us the opportunity to introduce a new user menu within the header and expose some of the key pieces of user functionality. This also gave us a nice additional space to upsell the virtues of upgraded Forum membership.
Topic Pages
Topic pages themselves are made up of a combination of specific, editorialised content alongside specific tools and content drawn in from elsewhere on the platform. This meant that each Topic page could vary significantly due to the sheer amount and types of content available for that specific topic.
This necessitated careful development of flexible, reusable, and ‑ of course ‑ responsive layout components to allow users quick and easy access to the data most relevant to them.
Hero Image Treatment for Topic Pages
Each Topic page features a large, impactful image to feature as a hero. This image poses a classic development conundrum: itself content‑managed, whilst also having content‑managed elements laid over the top of it.
Our solution provides content creators with finite control over the image alignment across different screen sizes. It also employs several subtle gradient overlays to ensure that the clarity between the image and overlaid content is not lost, regardless of the image used.
My Forum
Tied in with the new User and Topics functionality we had already introduced, My Forum is a personalised feed where users are able to follow topics of interest. New and promoted content from each topic is then displayed within the user's My Forum page, offering a much quicker way to access new articles and information as it is published on the Forum.
