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, the average person receives around 50 messages per day on their phone, but not every notification is something they actually want.
Spam, fraud messages, and smishing have become very common and a real problem. 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, and the challenges they face with messages.
Discovery
• User interviews
• Personas
• Journey map
• Competitive analysis
• Card sorting
Ideation
• HMW questions
• User flows
• Wireframes
• High-fidelity design
Prototyping
• High-fidelity prototype
Testing
• Usability testing
• A/B testing
Implementation
• Final design
• Design handoff
Discovery
User interviews
Findings from in-person 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 (app users and customers), in this phase of the process, a bigger focus was put on the customer. For that reason, I’ve created a persona that represents their needs, goals and pain points.
Journey map
Building upon the persona depicted earlier, I created a journey map that shows how most customers 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:
How might we improve the messaging experience by stopping fraud and spam content for customers?
How might we provide a platform that would analyze and classify messages while allowing app users to access critical information?
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 from in-person testing showed that participants (app users) successfully completed tasks, such as monitoring messages and understanding analytics.
A/B testing
Additionally, I conducted in-person A/B testing on the Dashboard page to analyze how users interacted with one of the key charts “Messages Today”, and to determine which of the two versions they preferred and why.
Version A
Version A used various shades of the blue accent color to represent a pie chart and a legend that show different message types. The assumption was that using various shades of one color would communicate message types and urgency. Meanwhile, participants (app users) struggled to distinguish between different types due to low information scent.
Version B
Version B explored an idea of representing the pie chart and the legend in various colors to communicate message types, leveraging color psychology. Testing revealed that participants (app users) prefer this version. The sentiment was that colors symbolize message content more clearly than the shades of just one color. We went with this solution.
Solution
Platform for preventing spam and fraud messages
An 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.
User types: app users (mobile network operators, brands), customers.
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.
The screens below show how the web app works when the user is a mobile network operator.
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.
Analytics
Messages
Support Requests
Classification
Notifications
Result
Impact
Analytics indicate strong user engagement with the web app and high workflow completion rates. Additionally, reports show a significant reduction in spam and fraudulent messages received by customers.
89%
spam and fraud reduction rate
81%
adoption rate
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 based on users who performed meaningful actions in the app, such as monitoring messages and interacting with analytics, per month.
Project Details
Project details
Role: Product Design, User Research
Company: RealNetworks
Team: Product Designer, Product Manager, Engineering
Framework: Agile
Tools:
Design: Figma, Miro
Project management: Jira, Confluence
Analytics: Google Analytics
Year: 2019
Platform: Web
Link: Kontxt.com