Ninetailed’s Preview Widget
Ninetailed · 2023
Overview
Ninetailed is the leading personalization and experimentation technology that empowers brands to understand their audience and create, deliver, and test tailored experiences.
Ninetailed’s Preview Widget enables users to preview how content behaves for various audiences and experiences before going live.
Overview
Ninetailed is the leading personalization and experimentation technology that empowers brands to understand their audience and create, deliver, and test tailored experiences.
Ninetailed’s Preview Widget enables users to preview how content behaves for various audiences and experiences before going live.
Overview
Ninetailed is the leading personalization and experimentation technology that empowers brands to understand their audience and create, deliver, and test tailored experiences.
Ninetailed’s Preview Widget enables users to preview how content behaves for various audiences and experiences before going live.
Impact
32% Increase in User Interaction
Impact
32% Increase in User Interaction
Impact
32% Increase in User Interaction
Role
Lead Product Designer
Role
Lead Product Designer
Role
Lead Product Designer
Responsibilities
UX/UI
Design System
Prototyping
Responsibilities
UX/UI
Design System
Prototyping
Responsibilities
UX/UI
Design System
Prototyping
Problem
The existing Preview Widget needed to better reflect Ninetailed’s full product offering. To achieve this, we planned to introduce differentiation between personalization and experimentation, requiring a comprehensive redesign of the widget’s concept, user experience, features, and flows to enable users to seamlessly create and preview experiences.
Problem
The existing Preview Widget needed to better reflect Ninetailed’s full product offering. To achieve this, we planned to introduce differentiation between personalization and experimentation, requiring a comprehensive redesign of the widget’s concept, user experience, features, and flows to enable users to seamlessly create and preview experiences.
Problem
The existing Preview Widget needed to better reflect Ninetailed’s full product offering. To achieve this, we planned to introduce differentiation between personalization and experimentation, requiring a comprehensive redesign of the widget’s concept, user experience, features, and flows to enable users to seamlessly create and preview experiences.
Product statement
The Preview Widget had numerous usability and visual issues that required addressing, including:
Users couldn’t share specific combinations of experiences outside their environment.
There was no support for experiment previews, leaving half of our user base underserved.
Functionality indicators lacked clarity.
Some audiences had missing names.
The banner took up excessive space without providing much value.
Once audiences were enabled/disabled, users couldn’t reset to the default state.
The widget wasn’t compatible with Contentful Live Preview, which most of our users relied on.
Usable empty states were missing, creating confusion.
Customers running many personalizations or experiments under a single audience struggled with navigation.
The widget didn’t provide a way to manage experiences or view analytics.
Product statement
The Preview Widget had numerous usability and visual issues that required addressing, including:
Users couldn’t share specific combinations of experiences outside their environment.
There was no support for experiment previews, leaving half of our user base underserved.
Functionality indicators lacked clarity.
Some audiences had missing names.
The banner took up excessive space without providing much value.
Once audiences were enabled/disabled, users couldn’t reset to the default state.
The widget wasn’t compatible with Contentful Live Preview, which most of our users relied on.
Usable empty states were missing, creating confusion.
Customers running many personalizations or experiments under a single audience struggled with navigation.
The widget didn’t provide a way to manage experiences or view analytics.
Product statement
The Preview Widget had numerous usability and visual issues that required addressing, including:
Users couldn’t share specific combinations of experiences outside their environment.
There was no support for experiment previews, leaving half of our user base underserved.
Functionality indicators lacked clarity.
Some audiences had missing names.
The banner took up excessive space without providing much value.
Once audiences were enabled/disabled, users couldn’t reset to the default state.
The widget wasn’t compatible with Contentful Live Preview, which most of our users relied on.
Usable empty states were missing, creating confusion.
Customers running many personalizations or experiments under a single audience struggled with navigation.
The widget didn’t provide a way to manage experiences or view analytics.
Research
The competitor analysis revealed that most competing products already offered preview widgets. However Ninetailed’s version was lacking some essential for usability capabilities such as deep-linking or override mode. We prioritized these capabilities to close the gap and better align with industry standards.
Research
The competitor analysis revealed that most competing products already offered preview widgets. However Ninetailed’s version was lacking some essential for usability capabilities such as deep-linking or override mode. We prioritized these capabilities to close the gap and better align with industry standards.
Research
The competitor analysis revealed that most competing products already offered preview widgets. However Ninetailed’s version was lacking some essential for usability capabilities such as deep-linking or override mode. We prioritized these capabilities to close the gap and better align with industry standards.
Vision
I aimed to significantly improve the widget’s usability, streamline its design, and add essential features for managing personalizations and experiments. We also hoped to close the loop on functionality, enabling seamless use of preview features in both Ninetailed and its integration with Contentful.
Vision
I aimed to significantly improve the widget’s usability, streamline its design, and add essential features for managing personalizations and experiments. We also hoped to close the loop on functionality, enabling seamless use of preview features in both Ninetailed and its integration with Contentful.
Vision
I aimed to significantly improve the widget’s usability, streamline its design, and add essential features for managing personalizations and experiments. We also hoped to close the loop on functionality, enabling seamless use of preview features in both Ninetailed and its integration with Contentful.
Develop
Features
Selecting Audiences
When users open the Preview Widget, they see all their available Audiences. Depending on configurations and their profile, users might already qualify for some of Audience segments, which are displayed via a green indicator. I added tooltips on hover to clarify this feature.
Users can override audience states by toggling the switch:
Default: This state naturally selects eligible Audiences based on user profiles and triggers.
On: Forces an Audience on, allowing the user to select variants even if not eligible.
Off: Forces an Audience off, even if they qualify.
Selecting Audiences
When users open the Preview Widget, they see all their available Audiences. Depending on configurations and their profile, users might already qualify for some of Audience segments, which are displayed via a green indicator. I added tooltips on hover to clarify this feature.
Users can override audience states by toggling the switch:
Default: This state naturally selects eligible Audiences based on user profiles and triggers.
On: Forces an Audience on, allowing the user to select variants even if not eligible.
Off: Forces an Audience off, even if they qualify.
Selecting Audiences
When users open the Preview Widget, they see all their available Audiences. Depending on configurations and their profile, users might already qualify for some of Audience segments, which are displayed via a green indicator. I added tooltips on hover to clarify this feature.
Users can override audience states by toggling the switch:
Default: This state naturally selects eligible Audiences based on user profiles and triggers.
On: Forces an Audience on, allowing the user to select variants even if not eligible.
Off: Forces an Audience off, even if they qualify.
Selecting Variants
If an Audience is turned on, users can choose which variant to display. The baseline shows what users in the holdout or control group see, and percentages reflect variant distribution.
The decision to stack variant elements at the experiment card versus placing them side-by-side at the personalization card is based on user research. Analytics shown the number of variants per experiment was 2 or more whereas personalization can only have 1 variant.
Selecting Variants
If an Audience is turned on, users can choose which variant to display. The baseline shows what users in the holdout or control group see, and percentages reflect variant distribution.
The decision to stack variant elements at the experiment card versus placing them side-by-side at the personalization card is based on user research. Analytics shown the number of variants per experiment was 2 or more whereas personalization can only have 1 variant.
Selecting Variants
If an Audience is turned on, users can choose which variant to display. The baseline shows what users in the holdout or control group see, and percentages reflect variant distribution.
The decision to stack variant elements at the experiment card versus placing them side-by-side at the personalization card is based on user research. Analytics shown the number of variants per experiment was 2 or more whereas personalization can only have 1 variant.
Resetting Profile
To allow users to test from a fresh state, I added a Reset Profile button. This resets their profile to its default state, clearing any audience triggers they may have set during testing.
Resetting Profile
To allow users to test from a fresh state, I added a Reset Profile button. This resets their profile to its default state, clearing any audience triggers they may have set during testing.
Resetting Profile
To allow users to test from a fresh state, I added a Reset Profile button. This resets their profile to its default state, clearing any audience triggers they may have set during testing.
Experience Action Menu
Previously, users couldn’t perform actions directly from the widget. I added an expandable action menu, enabling redirection to analytics and content editors. The menu was designed to accommodate future actions seamlessly.
Experience Action Menu
Previously, users couldn’t perform actions directly from the widget. I added an expandable action menu, enabling redirection to analytics and content editors. The menu was designed to accommodate future actions seamlessly.
Experience Action Menu
Previously, users couldn’t perform actions directly from the widget. I added an expandable action menu, enabling redirection to analytics and content editors. The menu was designed to accommodate future actions seamlessly.
Exploration
Design explorations focused on displaying multiple layers of data in a compact 400px-wide bar. After several iterations, I introduced a nested card system, allowing users to easily access both high-level and detailed data.
Here’s a look at some of the versions along the way:
Exploration
Design explorations focused on displaying multiple layers of data in a compact 400px-wide bar. After several iterations, I introduced a nested card system, allowing users to easily access both high-level and detailed data.
Here’s a look at some of the versions along the way:
Exploration
Design explorations focused on displaying multiple layers of data in a compact 400px-wide bar. After several iterations, I introduced a nested card system, allowing users to easily access both high-level and detailed data.
Here’s a look at some of the versions along the way:
Results
The A/B test showed a 32% increase in user interaction, affirming the redesigned widget’s improved usability. The integration with Contentful’s Live Preview made the widget a critical step in publishing workflows, aligning with our goal to close the loop between preview and publishing.
Results
The A/B test showed a 32% increase in user interaction, affirming the redesigned widget’s improved usability. The integration with Contentful’s Live Preview made the widget a critical step in publishing workflows, aligning with our goal to close the loop between preview and publishing.
Results
The A/B test showed a 32% increase in user interaction, affirming the redesigned widget’s improved usability. The integration with Contentful’s Live Preview made the widget a critical step in publishing workflows, aligning with our goal to close the loop between preview and publishing.
Summary
The Preview Widget redesign enhanced the overall user experience by enabling users to preview and test personalization and experimentation within their environment and through the Contentful integration. Personally, this project gave me some valuable insights:
This project reinforced the importance of user-centric design. By addressing usability gaps like variant selection and profile resetting, we delivered a more intuitive product that fit seamlessly into user workflows.
Working closely with the product and engineering teams of our partner Contentful, I realized the value of cross-organizational collaboration in identifying and solving key challenges, particularly in creating flexible, scalable solutions for integrated products.
The use of A/B testing to measure the impact of design changes emphasized the importance of data in validating design decisions and driving continuous improvements.
Summary
The Preview Widget redesign enhanced the overall user experience by enabling users to preview and test personalization and experimentation within their environment and through the Contentful integration. Personally, this project gave me some valuable insights:
This project reinforced the importance of user-centric design. By addressing usability gaps like variant selection and profile resetting, we delivered a more intuitive product that fit seamlessly into user workflows.
Working closely with the product and engineering teams of our partner Contentful, I realized the value of cross-organizational collaboration in identifying and solving key challenges, particularly in creating flexible, scalable solutions for integrated products.
The use of A/B testing to measure the impact of design changes emphasized the importance of data in validating design decisions and driving continuous improvements.
Summary
The Preview Widget redesign enhanced the overall user experience by enabling users to preview and test personalization and experimentation within their environment and through the Contentful integration. Personally, this project gave me some valuable insights:
This project reinforced the importance of user-centric design. By addressing usability gaps like variant selection and profile resetting, we delivered a more intuitive product that fit seamlessly into user workflows.
Working closely with the product and engineering teams of our partner Contentful, I realized the value of cross-organizational collaboration in identifying and solving key challenges, particularly in creating flexible, scalable solutions for integrated products.
The use of A/B testing to measure the impact of design changes emphasized the importance of data in validating design decisions and driving continuous improvements.
