Intuit, Mailchimp: Shopify to Mailchimp Integration.

Role: Senior user experience designer Timeline: 1-2 months. Tools: Figma, Jira

Collaborators: Product manager, Stakeholder, development team, QA, Legal, Marketing.

Sync Shopify to Mailchimp

Objective

In Q4 I was assigned the task of creating pre-connection and post-connection dashboards aimed to help users sync their Shopify customer data to Mailchimp. This integration allows users to map data fields from Shopify to Mailchimp, collect additional contacts from future orders, create targeted e-commerce campaigns, generate product recommendations, and more.

My role.

In two months I used Figma to design and prototype pre-connection and post-connection dashboards for the Shopify to Mailchimp integration experience. In addition, I was tasked with designing the new experience for the “Tag syncing” feature within the Shopify embedded application.

User problem / Define Analyze Business REQ’s

The pre-existing workflow struggled with a few usability issues.

  • Users were unable to view data that was synced from Shopify to Mailchimp within the Shopify platform However, data was available for view on the Mailchimp side application. There was no post connection dashboard within the Shopify platform and little to no context on what tasks users could expect accomplish when visiting the site.

  • Users were unable to set settings for their data before the integration.

  • During the set up process, users must manually enter in contacts for data mapping. Often, users either have no recollection of the tag names OR they are forced to exit the workflow & visit the customers profile to discover the tag/contacts. Their are no permaters set to spellcheck or reference the names of tags so users often experience errors for not typing in the tag/contact names correctly. There is currently no area within the Shopify or Mailchimp application where users can view all their tags .

  • Our Mailchimp users who utilize additional integrations were experiencing unique workflow flows for each integrations pre-connection sync. This led to additional setbacks, users were spending ample amount of time learning how to uniquely connect to different applications. There was no global consistent workflow for how users would connect Mailchimp to apps.

( Please view an example of our pre-existing workflow for our Wordpress to Mailchimp pre-connection flow)

Pre-existing workflow

  • Contact information

  • Timezone and address information

  • WooCommerce settings

Discovery

User interviews:

Timeframe: 2 recurring meetings per week for each user group over 1-2 weeks.

I conducted a series of user interviews with stakeholders and primary users of the tool to learn about their current workflow and the pain points they experience when interacting with the tool. Our users are mainly small to mid-level business owners OR large enterprise corporations.

User Sessions:

Timeframe: 2 recurring meetings for each user group over 1 week.

After gaining a sense of the tool, I conducted user sessions to dig deeper into the root causes of the existing pain points.

At a high level, these sessions allow users to specifically identify where pain points occur in the workflow, define where things are going wrong vs where they are going right, and gain an overall sense of what the user expects to accomplish when navigating through the application.

Our applications revolve around designing for data-heavy applications. The second half of the session is dedicated to understanding the primary information users are expecting to see vs the secondary information, it is important to verify with users what data/info is high priority vs med-low priority. This sets the tone for how I plan to scale and encapsulate data visually in the newly designed app. After collecting Feedback, I inform users of the next UX phase & give them an idea of what to expect and how to prepare.

Ideation / Prototype

How can we enhance the usability of the Shopify to Mailchimp user experience? How can we make the application more useful?

What if we enhanced the applications usability by improving Search Querys. Adding beneficial features like typeaheads and autocomplete can offer users relevant suggestions of all existing contacts/tags. This helps to speed up user searches by providing a list of suggested results as the user types.

  1. The “typeahead and auto complete” functionality was added to promote useful design. Although the pre-existing user flow allowed users to add contacts/tags, they experienced an overwhelming amount of errors in the event they misspelled contacts/tags. In other cases, users often forget the names of tags. With the typeahead and autocomplete enhancements, we can improve the accuracy of searches by allowing users to select from a data base and generate their query at a faster speed. Users will now have the benefit of making more informed selections.

    In the past design the tag mapper had users enter tags in a text box, their were no validations set for this component until after a user attempted to finalize the sync. The validation warnings were FAIL/PASS and offered no context on how users could fix the error.

  2. My aim was to enhance the capabilities of the component:

    • i swaped the text box for a search component with a typeahead feature and added and “add” button to represent an interaction before the final sync that would validate and show tags/contacts that will be successfully synced over.

    • visual queues were added in the form of a “tag” compoenet. The tag component will remain removable up until the final sync is submitted, this visual representation helps inform users of the expected interactions they can take. It is important to utilize visuals in experiences that have interactive components where users are creating, removing, deleting, or adding data.

