In-product Experiences tread a fine line between being intrusive and being unnoticed by the end-user. While creating effective Experiences largely relies on how they are triggered and the information they contain, you can enhance their effectiveness with thoughtful styling.
It’s tempting to use the same colors, fonts, and images in your Experiences as you have in the rest of your product. While this can work for the most intrusive Experiences, such as Modals, it is generally better to make your Experiences stand out so that users notice them.
We suggest using background colors that are contrasting and complementary to your underlying app color. This will help users take notice and understand that your tours are a helpful guide to the underlying product. HubSpot’s user onboarding tooltip is a great example of this:
But that doesn’t mean that you should cast aside your brand guidelines and freestyle the design of your Experiences – retain a consistent brand presence through using your brand’s typography and shapes. This is essential for creating a natural flow for your users through your product: creating a custom design style for all Experiences makes users become familiar with a consistent method of learning.
Use background colors for Experiences that are contrasting and complementary to your brand’s color palette.
Use fonts and shapes from your design guide to ensure a consistent look and feel throughout your product.
Maintain a consistent style for each type of Experience. (e.g. style for new feature announcements vs. style for product walkthroughs)
Styling is one important component of creating a successful Experience. But using Experiences to enhance the value of your product also requires intelligent placement, delivery, and composition of the Experience. To provide you with best practices to increase completion rates and engagement, we analyzed how our users deliver value to create our Benchmark Report. Download it here!
NEXT: Remember you're still marketing 📈