API Group
2021-22
Web Application
Echo Communication Channel
A centralized system designed to manage communications at Retailio as part of the Admin Panel
OVERVIEW
Retailio is India’s fastest growing B2B ordering platform connecting pharma retailers with their distributors seamlessly.
​
Echo is Retailio's centralized tool to create, manage and measure the conversion of all communications at Retailio across its retailer, partner and distributor products.
ROLE
User Research
UX & UI Design
Testing
​
​
METHODS
Research
Conceptualization
Ideation
User Interactions
Stakeholder Feedback
Wireframing
Usability Testing
Prototyping
STAKEHOLDERS
Product Managers
Developers
Marketing Managers
QA
Business Leaders
Why did we do it?
Retailio has been using Mixpanel’s 'messages' feature for driving marketing campaigns and offer promotions since Nov '2019. Recently, we have been leveraging this feature to also drive RIO Brands initiatives where Push Notifications and In-Apps drive various monetized campaigns for us. With this feature getting deprecated, it becomes critical to continue our communication strategy through other channels.
How did we do it?
Project approach and stakeholder management
#1
DISCOVERING INSIGHTS
Collaborated with the product manager to uncover user insights and define the target metrics to be achieved.
#4
DESIGNING
& TESTING
Designing Hi-Fi wireframes and prototyping variants to test with users in order to validate product usability. Working on feedback to better user interactions with the product features.
#2
DESIGN
STRATEGY
Sketched out functional flows and created high-level wireframes to discuss with business and product stakeholders in order to validate the mapped approach.
#5
DESIGN WORKING
SESSIONS
Creating detailed user interfaces and prototyping to present user flows based on all identified user stories to tech stakeholders. Feedback from developers with reference to development timelines and iterating on designs to meet tech feasibility.
#3
DEFINING
THE SCOPE
Ideated the product roadmap and defined the scope for the first version based on prioritized user requirements and business feedback.
#6
DESIGN
HANDOFF
Working with developers throughout the development process after design handover to ensure that the product is shipped out with minimum or no compliance errors.
The design process
A user-centric approach was applied via the design thinking framework as outlined below. We undertook product benchmarking and conducted user interviews by interacting with the end users to discover their pain points with the existing solution. This helped us validate and redefine the core features to help deliver a complete and evolved user experience and meet business needs.
Problem
Research
Define
Ideate
Prototype
Launch
The Problem
How might we?
Design a centralized solution to help encapsulate the process of creating and managing all transactional and marketing communications.
Take a campaign first approach,
give users more control.
Design an easy-to-use system to create and manage multiple channels under one single campaign keeping adaptability in mind.
Help users manage channel effectiveness
A live view of campaign metrics at a dashboard level to measure conversion.
More flexibility for users to drive communications.
Let users edit content, audience, and delivery parameters and give them the choice to activate/deactivate channels at any point in time for an already published campaign.
Design a future-proof and scalable solution
Consider feature upgrades via additional plug-ins in the upcoming versions while designing the interface.
create a master product centered around usability and a saas saleability towards other businesses.
Research
User Insights
We asked the users about their experience with multiple 3rd party tools to understand and map the scope for an upgrade!
Less cognitive load is a need in addition to increased usability.
Riddhima
Why can't I choose multiple types of channels together under one event when creating a message in mixpanel?
Mixpanel only has In-apps, PN, and SMS channel capabilities. I have to use Gupshup for WhatsApp and telegram. And Mailchimp for emails.
Prateek
I can't edit live campaigns on mixpanel, I have to duplicate the event and then delete the live one, make changes to the duplicate item and republish it.
​
​
​
​
Akanksha
I have to create multiple channels separately in mixpanel and then define audience and delivery for them again and again. I'm used to it now although it is really time intensive.
​
​
Shreyansh
I need campaign statistics at a channel level in one place. In mixpanel, I can only see one channel at a time. So to measure the effectiveness of the campaign I need to pull the data multiple times and from multiple sources and then compare it manually.
​
Saumya
Mixpanel is intuitive and responsive but why is it only for marketing purposes? I have to go through the Rio backend to configure transactional messages. Can't we have it all under one tool?
​
Vidhi
Can't pull data from redshift, I have to copy-paste audience data manually.
A/B testing feature is a plus and it helps us a lot. But we also need multi-lingual support to be able to send customized messages based on customer's geo-location.
​
Wants to be more efficient with her time and manage campaigns effectively. Needs a centralized tool that enables multiple channel management.
Needs a one-stop solution to drive all marketing and transactional messages in a centralized manner.
The user wants more control.
Wants flexibility in defining the audience and delivery criteria. Emphasizes on A/B testing, and Multi-lingual message customization feature as a need.
The user is prone to making changes mid-way into the campaign and the current solution isn't meeting the user's needs.
Wants to measure the effectiveness of communications from one place, and wants to visualize the metrics efficiently.
Research
Competitive Analysis
Studying the competitor products to identify market gaps
Products
Overview
-
Plan- starting $25/month
-
Features- Analytics, data collection, exports, and integration, data governance, and messages(depreciated)
-
Channels- Push Notifications, In-apps, and SMS
-
Costs between 0.1-0.66 cents per message received or conversation initiation.
-
Features- Auto Intelligent Routing, Auto Template Translation, User Preference Management, etc.
-
Key channels- Whatsapp, RCS, GBM, Instagram, and SMS
​
-
Up to 100,000 contacts costs $605/month
-
Engage across 30+ messaging channels
-
Features include-Auto Intelligent Routing, Auto Template Translation, User Preference Management, etc.
-
Key channels- Whatsapp, RCS, GBM, Instagram, and SMS
Strengths
-
Behavioral frequency analysis
-
Custom session and events
-
Multi-channel via PN, In-apps, SMS (depreciated)
-
Engage across 30+ messaging channels
-
Single API omnichannel solution
-
Increased efficiency with pre-approved messaging templates
-
E-mail scheduling
-
Customer journey builder
-
Pre-built journeys
-
A/B and multivariate testing
Limitations
-
The messages feature is being depreciated, the platform can no more be used to drive communications beyond December 2021.
-
No integration is available for In-apps, E-mail, and Push Notification channels.
-
Is an e-mail channel-specific solution and therefore limits other channel integrations.
-
Not very cost effective
Define
Opportunity mapping
Mapping the opportunity space to give structure to the desired output
In order to drive our new communication strategy, there are certain guiding principles that we need to keep in mind before building a solution in-house. The new communications platform should be;
​
-
A centralized tool for all communications at Retailio
-
Able to measure conversion across channels.
-
Manage multiple channels under one event at a campaign level.
-
Allow content, audience, and delivery settings editing capabilities in real-time.
Keeping into consideration the above principles, we would not be able to achieve this via a 3rd party tool. As Retailio scales, it becomes essential to have more control and flexibility in terms of how we want to drive our communications. With this, we plan to drive all marketing and product communications via Megatron itself. Hence, all transactional and non-transactional communications would be encapsulated under a centralized communications platform - Echo.
Define
Users
Who are our users and what are their
behavioral patterns?
Target Users of Echo
At the center of this communication tool are two specific user cohorts-
​
-
Folks from the marketing and communications team who create and manage multiple outgoing campaigns
​
-
Product administrators who drive transactional messages via different channels to help provide instant gratification to consumer actions.
User Behaviors
Working in a hybrid, collaborative and fast pace environment, our users tend to be-
​
-
Constantly working against the clock to execute tasks in between a calendar full of meetings.
​
-
Handling multiple campaigns and roles to keep their TAs engaged with the product/service.
Define
White Boarding
Aligning business goals and defining user needs
Echo system
Proposed functional flow
Compose Templates
Transactional/Non
Transactional
Target Audience
Eligible/Custom
Event Delivery
Recurring/ Non
Recurring
Platforms
Android, iOS, web
Retailer
user
Channels
PN, SMS, E-mail, WhatsApp, Telegram, In-apps
Platforms
Android
Salesman
user
Channels
PN, SMS, E-mail, WhatsApp, Telegram, In-apps
Output Metrics
-
Channel Effectiveness or Channel Conversion Rate
-
# of conversions / # of messages sent (for each channel)
-
-
Customer satisfaction
-
Non-transactional messages per day, week, or monthly per retailer across different channels
-
Check metric
-
# of opt-outs
-
# of disabled/blocked
-
User needs
#1
MULTI-CHANNEL
FLEXIBILITY
Define multiple channels when creating an event- Have a campaign-first approach
#4
EDIT LIVE CAMPAIGN
Play/pause, edit composed messages, redefine audience and delivery settings at a channel level for published campaigns.
#7
MULTI-LINGUAL
SUPPORT
Enable users to compose messages
in multiple languages at a campaign level for all channels.
#2
MESSAGE PREVIEW ON THE GO
Enable users to view their compositions in real-time to help them with decisionmaking at an early stage.
#5
AUDIENCE DATA INTEGRATION
Enable option to pull data from pre-established redshift tool in addition to manual cohort creation.
#8
ENABLE
A/B TESTING
Design feature that enables users to test variants by slitting the audience pool into two halves.
#3
EASY CHANNEL SWITCHING
Unified dashboard to easily manage multiple channels. Copy content audience and delivery settings across the campaign.
#6
EFFECTIVENESS ANALYSIS
Check and manage channel level conversion for a published campaign.
Ideate
Functional structuring
Information Architecture
.png)
.png)
Ideate
High Fidelity Sketches
Digital Wireframes
.png)
STEP 3
Add Delivery details
The final step in the process of making a channel ready to publish is setting up and defining the delivery parameters.
Here, the user again selects from a pool of options to suit their need to customize the time of delivery in order to maximize the effectiveness of the campaign.
STEP 2
Define Audience
The user's natural behavior after having composed the message to be delivered is defining whom the message is meant for. In this step, the user can choose from 3 options here and accordingly define and get a real-time view of the projected reach as summary.
Experiment with real-time preview
For the In-app channel, enabling different variations of sizes to fit different promotional use cases and placements across the retailer app interface.
Real-time preview to visualize the end-user experience and make changes before publishing campaigns if necessary.
​
​
STEP 1
Compose
A dedicated panel consisting of all required tools to enable the user with the freedom to experiment and compose a variety of combinations. Configurable"advanced settings" to define content interaction and create a paved-out journey for the customer.
Campaign details
The top shelf goes to campaign-level details and actions followed by channel tabs for easy navigation.
​
A step-wise breakdown of pre-requisites at a channel level with reference to the user's behavior in going about the campaign creation process.
Summary
A summary helps user verify the information entered before user moves on to the next channel or publishes the campaign.
Prototype
The development handover
What the final experience shaped into
Channel status
.png)
Real-time preview
An interactive tool to view the message type in real-time collapsed and expanded form.
Freedom of composition
Enabling users to play around with the copy, and add emoticons and hyperlink to help make PNs stand out for the end user.
Easy toggle for advanced interaction
Utilities for special cases are enclosed under the "Advance settings" toggle that enables user to define deeper level of content interactions.
Interactive choices
Using visual cues to help user to make a decision to choose between available options for message type under the In-App channel
See through the end user's eyes
A real-time preview of how the composed content will be viewed by the end-user helps mitigate changes in the long run.
More control over defining audience
Enabling the user to choose from available options and define the audience accordingly. The options are designed with all use cases being accounted for.
Projected reach
A manual refreshable count of eligible users for the campaign as per defined audience.
The power of controlled delivery
Letting users define the exact time and date of delivery and configure exclusion days.
Auto status control
Once all pre-requisites are fulfilled, the status of the channel is changed automatically to active and this is highlighted for the user with a tooltip. The user now has control to toggle the status to inactive if they wish to not publish the specific channel.
Campaign summary
What we learned from testing the prototype with the users was that they were vulnerable to publishing campaigns with certain channels left undefined, to avoid them from making such mistakes, we decided to introduce a campaign-level summary whenever the user decides to publish. This not only helps them summarize the eligibility but also helps them refrain from having to check all channel level tabs and confirm individually before deciding to publish the campaign.
Pre-requisites to create a campaign
Using a bridge modal between the dashboard and campaign creation tool page helped us set a certain user behavior where the user defines the campaign details prior to moving further in the journey. This helps us avoid populating error flags in the later part of the journey, thereby reducing friction and surging product usability.
The Echo dashboard
The portal reception to create manage, and navigate across multiple campaigns.
Analytics
Using a modal window to help measure the campaign conversion and compare effectiveness of channels.
When we showed the digital wireframes to one of the users,
they asked-
"What if I miss out on defining audience or delivery settings for a channel? Will I still be able to publish it?"
This is when the user suggested that if we could have channel-level statuses it would help.
​
This helped us iterate and come up with a status indicator placed in line with the channel tabs and a dropdown annotation to help the user take control of choosing what channel and when to publish based on readiness.
​
Takeaways
The Learnings
Key learnings from the project as a UX designer
Communication is the key
Always be in sync with the stakeholders, specifically the Developers. This helps mitigate misalignment and helps boost productivity.
Consider Natural scanning patterns
People in the Western world usually read left to right and from top to bottom. A design that goes against this pattern will present a learning curve for your visitors. Well-designed websites typically layout their content in a “F” reading shape or “Z” reading shape.
Navigation is the cornerstone of usability
It’s the main interaction technique on the Internet. Having a good navigation is crucial for ensuring that users can find what they’re looking for.
Reduce user’s journey to destination
Always keep the three-click rule in mind, which says that your users should never be more than three clicks away from what they are looking for.
Design for all developmental phases
As a designer, we imagine designs holistically and design the entire experience in one go, but the development happens in stages so keep in mind to design for all those stages so that your developing team is able to see the feasibility of the design without getting overwhelmed.
Don't be afraid to fail
Quick iteration and multiple stakeholder feedback help you fail fast, unlearn and learn new ways of looking at problems. It helps you defend your designs with logic and boosts your confidence as a designer.
UX copy can make or break an experience
Consider working on more human tonality and language while designing your website. If possible, understand and learn more about the TA's task vocabulary, this will aid better decision-making.