E2E-encrypted messaging app with communities

Comm's web and mobile application display.


Comm is an E2E-encrypted messaging app capable of hosting multiple communities on user-owned servers known as keyservers. It aims to empower users with complete control over their data and privacy.

Unlike typical E2E-encrypted apps restricted to local device operations, Comm leverages keyservers to deliver rich features and functionality without compromising encryption or privacy.


As Comm’s first in-house product designer, my primary objectives consisted of refining previous design decisions while ensuring a steady release of new features and ideas.

Web UI Redesign


Communities on Comm can host custom apps that activate upon enabling. However, the structure between communities and their apps was not clearly defined, leading to confusion while navigating the web product.

Users were able to switch between apps across different communities, disrupting the hierarchical model of custom apps belonging to communities.

Communicate clear hierarchy

Utilize clear and simple UI layouts to communicate navigational levels.

Simplify the navigation

Constraint confusing navigational paths to keep users on track.

Polish web UI design

Update and refine overall web UI to feel more modern and easier to scan,

Clear navigation

I adopted a simple left-to-right layout for the updated navigational elements. This made it clear which elements were higher in the hierarchy in the overall navigation.

This improved the ease of scanning the navigational elements to quickly determine one's position.




Old layout

Old web UI displaying confusing hierarchy.

New layout

New UI displaying improved hierarchy readability

Polish Web UI

In addition to communicating clearer navigation for our users, the overall web UI was also updated to feel more modern and clean. The old UI heavily used lines to divide sections, leading to visual overload from more crucial screen elements.

My goal was to clear up the UI, while keeping each section clear and separate from each other.

Card approach

By using a card-based approach, I was able to group certain sections together easily and organize them in a new layout. This also removed a lot of the visual weight that was prevalent due to the amount of lines used in the old UI.

Simplified organization

By grouping sections and related elements together, the overall UI was much easier to scan and perceive quickly.

Modular for future scaling

With a card layout in place, it is much easier to add, remove, or adjust cards to further improve the web ui.

Responsive adaptability

Cards allow different methods such as rearrangements and scaling to adapt to varying screen sizes.

Wireframe of new web application UI utilizing card structure

Less is more

In addition to communicating clearer navigation for our users, the overall web UI was also updated to feel more modern and clean. The old UI heavily used lines to divide sections, leading to visual overload from more crucial screen elements.

My goal was to clear up the UI, while keeping each section clear and separate from each other.

New UI zoomed in

Mobile Signup Flow


The mobile app’s sign up became out dated due to it missing some new features that the team rolled out. We wanted to revamp the mobile sign up experience and update the missing core features.

Connecting Ethereum wallet

During the sign up flow, users could opt in to connect their Ethereum wallet to their newly created Comm account.

Setting an account avatar

Account avatars was a new feature that we rolled out which we wanted to include in the sign up flow.

Backing up Comm account via Ethereum signature

When users connect their Ethereum wallets to their account, they may also backup their account via Ethereum signature.

User flow for mobile Signup

Connecting Ethereum wallet to Comm account

When users sign up for Comm, they are presented with the option to connect an Ethereum wallet to their account. By connecting their Ethereum wallet to their Comm account, users are able to use their ENS avatar and name as a display name, and backup their Comm account via Ethereum signature.

There were a few edge cases that needed to be addressed with Ethereum wallet connection, such as Ethereum wallets that already have been connected to an existing Comm account.

Mobile signup with Ethereum connection

Username selection

If the user’s account is connecting with an Ethereum wallet, they could either secure their account via Ethereum signature or a standard password.

Mobile username selection steps

Setting an account avatar

After a user chooses to connect an Ethereum wallet or not to their account, they are prompted to select their account avatar. If an ENS avatar is connected with the account, the user may select to use that as well as other options.

Mobile avatar selection

Backing up Comm account via Ethereum wallet

When an Ethereum wallet is connected, the user may backup their account via Ethereum signature. This will be used to log in to their Comm account in the future.

Mobile Ethereum backup step

Future iterations for the
sign up flow

Even though we've updated the sign up flow with exciting new features, I worry that it might take too much time for the users to finish the entire flow. I believe that keeping the sign up process easy and straightforward is the best way to introduce our platform to new users.

To achieve this, my next actions would involve collecting user feedback to identify the steps that are most frequently skipped or underused. Using this information, I could then make design decisions aimed at removing specific steps in order to reduce the time needed for the sign up process.

Design System updates


When I joined the team at Comm, I noticed that the design system in Figma was outdated vs the real application. Noticing this gap between design and product, I updated the design system to include every component and its multiple behaviors, states, and variants.

This allowed me to design with the most current up to date components, and maintain consistency between design and implementation.

Old design system

Displaying the old design system

Atomic Design

I approached the new design system by deconstructing all the components into their purest form. This allowed total control over all individual elements to ensure that they were all up to date to the code. Then, I combined certain components together to form more complex components that we have in our product.

This method is Atomic Designs and was spearheaded by Brad Frost. I believe that this is the best and smartest way to build robust design systems. As each components builds on top of each other and changes can cascade down the list.

New design system breakdown with atomic design system

Visual brand and identity

The visual language was also a key factor to update and ensure that the entire product all spoke the same brand and tone. There were a few older components that lacked the same branding as some of the newer features, which stuck out in the visual landscape.

Building a UI style guideline in the design system ensured that all current and future components adhered to the same rules. Thus creating visual consistency in both branding and development.

Style guide for design system