Currently the Wordpress/Shopify application does not have a UI that shows the data metrics post-connection, users must view in Mailchimp. What if we made the app more useful by designing a post connection dashboard within the Wordpress/Shopify app.

  1. The implementation of a post connection dashboard was added to enhance the usability of the application. In the past users could sync data however they had no way to view the data after the sync, users were unable to accomplish important tasks like verifying what tags/contacts synced over, verifying if the sync was complete, and viewing important data metrics related to their sync. With the addition of the post connection dashboard users will have a useable tool that can now help them accomplish important day to day tasks.

How can we allow users to maximize managing their data settings before integrating with Mailchimp? Currently, users have to manually enter tags and handle data settings post connection. Up to 68% of our users share the combined goal of wanting to sync all their existing tags over to Mailchimp but because the experience only allows manual entries this process has become time consuming. In user sessions we found that it was common to abandon the workflow entirely due to this tedious process.

Shopify

  1. Most users want all tags synced to Mailchimp, moving the tag mapping step to the beginning of the workflow and allowing users to “sync all tags” by selecting a single checkbox will increase the amount of completed integrations and decrease the amount of time it takes to complete an integration.

  2. A new tab for users to manage their tag syncing settings in the in the post-connection dashboard. Users will now be able to switch between the “sync all tags” OR “Sync custom tags” setting at anytime after the initial sync. In the old flow their was no pattern established for managing sync settings, users would either add or remove tags individually.

    WooCommerce

    1. Currently WooCommerce has a technical constraint. The development team does not yet have the ability to allow users to select tags/cintacts from the existing database until after the integration. For this purpose, I created an experience that serves as a middle ground to solution for this task. We will now allow users to select tags/contacts during the set up of the integration however they will have to manually enter tags being that we do not have direct access to the database. Users will now be able to manage how their data transfers over to the Mailchimp before the sync. They will now be able to choose between syncing over subscribed vs non -subscribed contacts.

How can we allow users to have consistent user experiences for all pre-connection and post-connection integration flows? How can we establish a standard pattern for all integrations while accounting for their unique requirements?

  1. The Shopify and WooCommerce integrations to Mailchimp will now share a consistent pattern for both pre-connection and post-connection flows. This addition will help increase brand recognition and reduce development time/expenses on the business side. Standardizing an aligned pattern for all integration will eliminate friction and add clarity for users no matter the application they choose to integrate into Mailchimp.

Outcome / Release.

Users completion and competency has increased by 30%. User are now able to have a more intuitive experience when syncing data, viewing data, managing settings, and understanding the expected workflow.

In collaborating with stakeholders, engineers, and product managers I was able to produce an overall high-quality product that was useful, useable, and enjoyable. Our research shows that after the new Shopify pre-connection & post connection dashboard were released, the completion and competency rate increased by 30%. Customers abandoned their goal of integrating apps in the past due to the inability to understand the existing workflow, we were losing clientele and decreasing the amount of users who would integrate additional applications. The focus was to implement a better experience for the website’s entry point, data/settings selection, exit point, and to establishment a standardized design globally for all common workflows

Reflection.

How will we continue the standardization of pre-connection and post-connection dashboards?

All new apps being integrated with Mailchimp will have the new design pattern. We will also go into existing designs and re-design them to fit the new design pattern.

Currently, the Goal is to complete 4 integration designs each quarter. So far we have been able to complete the following:

  • Shopify to Mailchimp

  • Adobe Commerce to Mailchimp

  • WooCommerce to Mailchimp

  • Nevemshop to Mailchimp

Challenges to focus on for later:

  • Each integration will have its unique business REQ’s which could impact how consistent our new design pattern is.