Microapp Personalization
Microapp Personalization
We set out to refine Microapp personalization by listening closely to our users. Through targeted interviews and usability testing, we uncovered key pain points that made personalization feel confusing and uncertain. By addressing these concerns head-on, we transformed the experience into something intuitive, guided, and effortless – eliminating the guesswork entirely.
We set out to refine Microapp personalization by listening closely to our users. Through targeted interviews and usability testing, we uncovered key pain points that made personalization feel confusing and uncertain. By addressing these concerns head-on, we transformed the experience into something intuitive, guided, and effortless – eliminating the guesswork entirely.
User Interviews
Wireframes
Prototyping
User Testing
Product Design
Interaction Design
Dev Support
The Problem
The personalization flow was redesigned 4 years prior to this initiative. While much more robust than the original solution, it was designed and built almost entirely on assumptions rather than user input. The result was a solution that worked, but left much to be desired.
User
Interviews
From the start, we knew user input would be key to the success of this initiative. Partnering with the GTM team, we identified ideal candidates from our user base and conducted interviews to observe how they personalize Microapps to meet their goals. We noted both positive and negative behaviors, gathered insights on what users love or dislike about the current experience, and captured their “wish list” of desired features to guide future improvements.
From the start, we knew user input would be key to the success of this initiative. Partnering with the GTM team, we identified ideal candidates from our user base and conducted interviews to observe how they personalize Microapps to meet their goals. We noted both positive and negative behaviors, gathered insights on what users love or dislike about the current experience, and captured their “wish list” of desired features to guide future improvements.
"It takes too many clicks to get into edit mode."
"It takes too many clicks to get into edit mode."
"The 'View All Dynamic Fields' panel should be open by default to allow for quicker personalization."
"The 'View All Dynamic Fields' panel should be open by default to allow for quicker personalization."
"It should be easier to edit large blocks of text inline. What if it opened up in a modal?"
"It should be easier to edit large blocks of text inline. What if it opened up in a modal?"
"When editing inline, it needs to be easier to navigate from field to field."
"When editing inline, it needs to be easier to navigate from field to field."
"The 'View All Dynamic Fields' panel takes too long to load. Typically 10-20 seconds."
"The 'View All Dynamic Fields' panel takes too long to load. Typically 10-20 seconds."
"It should be it easier to edit large blocks of text inline. What if it opened up in a modal??
"It should be it easier to edit large blocks of text inline. What if it opened up in a modal??
"The 'View All Dynamic Fields' panel should be open by default to allow for quicker editing."
"The 'View All Dynamic Fields' panel should be open by default to allow for quicker editing."
"I want to be able to see just the instances I've created."
"I want to be able to see just the instances I've created."
"Theres no way to tell which required fields are remaining. And I can't share till I've found them all"
"Theres no way to tell which required fields are remaining. And I can't share till I've found them all"
"The next/prev page nav buttons are kind of useless to us. We never use them."
"The next/prev page nav buttons are kind of useless to us. We never use them."
Some takeaways…
Unclear which fields have already been modified
No effective communication was in place that let users know which fields had already been modified. This resulted in modifying the same field more than once, slowing the publishing process.
Lack of filtering in the instance menu
The only instances users typically work with are ones that they created – and the instance menu only lists instances everyone created.
The microapp/instance menu is trying to solve too many problems at once
One crucial menu in the viewer had far too many features packed into it, creating unnecessary friction.
There is an opportunity to better guide users through the inline editing experience
We discovered that moving between fields during inline editing was cumbersome for users, leading many to develop their own workarounds to edit from page to page.
No easy way to tell which required fields are remaining and where they live
A business user cannot share a personalized microapp until they've satisfied all required fields – and there is no easy way find those fields.
Fields that appear on multiple pages are not clearly ideantified
Users wanted clear identification of fields that are being used on multiple pages to reduce duplicate edits.
Mid-Fi
Wireframes
Our user interviews gave us clear direction on which problems would have the greatest impact if solved. With those insights, we began mapping out potential solutions. We opted for mid-fidelity wireframes since the overall UI style was already established to align with our existing builder.
With a dedicated Microapp Management dropdown, we eliminate the complixities introduced when we tried cramming microapp and instance management into one menu.
With a dedicated Microapp Management dropdown, we eliminate the complixities introduced when we tried cramming microapp and instance management into one menu.
With a dedicated Microapp Management dropdown, we eliminate the complixities introduced when we tried cramming microapp and instance management into one menu.
With a dedicated Microapp Management dropdown, we eliminate the complixities introduced when we tried cramming microapp and instance management into one menu.
Getting into Personalization mode can be quicker than ever now that the Personalize CTA is a first-class citizen in the UI.
Getting into Personalization mode can be quicker than ever now that the Personalize CTA is a first-class citizen in the UI.
Getting into Personalization mode can be quicker than ever now that the Personalize CTA is a first-class citizen in the UI.
Getting into Personalization mode can be quicker than ever now that the Personalize CTA is a first-class citizen in the UI.
We redesigned the microapp selection experience by moving it into a dedicated modal and adding cover images to make browsing and choosing microapps easier.
We redesigned the microapp selection experience by moving it into a dedicated modal and adding cover images to make browsing and choosing microapps easier.
We redesigned the microapp selection experience by moving it into a dedicated modal and adding cover images to make browsing and choosing microapps easier.
We redesigned the microapp selection experience by moving it into a dedicated modal and adding cover images to make browsing and choosing microapps easier.
A new toggle lets you filter the Instance Menu to display just your instances.
A new toggle lets you filter the Instance Menu to display just your instances.
A new toggle lets you filter the Instance Menu to display just your instances.
A new toggle lets you filter the Instance Menu to display just your instances.
A cleaner experience: Instance management now takes place in its own dedicated menu
A cleaner experience: Instance management now takes place in its own dedicated menu
A cleaner experience: Instance management now takes place in its own dedicated menu
A cleaner experience: Instance management now takes place in its own dedicated menu
It would be so much easier to identify required fields if their bounding box color was red.
It would be so much easier to identify required fields if their bounding box color was red.
It would be so much easier to identify required fields if their bounding box color was red.
It would be so much easier to identify required fields if their bounding box color was red.
Navigate from field to field quicker with the addition of this tooltip.
Navigate from field to field quicker with the addition of this tooltip.
Navigate from field to field quicker with the addition of this tooltip.
Navigate from field to field quicker with the addition of this tooltip.
At a glance users can see how many required fields are left to fill out and they can navigate to them quickly by clicking this toggle.
At a glance users can see how many required fields are left to fill out and they can navigate to them quickly by clicking this toggle.
At a glance users can see how many required fields are left to fill out and they can navigate to them quickly by clicking this toggle.
At a glance users can see how many required fields are left to fill out and they can navigate to them quickly by clicking this toggle.
Checkmarks appear next to each field that has been modified by the user.
Checkmarks appear next to each field that has been modified by the user.
Checkmarks appear next to each field that has been modified by the user.
Checkmarks appear next to each field that has been modified by the user.
The bounding box around each field modified by the user could change to green. BUT: What about completed required fields?
The bounding box around each field modified by the user could change to green. BUT: What about completed required fields?
The bounding box around each field modified by the user could change to green. BUT: What about completed required fields?
The bounding box around each field modified by the user could change to green. BUT: What about completed required fields?
To streamline the personalization workflow, a contextual Helper Tooltip could appear when a personalizable field is selected inline. This could enable quick, intuative navigation from field to field
To streamline the personalization workflow, a contextual Helper Tooltip could appear when a personalizable field is selected inline. This could enable quick, intuative navigation from field to field
To streamline the personalization workflow, a contextual Helper Tooltip could appear when a personalizable field is selected inline. This could enable quick, intuative navigation from field to field
To streamline the personalization workflow, a contextual Helper Tooltip could appear when a personalizable field is selected inline. This could enable quick, intuative navigation from field to field
We could surface a simple countdown of remaining required fields to give users better visibility into their progress and reduce uncertainty.
We could surface a simple countdown of remaining required fields to give users better visibility into their progress and reduce uncertainty.
We could surface a simple countdown of remaining required fields to give users better visibility into their progress and reduce uncertainty.
We could surface a simple countdown of remaining required fields to give users better visibility into their progress and reduce uncertainty.
Adding a page panel to Inline Edit Mode could streamline navigation and remove the need for the workarounds users previously relied on.
Adding a page panel to Inline Edit Mode could streamline navigation and remove the need for the workarounds users previously relied on.
Adding a page panel to Inline Edit Mode could streamline navigation and remove the need for the workarounds users previously relied on.
Adding a page panel to Inline Edit Mode could streamline navigation and remove the need for the workarounds users previously relied on.
To speed up sharing, we’ll surface any remaining required fields in one modal that appears when users click the Share button.
To speed up sharing, we’ll surface any remaining required fields in one modal that appears when users click the Share button.
To speed up sharing, we’ll surface any remaining required fields in one modal that appears when users click the Share button.
To speed up sharing, we’ll surface any remaining required fields in one modal that appears when users click the Share button.
The Solution
User validation at the wireframe stage gave us the confidence to move forward. After a few strategic adjustments, we shifted into hi-fi design, guided by the visual style established in our new Builder. The end result? A unified, polished experience that feels like one continuous flow from the Builder to the Viewer
Upon entering the viewer, users are greeted by a redesigned instance selection modal featuring filters that make it easy to view only the instances they’ve created.
Upon entering the viewer, users are greeted by a redesigned instance selection modal featuring filters that make it easy to view only the instances they’ve created.
Upon entering the viewer, users are greeted by a redesigned instance selection modal featuring filters that make it easy to view only the instances they’ve created.
Upon entering the viewer, users are greeted by a redesigned instance selection modal featuring filters that make it easy to view only the instances they’ve created.
Microapp management is now easier than ever with this new, better-organized microapp mangement menu
Microapp management is now easier than ever with this new, better-organized microapp mangement menu
Microapp management is now easier than ever with this new, better-organized microapp mangement menu
Microapp management is now easier than ever with this new, better-organized microapp mangement menu
The Personalize CTA is now contextual to the instance name.
The Personalize CTA is now contextual to the instance name.
The Personalize CTA is now contextual to the instance name.
The Personalize CTA is now contextual to the instance name.
Just focus on the work you've done by simply filtering the instance menu.
Just focus on the work you've done by simply filtering the instance menu.
Just focus on the work you've done by simply filtering the instance menu.
Just focus on the work you've done by simply filtering the instance menu.
Required fields on the canvas are differentiated from other fields by a red bounding box.
Required fields on the canvas are differentiated from other fields by a red bounding box.
Required fields on the canvas are differentiated from other fields by a red bounding box.
Required fields on the canvas are differentiated from other fields by a red bounding box.
It's now quicker than ever to filter your personlizable fields so you can just focus on the ones required for sharing.
It's now quicker than ever to filter your personlizable fields so you can just focus on the ones required for sharing.
It's now quicker than ever to filter your personlizable fields so you can just focus on the ones required for sharing.
It's now quicker than ever to filter your personlizable fields so you can just focus on the ones required for sharing.
Any field that shows up more than once in the microapp is tagged with this icon. While editing, you’ll see a reminder that updating it will also update every other place it’s used.
Any field that shows up more than once in the microapp is tagged with this icon. While editing, you’ll see a reminder that updating it will also update every other place it’s used.
Any field that shows up more than once in the microapp is tagged with this icon. While editing, you’ll see a reminder that updating it will also update every other place it’s used.
Any field that shows up more than once in the microapp is tagged with this icon. While editing, you’ll see a reminder that updating it will also update every other place it’s used.
Default values are visually represented as gray, "placeholder" text to make it easier to identify which fields are using the default value and which ones have been modified by the user.
Default values are visually represented as gray, "placeholder" text to make it easier to identify which fields are using the default value and which ones have been modified by the user.
Default values are visually represented as gray, "placeholder" text to make it easier to identify which fields are using the default value and which ones have been modified by the user.
Default values are visually represented as gray, "placeholder" text to make it easier to identify which fields are using the default value and which ones have been modified by the user.
Any required field that has been modified by the user will be marked with a "Done" badge.
Any required field that has been modified by the user will be marked with a "Done" badge.
Any required field that has been modified by the user will be marked with a "Done" badge.
Any required field that has been modified by the user will be marked with a "Done" badge.
Filtering your personalizable fields down to the ones that are required for sharing.
Filtering your personalizable fields down to the ones that are required for sharing.
Filtering your personalizable fields down to the ones that are required for sharing.
Filtering your personalizable fields down to the ones that are required for sharing.
Navigating to any page with a required field while editing inline is nown easier than ever with the addition of a Page Panel.
Navigating to any page with a required field while editing inline is nown easier than ever with the addition of a Page Panel.
Navigating to any page with a required field while editing inline is nown easier than ever with the addition of a Page Panel.
Navigating to any page with a required field while editing inline is nown easier than ever with the addition of a Page Panel.
Users can now be guided though the inline editing experience with the addition of this tooltip.
Users can now be guided though the inline editing experience with the addition of this tooltip.
Users can now be guided though the inline editing experience with the addition of this tooltip.
Users can now be guided though the inline editing experience with the addition of this tooltip.
While not a part of Personalization, we needed up update Broadcast Mode in the viewer as a part of this initiative to give it the same visual language as the rest of The Viewer
While not a part of Personalization, we needed up update Broadcast Mode in the viewer as a part of this initiative to give it the same visual language as the rest of The Viewer
While not a part of Personalization, we needed up update Broadcast Mode in the viewer as a part of this initiative to give it the same visual language as the rest of The Viewer
While not a part of Personalization, we needed up update Broadcast Mode in the viewer as a part of this initiative to give it the same visual language as the rest of The Viewer
When users attempt to share before satisfying all required fields, they'll be met with this modal to help them complete the remaining fields.
When users attempt to share before satisfying all required fields, they'll be met with this modal to help them complete the remaining fields.
When users attempt to share before satisfying all required fields, they'll be met with this modal to help them complete the remaining fields.
When users attempt to share before satisfying all required fields, they'll be met with this modal to help them complete the remaining fields.