Maaii Encrypted Messages & Secret Chat
Exploring the user experience of end-to-end encryption in instant messaging.
MY ROLE
I worked with another designer during the research process, and responsible to work out all the UI design, user flow and annotation document.
DURATION
March - September 2019
BACKGROUND
Maaii is an app designed for text messages, voice or video calls, and sending SMS. It needed a revamp to modernize all the user experience and interface design in 2015.
During that time, the discussion of “end-to-end” encryption technology was spreading and we need to look into the feasibility of applying this to our instant messaging function. The research and design process was documented and passed to business stakeholders and dev for further evaluation.
THE PROBLEMS
-
Outdated User Interface: The UI design appears dated and lacking modern visual elements like flat design and clean layouts. The outdated design of RMS website made it impossible to attract new restaurants for subscription.
-
Non-Responsive Design: The system was not optimised for mobile devices, leading to poor usability on smartphones and tablets which are now commonly used by restaurant staff.
-
Lack of Feature-based Access: The system could not support feature-based access, creating limitations in planning subscription pricing. And without clarity on the business strategy and subscription model, it is challenging for the development team to effectively plan the integration.
-
Limited Feature Set: The RMS struggles to integrate with newer technologies and third-party services. Its outdated functionality lacks the value necessary to justify a subscription fee from users.
THE GOALS
-
Ensure that the integration of the RMS with MW is closely aligned with the overall business strategy.
-
Help define the subscription model and introduce feature-based access control.
-
Redesign the UI to be more user-friendly, contemporary, and to align with our MW branding.
-
Explore new functionality and implement advanced data visualisation to present restaurant performance metrics.
My Role
Solely responsible for all the hands-on UX/UI end-to-end design process, from initial concept to design implementation. Aaaaaaaaa aaaaaaaaaaaa aaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaaaa aaaaaaaa aaaaaaa aaaaaaaaaa aaaaaaa aaaaaaaaaa aaaaaaaa
Date
May - August 2017
DESIGN PROCESS
Openrice was initially launched in Hong Kong in 1999 as a local web dining guide, and later developed into a one-stop online platform (web and app) with various dining features, such as restaurant reviews, photo uploads, reservations, discount vouchers, etc. Nowadays OpenRice has over 20,000 recorded restaurants and 5.4 millions registered users. It’s the #1 most popular dining platform in Hong Kong.
Openrice Biz was launched in 2016 as a B2B merchant platform specially developed for restaurant owners and employees. The Merchant App (MA) aims to be a one-stop management tool for all daily restaurant tasks, helping restaurants with their digital transformation need.
Previous RMS Website (Launched in 2010)
Merchant Web (2019)
RESEARCH
COMPETITORS AUDIT
In 2015, the demand for secure messaging solutions saw significant growth, driven by heightened public awareness of privacy concerns following events like the Snowden revelations. Major players such as WhatsApp and Apple's iMessage began implementing end-to-end encryption (E2EE), a competitive advantage that quickly set them apart in the market. Niche apps like Signal offered robust encryption features to privacy-conscious users, while Telegram offered encrypted "Secret Chats" but did not apply E2EE by default. Several smaller apps like Threema, Wickr, Cryptocat, Silent Text, etc further distinguished themselves by adding features such as self-destructing messages and secure file sharing.
Tech’s Perspective : Confusions on IA, user roles, and notifications settings.
USER INTERVIEWS
Public awareness of encryption was increasing, but it was largely driven by privacy advocates, journalists, and tech-savvy individuals. Many average users were still not fully aware of how encryption worked or its implications. We have asked 16 colleagues for a quick interview on their awareness about encrypted messages, and to vote for the functions that they think should be included in an encrypted/secret chat room. The final suggested requirement on secret chat was based on the interview result.
Tech’s Perspective : Confusions on IA, user roles, and notifications settings.
RMS Lite - All existing MW users would be subscribed automatically
RMS Standard - All users from old RMS would be subscribed until their contracts expire.
RMS Premium - New subscription required for access to advanced features (eg. Statistics, Social Interaction)
FUNCTIONAL AUDIT
By integrating insights gathered from stakeholder interviews and competitor analysis, I conducted a comprehensive functional audit to identify and document all features and functionalities. These were then categorized into different tiers.
After several discussions, we came up with 3 subscription plans: Lite, Standard, and Premium.
Tech’s Perspective : Confusions on IA, user roles, and notifications settings.
IDEATE & DESIGN
Insights :
Action taken the most : Create booking offer / Create coupon / Verify diner’s offer (scan QR code)
Action taken the least : Check inbox / notifications
USER FLOW
The user flow illustrates the step-by-step interaction between the sender and recipient during secret chat, providing a clear depiction of what both parties can expect to see on the screen simultaneously. It outlines the journey from the entry point to the completion of actions, ensuring a comprehensive understanding of the visual experience for both the sender and recipient.
To help the development team understand all user permissions, we created a specification document summarising all interactions and permissions for these three roles. This document also facilitated discussions on any constraints we needed to consider when designing the final UI.
Insights :
Action taken the most : Create booking offer / Create coupon / Verify diner’s offer (scan QR code)
Action taken the least : Check inbox / notifications
INFORMATION ARCHITECTURE
After completing the card sorting, I mapped out the current RMS architecture and identified areas for integration with different subscription plans. I used the insights to structure the IA by grouping features into logical categories and hierarchies. I also got the dev team to be involved in this stage to ensure technical feasibility and alignment with the new system’s capabilities.
My Role
Solely responsible for all the hands-on UX/UI end-to-end design process, from initial concept to design implementation. Aaaaaaaaa aaaaaaaaaaaa aaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaaaaa aaaaaaaa aaaaaaa aaaaaaaaaa aaaaaaa aaaaaaaaaa aaaaaaaa
Date
May - August 2017
WIREFRAMES
I developed wireframes to help different teams visualise user flows and focus on the structure, layout and navigation. These wireframes were particularly useful for the Statistics section as they facilitated in-depth discussions about data structure and presentation. This allowed us to collaborate effectively with the IT team to assess whether existing data was sufficient for the proposed visualisations. We also shared the wireframes with stakeholders for feedback, refining them based on their input to ensure alignment with project goals.
Users’ Perspective : Confusions on UX copy and clickable area/buttons.
Tech’s Perspective : Confusions on IA, user roles, and notifications settings.
DESIGN
HIGH FIDELITY MOCKUP
In the High-Fidelity Mockups phase, we created additional mockups to visually distinguish the Secret Chat feature from the standard chat interface. These mockups highlighted the specific design elements that set the Secret Chat apart, and helped users easily identify and interact with this feature.
Tech’s Perspective : Confusions on IA, user roles, and notifications settings.
UX/UI DESIGN ANNOTATION
Detailed explanations of all design elements in mockups are documented in a UX/UI Annotation Deck. It helps bridge the communication gap between designers and developers by including notes on functionality, behaviour, interactions and design rationale for specific components. This ensures that the design is implemented as intended, making development more efficient and reducing potential miscommunications during the build process.
Tech’s Perspective : Confusions on IA, user roles, and notifications settings.
View More Works
Boosting conversion rates and driving sales growth through improved user experience, visual consistency and brand identity.
Revitalising the brand Identity and enhancing digital presence with a modern UX/UI approach.
Redesigned the one-stop restaurant management app, contributing to a 116% increase in restaurant subscriptions.
