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 are not two 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 very core of the product. If the two teams work separately and then merge 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 through real experiences. You can create a beautiful identity on the outside. But if the app uses different colors, voices, or feelings on the inside, users will feel something is off even if they cannot explain why. This is a matter of trust, not just aesthetics.
Two tasks, one voice
The 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
The brand is clear, the product is just beginning: This is the most favorable situation. You already have an identity system; 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 to 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ũ is originally a branding studio, now designing digital experiences directly on that brand foundation. The working method involves building the flow and interface of the product from the existing identity system. Sinh Vũ tokenizes colors, typography, and spacing to maintain a consistent spirit from the website to the product itself.
If you already have a clear identity, Sinh Vũ helps the product inherit seamlessly without needing to start from scratch. If you do not have an identity yet, both tasks can proceed together to shape each other in the same process. The programming part is handled by the technical team; Sinh Vũ ensures that the brand promise remains intact when it becomes a real experience.
You should consider this aspect in relation to your specific challenges. Not every product requires the same level of integration. But if the brand is an asset you are investing in, having it break down right within the product would be the most regrettable outcome.
Decision checklist
Topic: How to coordinate digital product design and brand design. Sinh Vũ guide, sinhvu.com
Tick each item that applies or that you can already answer, 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.
This article is for reference. The scope, pricing, and specific commitments of Sinh Vũ are detailed in the proposal and signed contract.