Element X: A Strategic Redesign for Secure Messaging
Company
Year
2023-2025
Project Type
Zero-to-one
Skills
UX, Visual design, Design system, Management
Platform
iOS, Android
Role
Design lead across two squads
Here's how we turned a legacy product into a modern, trusted platform for governments and global institutions.
🧭 Summary
Problem
Our legacy mobile app was a liability - slow, complex, and filled with technical debt. It was actively hurting user trust, adoption, and revenue.
Oppurtunity
Rebuild the experience from scratch, rethink the UX, and create a new design language to match the trust and scale of our mission.
Role and responsibilities
I led design across two cross-functional squads - iOS and Android.
I led two designers for this work - a junior product designer as well as a design systems designer. I also partnered with a product manager, an engineerng manager and leadership to define vision, and strategy.
I drove execution from system-level thinking down to interface-level craft.
Outcome
We shipped Element X, a redesigned, native-first, accessible messaging platform trusted by organizations like the US Navy and the UN. It launched with higher performance, cleaner UX, and a scalable design system that accelerated our roadmap.
📈 Increase in subscription revenue by 30% within the first year, and by sevenfold after adding the PRO offering.
📡 Context
Element is a secure, open-source messaging platform built on the Matrix protocol—used by organizations like the US Navy, NATO, and the UN. It’s designed for sovereign teams who need control over their communications infrastructure.
🧬 Design Strategy
Uniformity across platforms
With a lean team, we avoided unnecessary customisation. Aligning Android and iOS closely helped us move faster, reduced design/development overhead, and improved consistency across the product.
Brand colour accessibility
Our brand colour lacked sufficient contrast, so we shifted to a monochrome default and introduced an accessible green for buttons and links. This made the app easier to use while still allowing the brand to show up in intentional ways.
Using up to date patterns
To support Jetpack Compose on Android and SwiftUI on iOS, we leaned into native components - Material 3 and the latest OS libraries. This kept the experience consistent and made handoff between feature squads and the design systems team faster and easier.
Content-first monochrome UI
We used a black-and-white interface to let content lead. Colour is reserved for key states like success or error, making the UI clearer, more accessible, and easier to trust, especially in high-stakes environments.
Creating a new design language
I paired with our the design systems designer to create a holistic, scalable design system. It redefined core foundations like typography, colour, and iconography, while introducing modular components and tokens that worked seamlessly across iOS, Android, and web. This became the visual and functional backbone of Element X and all design moving forward.
🔁 Our Process
Set clear milestones
Rebuilding an app from the ground up required strong alignment and ambitious goals. We focused on getting the fundamentals right first, then launched early to the community to validate the experience and build momentum in public.
Involve our champions
As an open-source product, our community became part of the process. We brought power users in early to test features, uncover bugs, and shape the product through continuous feedback.
I led product development alongside the creation of our new design system, ensuring consistency scaled with the product from day one. We focused on accessible monochrome-first theming, SwiftUI and Jetpack Compose-ready components, and native interaction patterns across platforms.
Collaborate closely with product and engineering
I worked daily with PMs and EMs to scope, sequence, and ship. We would then have weekly meetings with the leadership for strategic alignment.
Invest in the team
Alongside the product work, I focused on improving how we worked - introducing clearer planning processes, regular design critiques, and mentorship to help each designer grow ownership and confidence.
👑 My key responsibilities
Workload balancing
I developed visualizations of workload and bandwidth for designers, enabling them to prioritize tasks and requests more effectively, while also fostering improved collaboration with product managers.
Roadmapping and processes
I partnered with team leads to craft the quarterly roadmap, sharing progress updates, addressing blockers, and optimizing processes for increased efficiency as necessary.
Working with leadership
I led weekly syncs with leadership to report progress, gather feedback, strategize product initiatives, and coordinate launches, pivotal for aligning efforts, ensuring clear direction.
Defining feature requirements
Collaborating with the product manager, I developed feature requirements and worked closely with them to ensure alignment, thereby guaranteeing that we were building the right features for our product.
End-to-end designing
I spearheaded end-to-end design and documentation efforts for features. This included design decisions and debt, thereby fostering open communication and easy knowledge transfer
Cross-platform alignment
I led weekly syncs with leadership to report progress, gather feedback, strategize product initiatives, and coordinate launches, pivotal for aligning efforts, ensuring clear direction.
🎯 The Final Design Vision Coming To Life
Message Timeline
Timeline is one of the core screens of the app. I designed these screens making sure the content was the king by using a limited colour palette, using the brand colour sparringly, making sure the interface was clean and accessible.
Chat List
I created the home screen containing a list of chats. The key task was to make sure the interactions and UI fel familiar to iOS and Android users, defaulting to platform native patterns and components.
Chat list filter UI
I particularly worked to create dynamic multiple select filters to help users find their chat easily allowing the user to filter by - direct or group chats, as well to be able to filter by their favourite chats as well as to be able to see their unread chats (for those inbox zero workers)
Notifications
A unique feature of Element has been to allow users to set custom notifications for different chats that a they are a part of, a feature I am quite proud of working on. While this might require a whole case study, for now, find below the research insights, the workflow and the final implementation for the feature.
📈 The Impact
🔄 Element X became the new foundation for all mobile development
📊 Early users reported major improvements in speed and usability
🛠️ Reduced design and engineering time through system reuse
📈 Increase in subscription revenue by 30% within the first year, and by sevenfold after adding the PRO offering
🔍 Key Learnings
Good team dynamic = good product
In small teams, with hard deadlines, things will go wrong. I learnt how to use humour and conversations outside work to form personal connections to help pick everyone up when they were down.
This directly impacted the quality of the product we were shipping.
It was challenging to make decisions for the design system and the product simultaneously. If I could go back, I would have spent more time defining the system before starting to work on the complete product redesign.
Since there were a lot of different teams involved in the relaunch, I found it extremely important to maintain good documentation of our decisions so align teams behind a shared vision.