Date: Summer 2020

Purpose: To add a dark theme to the app.

Users: Individual entrepreneurs, accountants, small and medium-sized businesses.

Why: For the most part for the PR effect and the general trend towards a dark theme in applications due to the update of iOS/Android systems.

My role: Lead the project designer.

Team: Agile. Working closely with a small team: product owner, IT and QA engineers, analyst and designer.

The result: The first business application with a dark theme among competitors.
Part 1
Best practices

  • Market participants themselves determined which shade of dark would be in the Dark theme.
  • Retail made an approach, but it was long (about six months) and more gray than Deep Dark.
Articles, tips, recommendations
  • We have studied everything that Apple and Google offer for their platforms.
  • We read articles on Medium about best practices
Part 2
Problem definition
At the time of launch … …
  • There was no clear design concept.
  • There were no rules for development and external teams.
  • There was no understanding where to start.
Problem #1: Shade
  • How many people – so many opinions.
  • Choosing the right palette for a dark theme turned out to be very difficult. Someone wanted pure black, someone liked the approach from Google and made Dark Gray.
In my head, the dark theme is total black as the heart of my ex
Maxim Chekmarev
Cluster of the Lead of the Sberbusiness mobile channel
One problem has been solved
  • And so, we have determined that we will have a dark theme like the black heart of our boss's ex!
  • The name of the style is Total Black.
Problem #2: Styles
  • Color styles do not have a clear link to the theme of the application.
  • Text styles do not include affiliation and color code.
Problem #3: Color pairs
  • The same color can have a different pair in a light and dark theme.
  • The style structure does not allow you to add a special prefix and produce entities.
Problem #4: Graphics
  • Lots of Legacy graphics.
  • Most of the PDF icons are version 1.3, but 1.7 is needed so that you can repaint the code.
  • Some of the icons are incorrectly assembled.
  • About 500 icons were converted:
    – from PNG to PDF
    – from the old PDF version to the new 1.7
    The main problems arose on the iOS platform
Part 3
Design process
Arbitrary color pairs
  • @DynamicColorPair (Light: Colors.Graphite01, Dark: Colors.Asphalt05)
  • <color name="graphite_01_asphalt_05"> @color/graphite_01</color>
Figma Component Library
  • Pairs and application examples have been created for all master components.
  • Added suffix _LM, _DM for quick switching via Instance.

Total components: 864
Of these, iOS/Android 432
Unique about 210
Light and dark theme: 105 components each
Preparing layouts
  • Each unique layout is prepared not only for two platforms, but also in a light and dark theme.
  • This minimizes the number of errors in the preparation process and allows QA specialists and developers to quickly navigate.
  • The whole Lottie animation has been adapted for the dark theme – additional "pairs" and conditions have been created.
Part 4
Testing and analysis
The problem with the red color :-(
  • The color palette of red shades represented a limited set. We used Primary color Ruby02 and it "burned out" on a dark theme. Other shades also did not fit. It was already too late to add a special shade of red for a dark theme at the first stage:(
Transformation of the Bottom Sheet component
  • Unexpected complexity for development was associated with the behavior of the Bottom Sheet, which is stretched into a separate page and must apply the rules of the page color pairs.
Part 5
And if we repeat it?
  • Otherwise, structure the style library in Figma - Colors & Fonts.
  • Based on this, it is possible to assemble components and create an Instance structure.
  • Prepare icons right away competently without unnecessary "garbage". Follow the white color.