SECURED
MESSENGER
To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study.
Overview
K Messenger is a mobile application designed for government officials to securely collaborate within their organizations. It is a B2B application with high levels of security.
My Role
Lead UX Designer
As an individual contributor, I was supported by one visual designer.
The ask
Revamp a secure communication application that currently exists. The current application is not user-friendly for the intended audience.
​
-
Prominent security measures - blocks users in the key actions
-
No clarity in features. Complicated flow.
-
Redundant information
-
Outdated design
-
Low performance
UX domains
Strategy | Research | Design
Duration
1.5 Year
This application was developed for both iOS and Android platforms and was not publicly available on App Store or Play Store. The tool was exclusively used by clients from government organizations in the Middle East, who signed contracts to provide it to their employees for communication purposes. I need to redesign a secure communication tool, but unfortunately, I cannot disclose its name due to a non-disclosure agreement.
Understand and define
Understanding the problem
The ‘Ask’ mentioned above, was not elaborate enough to begin the work. I have several inquiries, including:
What is the reason for a redesign? - The purpose
• What are the problems with the current design?
• Who are the intended users?
• How is the business being affected?
• How can we measure success? Key Performance Indicators (KPIs)
• What technical difficulties are present?
How I got the answers ......
​
I held alignment sessions with important stakeholders to gain insight into the problem, establish problem statements, agree on objectives, comprehend the business, vision, and product goals. These sessions were interactive, involving activities like person​al brainstorming, abstract laddering and voting. Following these sessions, I created digital versions for additional alignment sessions, which facilitated persona alignment and story creation.
Digging deep into the application
-
Explored and analyzed the existing application.
-
Conducted heuristic evaluation to capture the severity metrics and showcase the issues to the team.
-
Gathered the technical details from the development team.
-
Researched other applications used in the Middle East region to gain a better understanding of our competitors.
The Before
Existing application
Understanding the users
I conducted surveys to identify users and conducted user interviews to gain insights. I have provided a detailed explanation of my research process.
Comprehensive details regarding the process of recruiting users, constructing a research panel, creating guides, and the obstacles I encountered during the process and how I successfully overcame them.
Findings and Insights
Survey results
The surveys were useful in identifying different user types and gathering quantitative data on the Net Promoter Score (NPS). I found that NPS surveys were a great way to collect customer names. Additionally, I utilized in-product surveys to gather more information and establish a research panel.
To better understand our users, we asked a set of 12 questions about their category, ease of use, information discovery, feature usage, and accessibility.
Few results...
52%
of the users were over the age of 40, we referred to as "grandma users."
31%
of the users were of age between 30-40.
Familiar with whatsapp, Snapchat etc
17%
of the user were of age range 24-30. Frequent user of social media.
32%
of the users used the application everyday.
76%
of the users were of did not share files via the application.
Insights
Conducting user research helped me understand the user's deeper need.
“Communicate SECURELY”
with no fear of breach & no complexity.
The barrier - what’s stopping?
-
Security is too visible - blocks users in the key actions
-
No clarity in features
-
Redundant information
-
Outdated design
-
Low performance
Empathizing with the users....
Aligning with the stakeholders & product team
After analyzing the research findings, I realized that users have varying reasons for using the application. To address this, I created personas to determine which users to prioritize for our application. This approach proved helpful in keeping the major stakeholders focused on the product, design choices, and feature prioritization.
Logical breakdown
STAGES
Upon observation, I noticed that the application had various intricate flows. For instance, the contacts were not sourced from the mobile contacts, but instead added to circles​ by an admin.
To simplify, I suggested breaking down the app flow into logical STAGES. This approach aided in prioritizing features per stage, leading to an efficient build by the product team.
User journey
Creating a user journey has proven to be useful in identifying and addressing edge cases that were not initially considered.
Additionally, this representation has aided in effectively communicating with stakeholders and gaining support for proposed features.
Building the stories
Job story framework
After analyzing user insights, I utilized a job story framework to identify and prioritize real problems that must be addressed. This approach allowed me to convert the insights into actionable tasks.
​
When _____ I want to _____ so I can ______
Few job stories that were defined based on the flow breakdown(Stages):
Job story #1:
Flow: Initiate
Situation: When I am creating a new chat,
Motivation: I want to see both internal and remote contacts,
Expected outcome: so I can choose the contacts to chat without contacting the admin
Job story #2:
Flow: Launch & Explore
Situation: When I am logging in to the application,
Motivation: I want to generate an authorization code myself,
Expected outcome: so I can quickly create an account.
For each flow, we completed these activities to assist with feature prioritization and user story development.
We utilized the 'HEART' framework to map out our success metrics.
The items were categorized as either improvements or opportunities.
Working on the structure
Prioritizing features and building a revised Information Architecture
Given the timeline, I decided to use the Impact-Effort matrix to prioritize the features with the product scrum team. This task was performed multiple times throughout the app development process, in accordance with the flow breakdown and sprints, as the features gained momentum.
​
Mode: Workshop with the product team - Listing down, categorizing and dot voting.
Deadlines…Parallel activities...
Mix of Agile and Waterfall methods
We planned to simultaneously prioritize features, design, and development.
​
Design of each stage (with the features priorities + Design deliverables + Evaluation + handover) was sequenced. After designing and approving each feature, the engineering team proceeded with its implementation.
​
I collaborated with Android and iOS developers to tailor product features for their respective platforms. Simultaneously, I would conceptualize the upcoming feature in the development sequence and work alongside the engineering teams to ensure the current feature was successfully implemented.
My process for each stage...
Iterations and Formative evaluations
I created and refined designs for each stage, reviewing them with product owners and scrum teams. I also conducted formative evaluations with a mix of internal users and a small number of customers, using cognitive walkthroughs as the evaluation method. Below is an example of the design iterations for one particular flow.
Hi-end Designs, Specifications and Documentation
Style Guide
Without a design system in place, achieving a consistent application was challenging. My team member and I created a style guide, which helped align our work with the interaction designs and developers. We also redefined the brand elements to improve the visual aspects of the design.
The After
Updated application
.jpg)
Detailing the flow
I realized that the developers and QAs relied heavily on the UX flow, so I created very detailed task flows to address this issue.
Creating Detailed Specifications
Throughout the project, I generated six sets of documentation (two for each platform I had) to convey the requirements to the engineering team and aid the quality assurance teams in writing test cases.
​
These deliverables included the CX Spec, which covered the requirements and customer journeys, and the Visual Design Spec & Key lines, which contained the design system.
Maintaining this documentation was a significant overhead and required the most rework during the project. Additionally, I created complementary documentation to communicate the animation and timing keyframes for our micro-interactions.
Deliverables
We were unable to use Invision or other cloud-based tools, so we relied on the Sketch Measure plugin to produce specifications. Additionally, we created a significant amount of other documentation.
-
Visual specifications - For 2 platforms and 2 themes
-
Task flows
-
Detailed behavior documents
-
Assets - Icons, logos etc
-
Keyboard behavior document
-
Micro-interaction specifications
-
Gesture documents
Interactions
Long press menu
The previous version of the application had small and unclear features. Users expressed satisfaction with larger touch targets and clear icons accompanied by text.
Recording a voice memo.
Time sensitive messages
The previous version of the application did not have this feature. Our elderly users preferred a dedicated panel​ for recording, playing, and sending instead of the click-record-release method.
The users of this secure messaging app valued its prominent feature - Composing a time sensitive message. The redesign of this feature simplified the process even further. The end users described it as trustworthy and safe.
Validation
Guerilla Testing with the internal users
Two months prior to the launch, I collaborated with the product owner to conduct Guerrilla testing with internal users. Our goal was to test the major workflow of the application and validate our assumptions. This process helped us identify potential issues and prepare for them before the launch.
​
First impression tests
To ensure our re-branding and visual design updates were successful, we conducted first impression tests and gathered user feedback in the form of descriptive adjectives. We then compared our assumptions with user expectations to ensure they aligned.
Usability testing - Summative evaluations
I collaborated closely with the PO and writers to establish the purpose, success metrics, and task list for our session. We needed a larger number of users for these summative evaluations compared to formative ones. The sessions lasted for two months, and we were able to gather quantitative data such as the SUS score, ease of use, and NPS.
Unfortunately, I am not allowed to disclose any specific changes made based on the usability testing results due to NDA restrictions. However, I can say that overall, the product was well-received by the participants, and it achieved a higher NPS score than the previous version that was tested.
The impact
Reflecting back to the goals
The redesign of the K Messenger app on both iOS and Android has resulted in a significant improvement in the security and collaboration experience.
​
-
8 New contracts were signed in the span of 3 months - Big success
-
Daily usage rate increased by 42% (specially by the age group of 40+ ‘ our grandma users).
-
Screen views increased by 21%.
-
File sharing increased by 27%.
-
Dropouts reduced by 52%.
-
Support tickets reduced by 43%.
What Next?
“A successful product is never done or perfect”
-Geoff Teehan, Product Design Director at FB
The above quote is so true. A product is never done and the challenges evolve once it is out into the market.
​
-
We started creating the enhancements list for the next updates.
-
We got back to planning, creating user stories.
-
We also prepared the success metrics for future usability studies to see how well the messenger had been able to justify the user insights that we had collected during the user research phase.
-
We are currently working on the sound design and integration with our suite of applications.