Visual Branding

The Visual Branding - Colors & Typography feature allows service providers to fully customize the visual appearance of the Bill Explainer microsite to align with their specific brand guidelines. This feature covers both the color scheme and typography, ensuring that the microsite reflects the service provider's unique branding across all customer touchpoints.

By offering customization of both colors and fonts, businesses can maintain a seamless and consistent brand experience that mirrors their corporate identity. The service provider's colors can be applied to headers, buttons, links, and other key interface elements, while typography can be adjusted to match the brand’s font styles, ensuring the microsite looks and feels like an extension of their main website or app. This customization enhances customer trust and familiarity while interacting with the Bill Explainer microsite.

Key Benefit

• For Businesses: Ensures consistent visual branding across all customer interactions by allowing companies to customize both the colors and fonts of the Bill Explainer microsite, reinforcing brand recognition and loyalty.

• For Consumers: Provides a familiar and visually appealing experience that matches the brand they trust, improving comfort and ease of use.

• For Customer Service Representatives (CSRs): Strengthens the customer experience by delivering a microsite that feels like a cohesive part of the service provider's platform, reducing friction in customer interactions.

Use Case

The Problem

When customers access a platform that doesn’t visually align with the brand they know and trust, it can cause confusion or distrust. Inconsistent visual design between a company’s website and third-party tools may lead to an impersonal or disconnected user experience.

The Solution

The Branding - Colors & Typography feature allows businesses to apply their corporate color schemes and typography to the Bill Explainer microsite, creating a seamless and visually consistent experience for customers. This customization ensures that the microsite feels like a natural extension of the service provider’s ecosystem.

Benefits

• Brand Consistency: By applying custom colors and fonts, businesses can ensure the Bill Explainer microsite aligns perfectly with their corporate identity.

• Familiarity & Trust: A consistent visual experience reassures customers that they are using a trusted platform, enhancing confidence and reducing hesitation.

• Improved User Experience: Customers experience a smoother, more enjoyable interaction when the microsite feels like a seamless part of the overall brand experience.

How it works

• During onboarding, businesses provide the color codes (HEX, RGB) and font links (licensed or open-source fonts) that match their brand guidelines.

• The Studio module is used to configure the microsite’s colors and typography, applying them to elements like headers, buttons, and text fields.

• Businesses can preview the microsite to ensure that the colors and fonts are applied correctly, ensuring alignment with the brand’s visual identity.

• The microsite automatically adapts to maintain consistency across desktop and mobile devices, ensuring a uniform experience across platforms.

Common Issues/Troubleshooting

• Issue: "The fonts don’t display correctly on some browsers."
  Solution: Ensure that the correct font files are being used and are compatible with the target browsers. Some custom fonts may require additional configuration to display properly across all platforms.

• Issue: "The colors look different on mobile devices."
  Solution: Verify that the mobile version of the microsite is correctly inheriting the branding settings from the desktop configuration. Responsive design settings should ensure consistent display across all device types.

• Issue: "Some sections of the microsite aren’t following the set typography."
  Solution: Check the Studio module configuration to ensure that the typography settings have been applied to all relevant sections of the microsite.