2023
E2E-encrypted messaging app with communities
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.
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.
Utilize clear and simple UI layouts to communicate navigational levels.
Constraint confusing navigational paths to keep users on track.
Update and refine overall web UI to feel more modern and easier to scan.
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.
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.
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.
By grouping sections and related elements together, the overall UI was much easier to scan and perceive quickly.
With a card layout in place, it is much easier to add, remove, or adjust cards to further improve the web ui.
Cards allow different methods such as rearrangements and scaling to adapt to varying screen sizes.
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.
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.
During the sign up flow, users could opt in to connect their Ethereum wallet to their newly created Comm account.
Account avatars was a new feature that we rolled out which we wanted to include in the sign up flow.
When users connect their Ethereum wallets to their account, they may also backup their account via Ethereum signature.
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.
If the user’s account is connecting with an Ethereum wallet, they could either secure their account via Ethereum signature or a standard password.
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.
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.
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.
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.
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.
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.
