Bumble Tech
Published in

Bumble Tech

From zero to Cosmos — Part #2

Second part: here come the dragons, and where the “grand plan” takes place

The “Re-Think” project

But let’s start with the initial moment of crisis, the “dragons” in the hero’s journey.

Some of the design explorations done for the “Re-Think” project.
The application before (left) and after (right) the “re-thinking”.
Some further design iterations that saw the light in the weeks after the launch of the “re-think” version.
The UI inventory created for the re-design of the application.
The style guide was afflicted by disappearing input controls, collapsed layouts, missing icons, exploding bubbles, ghost labels, and much more.
You can clearly see (right) the flat line in the number of tests, after the rethink project started.

Not everything is lost

But luckily, at least for me, not everything was lost. It was at this point in the story that I had two key moments of insight.

“A complex system that works is invariably found to have evolved from a simple system that worked. A complex system designed from scratch never works and cannot be patched up to make it work. You have to start over with a working simple system.”

That’s how evolution works, and that’s how life evolved from molecules and bacteria, to plants and animals (thanks Alla for reminding me).

Systems in general work poorly or not at all, or in other words failure to function as expected is an intrinsic feature of the systems.

All at once, I realised I was looking at the whole thing from the wrong point of view.

A style guide built together with the designers, to serve as visual reference for the developers.

The idea was to build a design system for all our mobile applications (Mobile Web, iOS, Android, and Windows Phone at that time). We decided to leave out the desktop version, because the overlap between the UIs for the two contexts was minimal for us. This was our first, important decision.

Maybe, after all, it was not such a crazy decision :)
Notice in the lower right corner: “Styleguide/VTY fix it for rethink” :(
Absolutely everything is crammed into this schema!
import {
PageBlock,
Card,
Text
} from 'seek-style-guide/react'

<PageBlock>
<Card>
<Text heading>Hello CSSConf EU!</Text>
</Card>
</PageBlock>
Space conquerors monument / Cosmonautics Museum in Moscow (Wikipedia)

Cosmos — from Latinized form of Greek cosmos “order, good order, orderly arrangement”; a complex orderly self-inclusive system, an orderly harmonious systematic universe.

Perfect! And we had also an emoji — this one: 🚀 — for free! :)

--

--

We’re the tech team behind social networking apps Bumble and Badoo. Our products help millions of people build meaningful connections around the world.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cristiano Rastelli

Design System Lead at HashiCorp. In love with Atomic Design, Design Systems & CSS architecture. Attendee/speaker/organiser of tech conferences and meetups.