WHATSAPP ︎
Chib-bot is a new way for users to sendmoney through WhatsApp
Chib-bot is a WhatsApp based bot designed to conduct money transfers within Chib, an online banking service. All transfers are conducted securely through text.
Metrics
As a result of my design iterations and implementations,
we noticed the following performance increases:
Metrics
As a result of my design iterations and implementations,
we noticed the following performance increases:
43% ︎︎︎ in user activity
39% ︎︎︎ in overall transfers
32% ︎︎︎ in register invites
73% ︎︎︎ in ticket optimization
Problem
It was clear that it was time for us to expand Chib to include a new messaging system that could attend to common user requests and queries.
Too many transfers for one team to handle
Chib is a money transferring platform that assists users in sending remittance to family via our web, app, and messaging portals. As Chib’s user base began to grow, our communications team had increasing difficulties being able to attend to every user’s need via messaging.It was clear that it was time for us to expand Chib to include a new messaging system that could attend to common user requests and queries.
“How can we simplify money transfers within WhatsApp to alieviate our communication team’s workload?”
Solution
A Chat-bot for money
I designed for Phase I and II of Chib’s DTC Chat systems, using research to explore and address common user frustrations, and using API bot integration through WhatsApp to design an internal messaging system.
Chib-bot as designed in Whatsapp has the ability to
View your balance, make transfers,
![]()
A Chat-bot for money
transference needs
I designed for Phase I and II of Chib’s DTC Chat systems, using research to explore and address common user frustrations, and using API bot integration through WhatsApp to design an internal messaging system.Chib-bot as designed in Whatsapp has the ability to
01 Conduct monetary transfers
02 Answer customer queries
03 Provide transference history
03 Provide transference history
04 Deliver notifications
View your balance, make transfers,
and invite friends to register
All without leaving WhatsApp.
Main Goals
To understand user perceptions and motivations for utilizing customer support by evaluating user and business needs
User needs
01
Discover the main reasons why users
choose to use our over-the-phone
assistance line.
02
Scale down our findings to only the
user essentials for our MVP.
03
Understand the typical user walkthrough
for conducting money transfers with Chib
01
Discover the main reasons why users
choose to use our over-the-phone
assistance line.
02
Scale down our findings to only the
user essentials for our MVP.
03
Understand the typical user walkthrough
for conducting money transfers with Chib
Business needs
01
Differentiate between issues that are
best resolved via bot and which are best
suited to the communications team.
02
Keep our bot’s branding consistent with
the language, design, and functionality of Chib.
03
Discover limitations and advantages of
designing within WhatsApp’s API
01
Differentiate between issues that are
best resolved via bot and which are best
suited to the communications team.
02
Keep our bot’s branding consistent with
the language, design, and functionality of Chib.
03
Discover limitations and advantages of
designing within WhatsApp’s API
What is the ideal interaction
model that would minimize
user’s struggles and prevent
an overwhelmed
communications team?
What is the ideal interaction
model that would minimize
user’s struggles and prevent
an overwhelmed
communications team?
model that would minimize
user’s struggles and prevent
an overwhelmed
communications team?
Hypotheses
Key questions for our research
Key questions for our research
📱 What are the most prevalent reasons that users are utilizing our over-the-phone assistance line?
🤖 Which issues are best resolved via bot and which are more suited to the communications team?
🤔 How can we resolve these struggles given the limitations and advantages of designing within WhatsApp’s API?
White paper research
I wrote a report detailing information on
WhatsApp’s API in relation to functionalities
that we need to know before designing
I wrote a report detailing information on
WhatsApp’s API in relation to functionalities
that we need to know before designing
WhatsApp’s API in relation to functionalities
that we need to know before designing
01 Learning how to prevent
common WA based errors
02
Knowledge of API constraints,
ex. bot communication is
limited to action/trigger
words and numbers
03Understanding of common
conversational flows
Changing direction
A Pivot
A Pivot
User Interviews → Ticket Synthesis
User Interviews were initially selected as the best method for determining user motivations, where we could speak with users and our communications team directly.
However, we eventually decided on conducting analysis using support tickets, or records from the communications team describing incidents reported to them from users.
Why did we choose this method?
Synthesizing ticket reports from the communications team was time effective, at no excess cost, and most importantly, fallowed us to view a history of documented user problems (rather than risking error by asking users to recall them by memory).
User Interviews were initially selected as the best method for determining user motivations, where we could speak with users and our communications team directly.
However, we eventually decided on conducting analysis using support tickets, or records from the communications team describing incidents reported to them from users.
Why did we choose this method?
Synthesizing ticket reports from the communications team was time effective, at no excess cost, and most importantly, fallowed us to view a history of documented user problems (rather than risking error by asking users to recall them by memory).
Primary research
Support Ticket Synthesis
(n = 808)
Support Ticket Synthesis
(n = 808)
Process
![]()
1. Gathering and organizing
all
our ticket data in one place
1. Gathering and organizing all
our ticket data in one place
In total, we pooled reports together to find
that 1,582 independenct users were listed
as having used our WhatsApp service
2. Omitting irrelevant data
Such as tickets that got mixed with that of
outside teams, (engineering team, graphic
design team, etc)., accidental repeats of
tickets, QA test users, and reports with key
missing information (n = 808).
2. Omitting irrelevant data
Such as tickets that got mixed with that of
outside teams, (engineering team, graphic
design team, etc)., accidental repeats of
tickets, QA test users, and reports with key
missing information (n = 808).
2. Omitting irrelevant data
Such as tickets that got mixed with that of
outside teams, (engineering team, graphic
design team, etc)., accidental repeats of
tickets, QA test users, and reports with key
missing information (n = 808).
3. Converting data into
descriptive statistics
Data sets were then converted into
nominal data, with consideration taken to
calculate(1) Frequency distribution and
(2) Measure of
central tendency (mode).
3. Converting data into
descriptive statistics
Data sets were then converted into
nominal data, with consideration taken to
calculate(1) Frequency distribution and
(2) Measure of central tendency (mode).
4. Data Visualization
Providing graphics depicting our findings
4. Data Visualization
Providing graphics depicting our findings
Key research insights
Users mainly utilized Chib’s WhatsApp
communications team for the following reasons
communications team for the following reasons
🧠 To speak directly to agents over account issues because they were already familiar with WhatsApp (35.5%)
Agent Assistance
📖
Transference
Ability to conduct processes relating to transfers via WhatsApp was done because it was easy to share with friends & family (48%)
Ability to conduct processes relating to transfers via WhatsApp was done because it was easy to share with friends & family (48%)
⌨️
To view their balance because it
did not require having to log in using the web or app (20.9%)
digital architecture
User Flowchart
Mapping out our conversational design into
something
more tangible and cohesive for engineers.
Tracking output dialogue was the most important part of documentation, with inputs limited to specific numbers and variations of key words.
Focus was placed on three main inputs for our user to choose from that divulge into different actions.
Focus was placed on three main inputs for our user to choose from that divulge into different actions.
prototyping
Flows and UI Visuals
Mock up samples were designed in order to present to
our clients
what our future rollout would look like.
Prototypes were categorized as either part of the general flow or as error screens, using WhatsApp’s system design for the UI design.
One of the most important aspects of this rollout was the organization of Figma prototypes to include descriptors, states, experiences, flows, and engineering notes. This allowed engineers assigned to other projects to jump in with minimal context if necessary.
One of the most important aspects of this rollout was the organization of Figma prototypes to include descriptors, states, experiences, flows, and engineering notes. This allowed engineers assigned to other projects to jump in with minimal context if necessary.
system design
UI
Abiding guidelines
Because this was an API heavy project, visual design was predetermined by WhatsApp’s existing system design. Care was taken to rebuild the WhatsApp library in Figma to include guidelines for margins, typography, colors, spacing, layouts, and components.
Abiding and localizing existing UI in Figma was essential for not only creating prototypes, but also campaign designs.
Abiding and localizing existing UI in Figma was essential for not only creating prototypes, but also campaign designs.
Elements of WhatsApp’s Branding
WHATSAPP ︎
How it worksSimplifying money transference with Chib-bot
Balance
Users can view their balance,
Users can view their balance,
taking into account different
currencies and best exchange rates
Transfer
Make an instant transfer to people within your circle, all without leaving WhatsApp
Customer Service
Contact an agent directly to recieve assistence for any qualms or queries
Contact an agent directly to recieve assistence for any qualms or queries
Recommend
Recommending Chib to friends is easy - just send our bot their way to help them register
Bonus
Considerations for a final handoff
Considerations for a final handoff
Design Team
Before and after autolayout
Organizing & updating all designs and templates
Research Team
Sample of final findings
Summary of report & data sorting for future researchers to be able to replicate and analyze our study
Takeaways
43% ︎︎︎ in user activity
39% ︎︎︎ in overall transfers
32% ︎︎︎ in register invites
73% ︎︎︎ in ticket optimization
Impact
43% ︎︎︎ in user activity
39% ︎︎︎ in overall transfers
32% ︎︎︎ in register invites
73% ︎︎︎ in ticket optimization
Personal︎
1 Steph believes in keeping tech design accessable and transparent, so if you have any questions regarding any designs, just send an email and I’ll be sure to get back to you!
Citations
Nair, S. (2022, February 9). Designing a WhatsApp chatbot? Designing a WhatsApp Chatbot? Retrieved August 29, 2022, from
https://www.haptik.ai/blog/designing-whatsapp-chatbot
Twilio. (n.d.). Conversations api. Twilio. Retrieved August 29, 2022, from https://www.twilio.com/messaging/conversations-api
Twilio. (n.d.). Programmable messaging API. Twilio. Retrieved August 29, 2022, from https://www.twilio.com/messaging/programmable-messaging-api
Twilio. (n.d.). Conversations api. Twilio. Retrieved August 29, 2022, from https://www.twilio.com/messaging/conversations-api
Twilio. (n.d.). Programmable messaging API. Twilio. Retrieved August 29, 2022, from https://www.twilio.com/messaging/programmable-messaging-api
THANKS FOR READING
LET’S WORK TOGETHER ︎︎
LET’S WORK TOGETHER ︎︎
PORTFOLIO © 2024