Brand expression playbook for UI teams: Implementing artful technology
UX Manager Toolkit: A practical, comprehensive framework to establish grounding principles, promote proactive cross-collaboration, reduce decision-making roadblocks, and empower UI teams to deliver intuitive, affective, on-brand, and consistently implemented user interfaces.
If any of the following applies to you, read on:
- Your software doesn’t have a consistent look and feel, especially across web and mobile apps
- You’re just starting to put together a design system
- Your organization doesn’t have an established design system
- The company has just rebranded
User interfaces often elicit a strong emotional response, even seemingly minor elements like color and icon choice can cause friction in teams. Individual preferences by different stakeholders on these issues can stall project progress unnecessarily. Having a concerted strategy helps UI teams gain organizational trust to make better, more efficient design decisions with clarity of brand expression.
Play-by-play
- Lay the groundwork by understanding the business and identifying champions.
- Align on the underlying principles together as an organization.
- Define signature elements that deliver on the vision.
- Implement signature elements in a design system.
- Ensure maintainability and delegate ownership by realigning and adjusting as needed.
Step 1: Lay the groundwork
UI teams have the important task of connecting the experience to the brand. They must partner with leadership and other departments early and often, not only as a measure of good faith, but to send the message that their input to the UI team’s vision for the experience is not only welcomed, but foundational. This makes day-to-day tactical decision-making later on more efficient because all parties have contributed to and, once the vision has been set, agreed with the high-level plan.
Compile business drivers and initiatives for reference
We’re in the business of shipping products, so it’s essential that the team knows what the business is all about, the future they’re driving towards, and how they plan on getting there.
- Company vision, mission, and goals
- Revenue drivers, key market initiatives, and product roadmap
- Highlight timelines and milestones
Identify champions with influence
Find out who has the power and ability to affect change in the organization, aspects of the business they have influence over, and the kinds of decisions that they are able to make.
- Decision Maker — Gatekeeper who orchestrates key decisions
- Influencer — Can affect decisions on a day to day basis
- Producer — Has the capacity to mobilize action or deliver on goals
Define the expected outcomes upon engaging with each work partner.
- How can the champions help the team?
- What are the opportunities for synergy?
- Understand their motivations, goals, and key initiatives.
- How can you help the champions?
- What else should be considered in the plan?
➡️ Get the Brand Expression Workshop Google Sheet template to track resources and champions.
Get a feel for user pain points and recurring trends
If the product already exists in the market, understand how customers really feel about it.
- Analyze product reviews for sentiments or use sentiment analysis tools
- Gather recent insights from product, customer success, and technical support through interviews or documentation
- Synthesize your findings and identify themes of pain and opportunity
Example findings:
“The UI is bland and boring.”
“The AI is just not getting it right.”
“I have concerns about my privacy on the platform.”
Step 2: Align on the underlying principles
Establishing principles is the most important activity the UI team must do to engage work partners so they can be set up for success. The team must find the time and space to meet with every stakeholder to get information and interpret relevant details into practical and cohesive guidelines.
Root out the emotional impact you expect to elicit
Reference your company’s vision, mission, and goals. Then, get with product management, UX, sales, and other customer-facing departments like customer success or support to understand what’s important for your users and the business. By knowing the company’s aspirations and primary business drivers, like low conversion rates or a new product push, the team can get a better sense of identifying the emotions that can help drive change.
- How should people feel when they interact with the UI?
- What behaviors should the look and feel of the UI influence?
- How can the look and feel achieve the intended emotional impact and behavior change?
- How can you counter the hurt your users are feeling?
Example emotional impact to design for:
Our product should evoke delight, empathy, and trust.
Define the UI vision
The UI team must take ownership of this initiative and craft their vision, mission, goals, and values. Start with a brief statement that summarizes how your brand’s personality and signature elements should express uniqueness to drive the emotional or business impact. The statement should be defined for the high-level experience, but may also be used for key initiatives.
Template:
We will [drive emotional or business impact] through [uniqueness].
Step 3: Define signature elements
These important elements serve as visual and sensory cues to propagate the brand personality throughout the product. The UI team should describe these unique elements in detail and show specific examples of how an element is executed. This part of the strategy is where the UI team will spend a lot of time co-creating with design leadership, marketing, and other key stakeholders.
Define how the brand’s personality should be expressed
Interpret the brand style guide into product-centric guidelines. It’s not enough to simply use the brand style guide because it has a different intent and contains information that may not be relevant to what the product is trying to accomplish. Keep the emotional impact in mind and whether the brand’s personality is accommodating to those emotions or not. Make adjustments where needed. Then, circle back and ask marketing for their opinion on how brand personality should be expressed by the product.
- Identify brand traits like excitement, sincerity, ruggedness, competence, and sophistication
- Explore visual and other sensorial qualities of brand expression
- Develop voice and tone
➡️ Get the Brand Expression Workshop Figma templates for your brand personality traits and voice and tone workshop with key stakeholders.
Connect the brand personality traits with style choices
The UI team should create a mood board and examples that convey the vision’s ideals to validate with customers and stakeholders during individual or workshop sessions.
- Provide clear examples of how signature elements should and should not be used.
- Confirm that the visuals and other stimuli evoke the intended emotions.
- Ensure that any stylistic treatments are purposeful.
Craft signature elements
The UI team should take cues from the brand style guide and identify the style choices that can be applied and adapted to UI elements, layouts, and components.
- Colors and color schemes
- Shapes and textures
- Typography and copy
- Iconography and illustrations
- Imagery and graphics
- Motion and audio patterns
- Other specific styling choices
Document, share progress, and encourage participation
At the end of this phase, the team should have a more refined product style guide with practical examples of signature elements in various settings. The UI team should present and validate the results of these activities on a regular basis with key stakeholders.
At the end of this phase, the team should have the following:
- Background information for reference
- Company vision, mission, and goals
- High-level discovery of customer, market, and business findings
- Brand style guide
- Living documents for collaboration
- Initial product style guide
- Initial design system documentation
The UI team should present to and validate the results of these activities on a regular basis with key stakeholders, such as during an all-company meeting to socialize the vision, encourage better participation, and get critical feedback early on.
Step 4: Implement signature elements in the design system
Take stock of your product’s current design language
It is very rare these days where designers have to create a design language from scratch. It is also not very practical to do so, because software is mostly developed using design language baked into technology, like Google’s Material Design. The team should get with development to understand the tech stack at a high level and the frontend framework in more depth. Knowing this can help reduce the need for defining basic components so that the UI team can focus on refining micro interactions, defining more complex design patterns, and tailoring the UI to the experiences.
Technical knowledge:
- Application (Android, iOS, responsive web)
- Type (Native, web, or hybrid app)
- Frontend framework (Angular, React Native, Flutter, etc.)
- Component libraries (JQuery, React.js, Chart.js etc.)
Reference materials:
- Product documentation
- Marketing collateral
Stance:
- Compatibility — Does the design language complement the intended look and feel?
- Adaptation — What does the team have to adjust about the design language and UI components to meet the intended result?
- Exceptions — Are there specific situations where exceptions must be made?
Refine the design language to best express the UI vision
Make adjustments to your design system and tailor components by implementing these signature elements. Be careful that ornamentation does not detract from the usability of the product. Start with simpler elements that can stand to have more personality than most parts of your product, like loading and login screens.
Identify common use cases for signature elements in the design system:
- Atoms and molecules (individual or grouped components)
- Organisms (design patterns)
- Interactive behaviors (tap, touch, scroll, hover, etc)
- Common patterns
- Key experiences
Step 5: Ensure maintainability and empower work partners
Document what’s important in places where people live
The last thing you want is to create a lot of artifacts that get seen a few times and then never used again. If you have built good relationships with the UI champions, they are great people to help you ensure what you’ve created will actually be used.
- Use the tools that most of the organization uses on a day-to-day basis and avoid buying yet another tool to manage
- Add documentation to a design system that people are already using
- Be concise, clear, and organized and create a structure that makes sense to others
- Avoid over-documenting by continuously keeping stock of deliverables being created and shared and archiving regularly
Get people involved
The UI team shouldn’t be the only ones touching this.
- Marketing should revisit any brand initiatives with the UI team to identify impacts on look and feel
- Development should bring up any issues that arise after component library updates
- Product should actively voice customer concerns and expectations that don’t align
Wrapping up
By being prepared, having the visuals that people can respond to, getting everyone together to come to an understanding, adapting to the organization’s tools and processes, and keeping the lines of communication open, UI teams can successfully manage the creative process and launch on-brand experiences.
➡️ Get the Brand Expression Workshop Figma templates for your brand personality traits and voice and tone workshop with key stakeholders and the Brand Expression Workshop Google Sheet template to track resources and champions.
