This is it! The first iteration of our new brand identity iteration is out on iOS & Android 🎉.

If you already used the app, before the rebranding, you may notice that changes are very light.

Behind these logo, colors & typography changes, many automation & standardizations make updating or maintaining our brand identity easy. This work represents more than three months of tremendous efforts by different teams: brand, design system, mobile engineering, and product design.

Let’s have a global overview of the work done!

Where do we start?

Since 2019, the Back Market app has received 4 brand iterations:

1. The initial Back Market brand from the MVP in 2018,
2. Our significant rebranding in 2019 with the creation of our Design System, “Revolve”
3. A second iteration in 2020–2021,
4. And finally, a new brand identity in 2023!

Even if we’ve collaborated since day 1 with designers on Figma, using a dedicated UI module in our iOS & Android architecture to isolate the app design, we still struggled to guarantee a single source of truth for our brand. The same issues exist on the Frontend side too.

To solve this, the source of truth starts with design tokens.

Step 1 — Rethinking our design tokens foundations

If you are not familiar with the definition of a design token, here is a definition by Google:

“Design tokens represent the small, repeated design decisions that make up a design system’s visual style. Tokens replace static values, such as hex codes for color, with self-explanatory names.” — Google Material Design Definition

We have been using design tokens for many years, but they were constantly evolving & being manually updated in the codebase or Figma files. Consequently, we had different and incorrect namings from design to engineering on the different platforms.

It was a headache to guarantee the right level of UI coherence for our users:

1. Our end-users, for whom incorrect values, regressions, or non-optimized tokens could break the experience & the interaction with our brand.
2. Our “internal” users (Frontend and Mobile Engineers and Product Designers) have been our primary users since the beginning. The design system aims at streamlining their work and increasing their productivity and output reliability.

The new brand identity project, started in 2022, was the right moment to stop running in many directions and start rethinking the source of truth of our design tokens.

After the Brand team’s and our Studio’s initial work on the new brand foundations, our Product Designers from the Design System team started to define the new raw tokens.

Design tokens are atomic (the smallest possible element) foundations of a design system. They usually pair a name with a value that is distributed across all contexts of the design system. Design tokens can structure things like colors, spacing, typography, radius, etc.

In Revolve, two types of color tokens exist:

• Raw tokens: the colors without any contextual information
• Semantic tokens: based on the raw colors, these tokens allow users to choose the right color for the right job

1.1 Defining the raw tokens

Raw tokens store a Hex value with a name that is context-agnostic, following this convention:NAME.INDEX

For example, purple.55 stores the #A366E8 value. The index corresponds to the luminance/tone value and is useful for a quick accessibility check, following these rules:

• Two colors should have at least 70 between their indexes to pass WCAG AAA (7:1)
• For WCAG AA (4.5:1), a 50 index gap is enough
• For non-text contrast (3:1), make sure colors have at least 30 between their indexes

Related example: grey.5 for text is accessible with grey.55 backgrounds and up.

1.2 Defining the semantic tokens

After this work on raw tokens, the design system team moved forward with the semantic tokens, like colors and typography.

Semantic tokens carry contextual value. In other words, they help users with their usage. The naming convention is as follows: MOOD.ELEMENT.CONTEXT.FUNCTION.LEVEL.STATE

• Mood: The color context (or family). It is somewhere between a theme (not a theme because it can be applied to single UI elements) and a context.
• Element: The type of UI element the token has been designed for (bg, text, border…)
• Context: The structural purpose of the color is supposed to convey when applied to a UI element. (action, static, float, surface…)
• Function: The visual feedback the color is attached with (default, danger, info, warning…)
• Level: A hierarchy suffix related to whatever precedes it in the name. In practice, this means an action.default.hi is more important (and should have more prominent colors) than an action.default.low. (max, hi, mid, low…)
• State: A suffix that allows certain tokens to have variants depending on the element’s state (or the element’s parent container) they are applied to. (hover, base, active, focus, pressed…)

