Brand and digital products: keep the promise from breaking.
When users transition from the website to the app, they are validating the brand promise through real experiences.
The brand shapes how people perceive you, while product design shapes how they use it. These two tasks are not sequential stages but need to go hand in hand: with the same voice, the same colors, the same typography, and the same feeling from the first touchpoint to the product itself. If the two teams work separately and then combine later, users will sense a disconnect even if they cannot articulate why.
- There is a clear identity, needing a product that inherits and expands in the right spirit.
- both the brand and product are still immature, needing to shape each other together
- multi-screen products with additional features that need tokenized identity
- a website and product using two different identity systems causing a disconnect
- a rigid sequential handover between the brand team and the product team
Digital products are where the brand promise is validated by real experiences. You can build a very beautiful identity on the outside, but if the inside of the app uses different colors, tones, and feels, users will sense something is off, even if they can't explain why. This is not merely an aesthetic issue but a matter of trust.
Two tasks, one voice
Brand and product design address two different questions. The brand answers: how people perceive who you are. Product design answers: how people use what you create. However, these two questions are not separate because users do not separate them when they interact.
When users click on an ad, read the website, download the app, and start interacting, all these steps are part of a continuous journey in their minds. If each step has a different tone, color palette, or feeling, the experience will be disjointed and difficult to build lasting trust.
Alignment factors between both parties
- The brand's personality and how it manifests in products: If the brand is calm and professional, the product interface should not use bright colors and flashy effects. If the brand is youthful and friendly, microcopy (small text in the interface) should not be as dry as technical documentation.
- Color, typography, and spacing: These are the three elements users perceive immediately. If the website uses one color tone while the app uses another, they will feel like they are using products from two different companies.
- Voice and microcopy within the product: Error messages, button labels, confirmation messages are all brand touchpoints. Many products are well-crafted on the outside but default to system writing on the inside, which contradicts the established image.
- Seamlessness from the entry touchpoint inside: Users transitioning from advertisements or websites to products should not feel a break in the experience. Seamlessness does not mean identical but rather sharing the same spirit.
Consistency across touchpoints is key. The brand and user experience together guide visual recognition, messaging, and usability so that users trust and return.
Interaction Design Foundation: Branding in UX Design
When to choose which direction
Brand is clear, new product is just starting: This is the most favorable situation. You already have an identity system, and the product just needs to inherit and expand in the right spirit. It is important to tokenize the identity from the start so that future brand updates do not require manual adjustments for each screen.
Both the brand and the product are still immature: Work in parallel so that the two shape each other. An incomplete brand does not mean waiting until it is finished to create the product. Working separately and then combining later is more labor-intensive, as many adjustments will be needed.
There is a point that needs balancing: when brand identity starts to hinder operations, prioritize familiar conventions. Users have reflexes with common interface patterns, such as where the login button is or where the reservation menu is. Overly creative forms in the desire to differentiate the brand can make them feel lost and leave.
Common errors
- Websites and applications use two different identity systems, causing users to feel a disconnect even if they can't articulate it.
- Seeing the brand as just a logo and primary color, forgetting that the voice and microcopy within the product are also part of the brand.
- Overly formalizing the brand makes it difficult to operate: the design is beautiful, but users don’t know where to click.
- Not tokenizing the identity means that every time the brand makes a small change, each screen in the product must be manually adjusted.
- The brand team and the product team work in a rigid sequential manner, handing off completed work before meeting, rather than collaborating from the start.
A good product solution arises from the give-and-take between product, design, and engineering, not from passing requests sequentially through each stage.
Marty Cagan, INSPIRED and EMPOWERED
The viewpoint of Sinh Vũ
Sinh Vũ, originally a branding studio, now designs digital experiences directly based on that brand. The working method involves creating flows and product interfaces from the existing identity system, tokenizing colors, fonts, and spacing to maintain a consistent spirit from the website to the product itself.
If you have a clear identity, Sinh Vũ will help the product inherit seamlessly without needing to start from scratch. If you do not have an identity yet, both tasks can run parallel to shape each other in the same process. The programming part will be handled by the technical team; Sinh Vũ ensures that the brand promise remains intact when it becomes a real experience.
You should consider this part in relation to your specific problem. Not every product requires the same level of integration, but if the brand is an asset you are investing in, then having it break down within the product is the most regrettable thing.
Decision checklist
Topic: How to coordinate digital product design and brand design. Sinh Vũ guide, sinhvu.com
Select each item you find appropriate, then print or save as PDF to take with you.
If you have marked most of the signs above, this is the time to discuss in more detail. Sinh Vũ can help you review and propose a direction.
References
Interaction Design Foundation: Branding in UX Design. Marty Cagan, INSPIRED and EMPOWERED (original books). Practical experience from Sinh Vũ Studio.
Frequently asked questions
If the brand is not yet complete, should I wait until it's finished before creating products?
It is not necessary to wait. If both are still immature, working in parallel to shape each other from the start is a more practical approach. The important thing is that both groups must sit together, not finish their own tasks and then pass them on. Complete separation will require more effort as many adjustments will need to be made.
What is design tokenization, and is it necessary?
Design tokenization is the process of naming and storing values like colors, font sizes, and spacing into a set of variables used consistently across the entire product. Instead of hardcoding colors or text into each screen, you reference the token name everywhere. When the brand updates, you only need to change it in one place, and the entire system updates automatically. For products with many screens or additional features, this is the way to maintain consistency without the hassle of manually editing each instance.