Element X: A Strategic Redesign for Sovereign-Grade Communication
Company
Year
2022-2024
Project Type
Zero-to-one
Skills
UX, Visual design, Design system, Management
Platform
iOS, Android
Role
Design lead across four squads
A redesign isn't just about visuals, it's about vision. 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 four cross-functional squads, including iOS, Android, cryptography, and design systems.
I managed three product designers, set direction for Design Language 2.0, and partnered with 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 6 months.
📡 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
We weren’t designing a modern UI—we were designing a platform sovereign teams could trust.
That meant going deeper than surface-level UX. We had to design for clarity, performance, and predictability under pressure.
Design Considerations
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
We created a holistic, scalable design system built for clarity, performance, and craft. 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
Start with the riskiest flows
Before jumping into visual design, we prototyped and tested critical paths like onboarding, encryption verification, and room access. These were flows where trust could be lost quickly, so we validated and iterated fast.
Build systems in parallel
I led the effort to build a native-first design system alongside product work—so features shipped with consistency, not as an afterthought. We focused on:
Accessible monochrome-first theming
Jetpack Compose and SwiftUI-ready components
Native navigation patterns + gestures
Collaborate closely with product and engineering
We weren’t throwing specs over the wall. I worked daily with PMs and EMs to scope, sequence, and ship. Designers embedded in squads, and we ran async reviews to keep velocity high.
Invest in the team
As the design lead, I helped the team scale by introducing planning tools, refining our crit process, and mentoring each designer through their ownership areas.
👑 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 organized cross-platform syncs to maintain consistency with web design, facilitating seamless integration and alignment across all platforms, thereby harmonizing roadmaps across multiple teams.
🎯 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
One of the most unique features on the app is that we allow users to set custom notifications per chat. While in the Ui it is presented in the very simple intuitive manner, the actual depth that one needs to go to understand how notifications work required systems thinking. I am probably going to add a deep dive case study for the topic of notifications, but for now, here is the research and some final designs.
📈 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
💬 Feedback from internal and sovereign users highlighted clarity and performance
📈 Increase in subscription revenue by 30% within the first 6 months
🔍 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 4 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.