Project Overview

Kontxt

Kontxt is an AI platform that helps defeat mobile messaging fraud and improves customer engagement, designed for RealNetworks.

Dashboard

Problem Definition

How to stop spam messages?

According to statistics, an average user receives about 15 messages daily on their mobile devices. But that text notification isn’t always what we expect or want. Spam, fraud messages and smishing have become very common and a real problem for the user. These unwanted messages take the form of a simple message, a link to a number to call or text, a link to a website for more information or a link to a website to download an application. Meanwhile, we often don’t get notified in situations where we are in danger or we anticipate something. So how do we approach this complex problem and improve the overall messaging experience?

Process

Design thinking

By applying the design thinking process, I gained a clear understanding of all user types, their use cases, and the challenges they face with messages.

Discovery

• User interviews

• Personas

• Journey mapping

• Competitive analysis

• Card sorting

Ideation

• HMW questions

• User flows

• Wireframes

• High-Fidelity design

Prototyping

• Prototyping

Testing

• Usability testing

• A/B testing

Implementation

• Final design

• Design handoff

Discovery

User interviews

Findings from user interviews showed that participants (customers) expressed that they want to prevent spam or fraud messages from appearing on their phones so they can fully focus on the useful content they care about.

Persona

Although we identified two types of users of this product, in this phase of the process, a bigger focus was put on the customer (end user). For that reason, I’ve created a persona that represents their needs, goals and pain points.

Journey mapping

Building on the persona created, I created a journey map that shows how most customers (end users) behave when getting wanted and unwanted text messages on their phones, in order to brainstorm potential solution and inform design decisions.

Competitive analysis

Competitors with machine learning capability do have most features considered for this project but most lack a comprehensive yet simple solution (a web app) that is crucial in order to provide the best user experience.

Card sorting

Before diving into ideation phase, the team and I wanted to uncover app users' mental models of how they organize and categorize information on a platform that would analyze and classify text messages. Therefore, we conducted virtual card sorting session with participants, and this was the result.

Ideation

How Might We

I created How Might We questions that helped us better align on user’s tasks and goals:

  1. How might we improve the messaging experience by stopping fraud and spam content for customers (end users)?

  2. How might we provide a platform that would analyze and classify messages while allowing app users to access critical information?

  3. How might we help mobile network operators and brands build customer loyalty and drive new revenue?

Wireframes

Analyzing card sorting data in the earlier phase of the design thinking process helped when I started ideating by creating wireframes where I explored information architecture that would meet app users' expectations.

Pictured below are explorations of the Dashboard page.

User flow

After aligning on the proposal with the team, I created a user flow that helped us define the functionality and the information architecture.

Testing

Usability testing

Later on, a prototype of the potential solution was created for testing purposes. Findings revelead that participants (app users) successfully completed tasks, such as monitoring messages and understanding analytics.

A/B testing

A/B testing showed that participants (app users) prefered Version B of the Dashboard, where the pie chart and the legend use various colors (leveraging color psychology) to communicate message types, citing improved clarity.

Solution

Platform for preventing spam and fraud messages

AI platform that helps improve mobile content deliverability and detects spam/fraud over SMS, voice and IP channels. It helps mobile network operators and brands deliver a better messaging experience for their customers.

Using machine learning, the technology can analyze and classify most message types: Two Factor Authentication, Customer Support, Promotion, Emergency Alert, Notification, Grey Route, Fraud, Spam.

The end result is a spam free messaging experience for customers, more trust in mobile network operators and brands.

Types of users:

  • Customers (end users)

  • App users (mobile network operators, brands)

Outcome

Final design

A comprehensive web app with a clean and easy to use interface. White space throughout the app is used to balance design elements and convey grouping. Message types are presented in various colors to indicate a message type, for instance, green is used for authentication while red for emergency. Having strong and contrasting colors help in better readability, sense of hierarchy and space.

Design system

I’ve designed a scalable design system that covers all use cases that have been indentified for this project. Pictured below are some of the responsive web components, based on the atomic design methodology.

Screens

The screens below show how the web app works when the user is a mobile network operator.

Analytics

Messages

Support Requests

Classification

Notifications

Result

Impact

Users are actively engaging with the web app and completing workflows, as indicated by the metrics. Additionally, reports show a significant reduction in spam and fraud messages for end users.

89%

spam and fraud reduction rate

81%

adoption rate (app users)

92%

engagement rate

Metrics

  • Spam and fraud reduction rate (89%) was calculated by comparing the number of spam and fraud messages before and after the launch of the filtering system, over time.

  • Adoption rate (81%) was calculated by the proportion of users who interacted with the app out of the total user base, since launch.

  • Engagement rate (92%) was calculated by tracking users who performed meaningful actions in the app, such as monitoring messages and interacting with analytics, per month.

  • Data points (via Google Analytics):

    • Segments (to filter users)

    • Event Funnels (to track feature interactions)

    • Dashboards (to visualize and validate engagement)

Project Details

Project details

Role: Product Design, User Research

Client: RealNetworks

Team: Product Designer, Product Manager, Engineering

Tools:

  • Design: Figma, Miro

  • Project management: Jira, Confluence

  • Research: UserTesting.com

  • Analytics: Google Analytics

Year: 2019

Link: Kontxt.com