Gapminder

In late 2019, we got a call from our friends at Antrop who invited us to be their tech partner for a digital design project with the renowned and admired Gapminder Foundation. It was a big ‘yes please!’ from the team when presented with the opportunity to work with Antrop again.

“Our team is always keen to jump into projects that foster social responsibility. Gapminder’s important mission was so exciting, everyone put their hand up to be on the team” - Erik Lindgren, Tech Lead

The Gapminder team have published several books and they had a basic knowledge test and certification tool on their website. But they needed to develop a new way to erase ignorance on a larger, truly global scale: a tool that could be used by curious individuals and classroom children alike. A new ‘test your knowledge’ app that would be an evolution on their current certificate test.

Exactly how it would work and be used, was to be determined as the team iterated the design and build.

From vision to concept to product

Antrop invited Tech Lead Erik Lindgren to be part of the concept development phase. During these months, the Gapminder and Antrop teams transformed a broad and lofty vision into a tangible digital product. User stories and accompanying features were filtered through and refined by Erik’s technical input. Creativity wasn’t limited but rather cultivated with tech perspectives and possibilities.

“When the vision is so ambitious and in development, it was invaluable to be able to understand how design decisions impacted technical execution” - Anna Rosling Rönnlund, Gapminder

How to be less wrong

There were a few fundamentals that had already been established. But they were accompanied by a long list of ideas and features that were totally unevaluated. This is the way we love to work, where a concept has the space to mature and change direction as needed.

The project started off with a brainstorming-heavy concept phase, laden with design studios and workshops. It was then split up into two work streams, both equipped with design and technology skill sets from Antrop and Prototyp. The first stream continued investigating and evaluating new ideas, like Company Certification features. As they were validated, these ideas would graduate to the backlog of the second stream. This more concrete stream worked to build out the tests - designing and developing the parts of the app that were already fleshed out. Still iterative, but less investigative.

Good listeners

Iterative development is about feedback. From users, the team, experts. It’s also about flexibility. Creating space for new and better ideas that pop up along the way. The Gapminder team were incredibly creative, generating new ideas all the time. Our role was to fuel these creative flames, to help them understand what could be done, and how to make it work well. This meant they didn’t need to come with answers or specifications, but rather interesting questions like, “What if a classroom of 30 was to use this?”

This worked well with Gapminder because their extensive experience with digital product development gave them the understanding that ideas can be instant, but implementation takes time and work.

“It was refreshing to not have developers just tell you 'that your ideas weren’t possible'.” – Anna Rosling Rönnlund, Gapminder

The first demo

The first prototype came just before Christmas. It was the first time the team could click and feel through the workflow. It wasn’t pretty. And lots of features hadn’t been built yet. And even though it wasn’t close to being finished, it was bug-free.

“It didn’t look very impressive yet. But it was impressively well-made” – Anna Rosling Rönnlund, Gapminder

The importance of a bugfree prototype is often forgotten. In this project, it gave the Gapminder team the peace of mind that, while not even close to finished, the build would be high quality. That it would actually follow the design direction. And it allowed the team to really assess where we were then and what wouldn’t work moving forward.

The first demo

The first version of the tool took shape with test categories and basic question-flows. A very basic product but more or less usable and complete end-to-end. From there, new iterations focused on answering design questions like, “how do you show progress?” - maybe with progress bars and stars that light up, or “how do you give users encouragement?” - maybe with animations and a mascot.

Subsequent iterations included both new development and reverting back to parts of the tool that had been developed to improve performance, functionality or user interaction.

Let's build a web app

Web technologies have come a long way, further than most realise. Partners often come to us with an idea envisioned as a native app. This expectation that seamless interactions can only be experienced in a native app has held web apps back.

The Native vs Web question was raised early on in design studios discussions. Erik and team were confident that the product’s goals were best achieved with a web app. No App Store gatekeepers, no device dependencies and no downloading, all enabled global adoption. Animations, haptic feedback and other nice to have user experience details that used to be limited to native apps were also becoming supported by more and more mobile browsers.

Fast frameworks

A digital product with global scale requires high performance and speed from the start. And Gapminder's reach is unlike that of most startups. They have a global reputation, so the product’s performance needed to be prepared for the large uptake that Gapminder could generate..

That led us to use Phoenix, an Elixir web-framework that makes developing web-apps more efficient. It offers a great environment to develop in. Its stricter code style makes it easier to code the ‘right’ way, faster.

We also used Jamstack to pre-render files and serve them directly from a CDN, removing the need to manage or run web servers. These static pages mean better performance when lots of requests are made.

App-like login

The central reason behind building a web-app was to minimise barriers to (recurring) use. A web app doesn’t require a user account to save learning progress through modules. Local storage saves a key to an anonymous account that can be later converted to a user-defined login, making their progress accessible across devices.

Gapminder Worldview Upgrader

Gapminder Worldview Upgrader is a fun educational tool created to help people rid themselves of systematic misconceptions about global development.

The Contentful CMS allows the Gapminder team to easily add new categories and tests and deploy them instantly. The tool can handle an unlimited number of tests, making it adaptable to multiple uses and able to help fight misconceptions on many fronts.

👉 Take a test yourself and see where your worldview needs updating.

“This will become our primary tool in fighting ignorance. We’re excited to keep iterating, whether that be to add more gamification or enable IRL event interaction." - Anna Rosling Rönnlund, Gapminder

Share the vision

Iterative product development requires a crystal clear vision. One that can be cherished by every team member. Once you have buy-in on the vision, you can build a mutual respect for the work. This helps sideline politics and frees up collaboration, making it easier to transform the vision into a tangible product.

Not for everyone

Not all developers like working without all the answers on the table from start. In fact, many agencies and production houses are uncomfortable with few boundaries, and that those that exist are constantly changing. The feeling that nothing you’ve done is ever finished can be very uncomfortable. Working this way can be incredibly effective, but requires an openness to undo, redo and delete hard-developed code. A humbleness that takes practice and a certain type of developer (which we fortunately have in abundance).