For example, main.border.action.default.low.pressed will be used on borders for secondary actionable elements in a pressed (selected) state. The value of this token is grey.10. It's currently used in Picker, for instance.

1.3 Introducing the concept of the moods

On top of that, we introduced the concept of “moods”:

“Moods at Back Market are subpage themes used to adapt the appearance of sections or components to our brand color schemes. They enable our brand’s presence while respecting accessibility and consistency.” — Design System team, Back Market.

Moods were imagined to answer a legacy problem: the recurring presence of contrasting sections in Back Market products using a different color scheme from the default one (dominant white/light greys).

These sections were mostly dark (which created, on the technical side, an unhealthy mix of light and dark themes) but also sometimes colored. We also knew that with intense upcoming brand colors, we would need a system to use them properly.

One of the upsides of our new semantic token system is that usage of a given color is extremely specific. A token gives precise information on context, function, and state. This dramatically improves consistency–at the expense of freedom in picking colors.

As a result, we are now safe from color variations overlapping each other, as in the past, two different tokens could represent the same hex value. For example, we could have links in different sections of a screen. Links are action text with the default function, so without moods, they would technically bear the same color token: text.action.default.hi.

Applying the same token to both sections would make them look the same, because tokens are indivisible elements and can only have one value. We had to introduce a color parameter before the context to solve that issue and allow for such composition. That’s how moods are born.

1.4 Get in the mood

All of our tokens exist in every mood. To switch a section to a certain mood, simply look for the same tokens with the right mood suffix.

After providing design tokens in Figma, the Design System team used the Themer plugin to provide the right tool for product designers to interact & updating their screens:

In practice, we defined more than 2500 token variations in our design system for the light mode alone!

Who wants to deal with 2.5K tokens and update them manually? How can we guarantee that those design system tokens can remain the same between all platforms and codebases?

Well, let’s do some automation!

Step 2 — Automagically generate design tokens code for iOS, Android & Vue 3

In 2022, at the company level, we introduced a strong OKR called Autopilot.

“Get Backmakers’ focus on where they have the most added value, to improve people efficiency & impact and foster people happiness at work” — Objective of the Autopilot OKR, Back Market.

The new definition of Design tokens was a perfect use case for automation. Also, providing tools & a source of truth for our designers & engineers is one of the core foundations of our mission as the design system squad.

Therefore, generating design token libraries for iOS, Android, and Vue 3 was a priority if we wanted to scale the usage & maintenance of tokens.

That way, engineers AND designers can use updated tokens right away. That’s the power of automagically generated tokens.

2.1 How does it work?

In practice:

1. Design System Product Designers export the design tokens definition from Figma to a JSON file.
2. A script transforms the source of truth (a JSON file) to design token libraries in Swift, XML, and JavaScript.

iOS, Android, and Frontend engineers now have a new Swift Package, GitHub Package Registry, and NPM package.

2.2 What does the code look like?

We are exporting the different properties of Typography and Color tokens. It can be font size, line spacing, font family (font files) depending on the language, hex values, color variation by mood, etc.

Let’s focus on Swift code with some examples.

For a font token, here is what the code generated looks like:

public extension FontStyle {
  private static let body1Default = FontStyle(
    family: FontFamily.bmDupletTxt,
    size: 16,
    weight: Weight.w400,
    textStyle: TextStyle.normal,
    decorationStyle: .none,
    lineHeight: 24,
    tracking: 0
  )
  ...
}

And for a color token:

public extension ColorToken {
  static var textStaticSuccessHi: ColorToken {
      ColorToken(
        base: UIColor(red: 0.0000, green: 0.4275, blue: 0.2588, alpha: 1.0000),
        inverse: UIColor(red: 0.2157, green: 0.7608, blue: 0.4980, alpha: 1.0000),
        cornflower: UIColor(red: 0.0000, green: 0.1294, blue: 0.0667, alpha: 1.0000),
        blush: UIColor(red: 0.0000, green: 0.1294, blue: 0.0667, alpha: 1.0000),
        emerald: UIColor(red: 0.0000, green: 0.1294, blue: 0.0667, alpha: 1.0000),
        purple: UIColor(red: 0.0000, green: 0.1294, blue: 0.0667, alpha: 1.0000),
        tangaroa: UIColor(red: 0.0000, green: 0.6510, blue: 0.4039, alpha: 1.0000),
        bush: UIColor(red: 0.0000, green: 0.6510, blue: 0.4039, alpha: 1.0000),
        coffee: UIColor(red: 0.0000, green: 0.6510, blue: 0.4039, alpha: 1.0000),
        violet: UIColor(red: 0.0000, green: 0.6510, blue: 0.4039, alpha: 1.0000)
      )
    }
...
}

