Bulk functionality for CallRail’s Google Ads integration
A complex, upmarket-focused solution that also served as an opportunity for process definition and mentorship
What
A way for users who have multiple Google Ads integrations to bulk-authorize with their Google account during setup or when restoring failed integrations.
Why
CallRail’s previous UX only allowed users to authorize these integrations one-by-one, which meant the process of setting up, restoring, or deactivating multiple integrations could be mind-numbingly slow and repetitive for customers with 10s or 100s of Google Ads integrations. A bulk authorization functionality would save these multi-integration users time, while ensuring CallRail stayed competitive as we sought to scale and “win upmarket” (a key 2023 initiative).
The UX team bonus
UX leadership assigned this complex project to the UX Principal and me with the goal of setting a precedent for cross-functional collaboration. We were also assigned to train and mentor a more junior UX designer throughout the project as a way of piloting a new junior-senior pairing model.
Technical constraints
Due to limitations in engineering resources, this project faced several technical constraints. These were:
Our setup flow could not use a wizard
Backend architecture for how integrations were created could not change
Frontend architecture of existing pages had limited latitude to change (e.g. I couldn’t ask to reorder/remove all the wells)
Rollout/onboarding could only utilize Pendo prompts, instead of a fine-grained, custom solution
The existing single-integration experience
The existing Google Ads integration offered no setup flow. Through user interviews and FullStory research, we discovered that this lack of guidance for our users meant that many folks were missing two key prerequisites for activating their integration:
1) a website pool (automatically rotating group of phone numbers that allows different website visitors to call different tracking numbers), and
2) a JavaScript snippet (line of code on the CallRail user’s website that allows CallRail to track a visitor’s journey).
Raising understanding of these prerequisites was a key consideration for my content.
Our solution
1. A multi-step setup flow (what I like to call a “deconstructed wizard”) to guide new users through the rather complex setup requirements in as clear a way as possible.
Intro page telegraphs the flow, mirroring the side navigation.
Requirements are identified and setup links provided for each requirement.
Text takes the user through sign-in and account-matching actions.
The account-matching screen surfaces any missing requirements (2 companies are missing a website pool in this example) and offers a link to address the issue.
2. A reimagined content hierarchy on the active-state pages that allows users to a) review conversion settings for each integration in the group on a single page, b) make bulk-edits to the group, and c) export conversions for, and make edits to, each integration separately.
3. New UX on the “Manage integrations” page to a) surface the existence of a bulk Google Ads integration group, b) allow users to know the overall status and size of the group, and c) drill down to review individual companies within the group. Text links allow navigation to both the new group integration page and existing individual integration pages.
4. A rollout strategy using contextually launched Pendo modals to raise feature awareness. This example is a tour of the new active-state page that launches on first visit, and was especially geared toward existing customers who were navigating this new feature.
How did we get there?
The project moved through phrases that the UX Principal and I defined as 1) understanding the problem, 2) achieving alignment, 3) solutioning, and 4) refinement. While these phases could overlap and be cyclical, they roughly map to our working artifacts.
In our role as new members of UX leadership, the UX Principal and I were committed to defining these phases and showing our work at each step in order to model cross-functional partnership and create as many learning opportunities as we could for our team (and ourselves).
Understanding the problem
A kickoff sync with the UX team and the Principal Product Manager was followed by a UX team debrief, UX team sticky note jam sessions, and FullStory investigations to identify and better understand our target user.
This user had to reauthorize Google Ads 55 times in a row—a great example of who this project was designed to help
Achieving alignment
The UX Principal and I led brainstorm sessions with our design mentee, our Principal PM, and our Engineering partner, featuring more sticky notes and some sketching to ensure we were all on the same page regarding the problem and goals.
Sticky notes to capture ideas and alignment, plus art-school worth sketching
Solutioning
Digging around in the UX pantry, we moved from fat-marker sketches (content-blocking and storytelling) to lo-fi wireframes (introducing a dash of interaction design to my content). We took this work to “gut check,” a new, required step in CallRail’s design process where teams presented to UX and Product leadership for guidance and sign-off on their initial design direction. Working in lo-fi allowed us to stay flexible with our design proposals and make sure that we were leading with a clearly defined story. Modeling this lo-fi-first, content-led practice to the UX team was a key mentorship goal during this project.
Lo-fi wireframes let content get a bit more specific
Next stop: flowcharts, where I began defining information and content hierarchies that my design partners could represent as interactions, which they did in the mid-fi phase. We were now ready to begin technical and UI refinement.
The content proposal for a multi-step setup is realized
Fat-marker sketches captured initial content requirements
Flowchart to capture configuration decisions a user would make
Refinement
Mid-fi designs allowed us to run several rounds of refinement with the PM and engineer in order to verify feasibility and iterate as necessary. Once technical considerations were polished, we moved to final hi-fi refinement in partnership with the Design Systems Manager and our UI design specialist.
As CallRail’s 3 UX Craft Leads, the Design Systems Manager, the UX Principal, and I were responsible for making sure the new setup pattern this project introduced was documented and formalized for future use.
Next steps
As my time at CallRail came to a close, this project had just moved into development, and is slated to go live in Q4 of 2023.