Call Filter upsell
verizon // 2020-2021

BACKSTORY & Objective

Verizon’s Call Filter mobile app (built by TNSI, formerly Cequint) screens incoming calls to protect users from scam callers. Call Filter also provides insights to types of spam, their associated risk levels, and other analytics. There are two main license states: paid and free. The task was to design a new upsell page that converts free licensed users to paid. The upsell needed to highlight the new and existing paid features and provide a CTA inviting users to subscribe.

Team

Sr. UX Designer (me), UX manager, and Sr. Project Manager. Review cycles with the UX manager followed a weekly cadence; with Sr. Project Manager, a biweekly cadence.

Tools

  • Keynote (rough concept)

  • Sketch (concept and final)

  • After Effects (GIF production)

  • Lucid Chart (documentation)

  • Teams

  • OneDrive

Responsibilities

Brainstorming, wireframing, concepting, final product, documentation

Challenges

Incorporate Verizon’s, at the time, new brand guide which entailed predominant black and white usage and little color.

RESEARCH AND Process

I began examining upsell pages and components associated with subscription-tiered products, such as those found on platforms like Spotify, Netflix, and other streaming services. While I also considered competitors like Robokiller and Hiya, their approaches seemed somewhat repetitive, presenting free and paid features in a basic column format with clear calls-to-action for making a purchase.

In addition to competitor analysis, I studied Verizon's website to identify design patterns and assess how we could align our work more closely with their brand, considering Verizon was a client of TNS. The purpose of this investigation wasn't to copy but to understand what works and what doesn't. Our goal was to showcase the paid features of Call Filter in a way that went beyond a simple feature comparison.

I conceptualized some static designs in Sketch and collaborated with the UX and Project managers for feedback. During these discussions, I expressed a desire to incorporate animations, either through coding by our developers or by using After Effects. To communicate these ideas effectively to Verizon, my PM requested I created rough animations in Keynote, making it easy for him to share them with Verizon stakeholders. Once Verizon approved the concept, we proceeded with internal review cycles. The animations consisted of existing UI within the app that captures the paid features. They needed to be exaggerated in the upsell demonstration to capture user interest.

Earlier concepts containing vertical pagination.

For the developers, I produced a Sketch document that included annotations for the animations. Additionally, I created individual animations in After Effects, exporting them as GIFs due to time constraints and available development resources. During reviews with my UX manager, we focused on the timing and smoothness of each animation. Toward the end of our iterative review phase, it was decided we to switch the orientation of the feature slides from vertical to horizontal, aligning them more with patterns within the app rather than the website. The upsell is found in the Call Filter onboarding flow, and triggered in certain pages within the free version of the app.

Outcome

After delivering assets to dev, the internal Call Filter interaction guide needed to be updated with the new Upsell screens. The upsell design went live in Fall 2021.

Final product!

Early low fidelity concepts

I explored a variety of concepts; some were more visually similar to what Call Filter has used in the past for feature comparison for paid and free subscription tiers. The others explored use of animations (using placeholders in this version) with write ups of each feature. Reviewing these concepts, we (me, UX manager, and PM) landed on the more visual-centric concept on the far right that was easy for our devs to implement with respect to their bandwidth.


Additional concepts

As I progressed through the concept phase, I started refining design components that I’d ultimately export into After Effects.