Then, optimized DSL in our iOS & Android libraries is helping mobile engineers to use tokens easily. Here are some usage examples:

// SwiftUI - textStaticDefaultHi
ScrollView(showsIndicators: false) {
    VStack(spacing: .Static.l) {
      DSLabel( // Custom label
        fontStyle: .body1Bold,
        colorToken: .textStaticDefaultHi,
        text: viewModel.subtitle
      )
      .multilineTextAlignment(.center)
    }
}

// UIKit - textStaticSuccessHi
myView.tintColor = viewModel.mood.textStaticSuccessHi.uiColor

Now that the usage & safe implementation of tokens is guaranteed, we still need one place to help Mobile Engineers and Product Designers understand and interact with the Design System on apps.

More specifically, we need to provide a way to test & interact with the Design System at a very low level without a “product context”.

Step 3 — Updating the Design System apps

Design tokens are the lowest level of interacting and using a design system. The problem is that we have many components with many variations to provide and interact with.

Since the beginning of the app development, we created a showcase app for our design system. And now that the definition of tokens is clean and scalable, we can optimize those internal apps.

We don’t have dedicated iOS and Android engineers in the Design System (DS) squad. The Mobile Core squad, therefore, collaborated with the Design System team to provide a brand new update of our Revolve apps by updating our components, tokens, and moods.

Thanks to the Revolve app, and dedicated UI framework isolating the Design System, Mobile Engineers can now seamlessly implement the brand safely and with light efforts:

Step 4 — Rebranding everywhere!

This step is obvious, but you get the point–all mobile engineers can now update the codebase and token usage:

• Some changes are already applied following the design token foundation updates/renaming made by the Mobile Core squad, but they still need design QA validation.
• Many other changes need validation or adaptation by mobile engineers by collaborating with Product Designers from their squad and the Design System team.

After some weeks of work, we were now ready:

Step 5— Let’s submit that app… and its rebranded metadata

Let’s find out how many screenshots we need to generate and upload. Our apps are available in 13 languages, 5 showcased devices, and an average of 5 screenshots. Did you get it?

Yes, around 325 screenshots to upload and update regularly.

Of course: Autopilot mindset! We have been doing that with Fastlane Snapshot, Screengrab, and Abyssale for a while. So we updated our Abyssale templates and can now generate them from our CI/CD process whenever we want, and we are always up-to-date regarding the features, languages, and devices prices:

If you are curious about how we are manipulating the screenshots and branding titles, font & layout, you can check our previous series of How do we manage store screenshots at BackMarket?

It’s just the beginning

This is it. Our brand-new apps are on the App Store & Google Play, and you know almost everything about the big steps that made this new version possible.

As a user, you’ll notice a “simple” change from old colors & fonts to new ones. But as you now understand, there is a lot of work and automation behind this new version. These foundations will help us iterate our new brand identity faster at scale on our mobile apps and websites.

Of course, we still have many updates and changes to bring. There are many remaining design tokens, like shadows, margins, and icons, that we still need and want to automate. And we will!

We are very proud to share this new brand identity with our users, and we hope you’ll enjoy it too. We also want to share big kudos & thank you to all the Back Makers who worked on that project: Brand, Design System, Mobile Core, Mobile Engineers, Product Designers, Content & Editorial… and so many others!

We hope this article inspires you to reach the next level with your design system and apps. If you are interested in working on that kind of project, we have some open positions at Back Market that you may be interested in. Check-it out!