Un Global Compact

New York, US · 2020

Elm frontend for United Nations Global Compact's Communication of Progress application prototype. We're talking about state-of-the-art frontend development with Elm. Solid application architecture, functional programming, and a state management system that inspired all modern frontend development with JavaScript.

01CONTEXT

The UN Global Compact requires participating companies to produce an annual CoP that details their work to embed the Ten Principles into their strategies and operations, as well as efforts to support societal priorities.

The CoP is a visible expression of your commitment to sustainability and your stakeholders can view it on your company's profile page. Companies that fail to report or to meet the criteria over time may be removed from the initiative.

02ambition

The UNGC is currently reviewing its Communication of Progress (CoP) tool and plans to launch the new CoP experience in 2021. The main objectives include future-fitting the CoP's current functionality, enhancing them to further strengthen corporate transparency and accountability, and have better progress tracking in order to inspire leadership, foster goal-setting, and provide strong learning opportunities around the Ten Principles and the SDGs.

03Challenge

We're on uncharted ground. Creative problem solving was paramount for the success of the project.

The role of the prototype is to help us explore all possibilities while better understanding the pain points of its user base.

The requirements are derived from the organization's desire to improve its current processes and accelerate its digitalization. We have a free hand in regards to what it takes to achieve the goal.

This will require us to innovate and come forth with our best bets in terms of user interface and user experience and, later, bring in the stakeholders to interact with the prototype, test our hypotheses, and collect relevant feedback to move forward.

Our goal is to create a high-definition MVP that will be used to drive all future data-first digital transformations in this area of the organization.

04Experience

Seamless product development empowered by well-proportioned work sprints and a powerful technology stack.

05Design

The design approach promoted by ScreenFrontier is focused on the aesthetic of simplicity and usability.

We want to avoid creating an extra cognitive load for the user, therefore, all available interactions should follow the path of least resistance. The result puts out an easy-to-navigate, intuitive, clean interface that allows the user to focus on what matters most: working the data.

The UNGC design style guideline was employed, complementarily, along with an additional color palette specially created to support accessibility.

06technology

The entire technology stack, back to front, takes on a pure, functional approach to programming.

A functional approach provides hassle-free development cycles by minimizing runtime errors, enabling fast and reliable code refactoring, providing friendly error messages, and increasing developer productivity.

07Front-end

The frontend is built with Elm, a fully functional "batteries-included" frontend language inspired by Haskell. Elm comes with embedded application architecture and a strictly regulated library ecosystem.

View functions are all happy building blocks that compose well from small, focused functional components to extended scenarios and then entire pages in accordance with the atomic design approach for highly maintainable frontends. This approach gives more flexibility to quickly test different user scenarios while keeping the costs in check.

08Back-end

The backend is built on top of Ruby on Rails, enhanced with the dry-rb collection of Ruby gems, to enable clear, flexible, and more maintainable Ruby code.

The backend application, created by our friends at AgileFreaks, serves both a REST API that strictly adheres to the json:api specification, as well as a GraphQL interactive interface.

09mobile

While the application is mainly used on desktop machines, the application is fully functional on a myriad of mobile devices as well.