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
Research
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.
Animation
  • 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
Summary
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.