Bumble Tech
Published in

Bumble Tech

From zero to Cosmos — Part #1

First part: where everything started, and where I reaped the fruits of my labour

Illustration from the book “The User‘s Journey“ by Donna Lichaw

Under the radar

You could spot all the “classic” architectural errors: global declaration in the root scope of CSS, no modularisation or identification of “patterns”, a lot of repetitions and code duplications.
A collage of how the UI elements and web components were displayed in the Mobile Web style guide, in its early days.

It gets noticed

  • the fact that both the designers and the developers were relying too much on copy&paste when developing the UI
  • the absence of modularisation was leading to code duplication and the impossibility of reusing the code
  • there were too many small differences and inconsistencies in the UI
  • there was a problem of obsolescence in the Sketch files used by the designers, and they did not have a holistic view when designing or redesigning the product features.
  • better consistency across applications/platforms and a more cohesive experience for the users
  • improved velocity in designing/developing new features and shorter time to market
  • systemic design approach and more control over what gets implemented (and how) in the UI
  • a simplified, more efficient (and less error-prone) process for both the designers and the developers
To show what the benefits of a Design System are (and to appeal to the designers’ needs) I created some mock user profiles :)

--

--

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.