I redesigned and coded the UI of Jedari — a white label social network to build communities

The problem

Jedari is a company that tries to address a simple problem: making it easier for content creators to build a community around their content, wether it is posts, images, videos, courses or any type of content a social media user could consume.

In that context, I have been approached by Jedari to entirely redesign the UI of their product from the ground, with very little delay, and without going through a visual design phase, using Figma for instance. Instead, since they had a very tight release schedule, they asked to move immediately to writing UI code, suggesting I use Angular for that, as it would make it easier for their frontend development team.

The initial state

I was finally able to get my hands on the demo Jedari provided and start exploring the app and its different views, mapping the amount of work to be done. My first surprise was about the frontend, realizing that it was built with Friendkit, one of my first UI kits for social media apps that I released in 2019. While it was a good looking UI kit, it didn’t age gracefully because of it being based on Sass and jQuery, as well as relying on gulp for compilation. In other terms a completely outdated setup.

The first version of Jedari was built using Friendkit, a UI kit I released in 2019.

I had more than 30 screens to redesign and code for this project. Tasks involved creating every application component using Angular 17. Obviously, I won’t have enough time to cover everything in this case study as it could rapidly become overwhelming. The first screen I had to work on was the main page, which is the main social feed, and the starting point for the user journey after signup and login.

A mobile first webapp

The main constraint was that most of the users would be using Jedari from their smartphone. Regarding that, the challenge was to design a mobile first app with the limitations of web and without the perks of native mobile apps.

Jedari is a mobile first web application.

Redesigning the feed

My first meeting with the client made the things very clear regarding that: users should be able to understand the application without any external help. Therefore I decided to go for a classic feed structure with a side navigation to be able to filter posts, a post list, a widget sidebar, and a story-like list of user avatars sitting at the top.

A traditional feed structure with stories on the top.

The user personas research revealed a population mostly aged between 15 and 55 (around 85% according to Jedari’s numbers), and actively involved in creator communities, without any technical skills or knowledge, but very used to the most common social apps, like Facebook, Instagram, Tik Tok, Youtube, Spotify etc…

Reflecting about the paywall

As a user centric platform, Jedari provides the ability to brands, content creators and others to build a paid community around them. Therefore the ability to attract new users is highly impacted by the way you onboard them.

The signup page is the first step to onboard new users.

I tried different solutions, mixing signup and payment elements in multistep forms, with various layouts. Eventually I merged everything in a single signup page without any steps, to maximize conversion rate and simplify the process.

The post component

The post component is an important element that is going to be used on several application pages. Given the requirements, users should be able to interact with posts — e.g commenting, liking, bookmarking etc… — without leaving the feed.

The placement of the post action buttons also sparked debate within the client's UX team. While I initially proposed having them vertically stacked on the side of the post was innovative in terms of design, but failed to pass usability tests, as the first users testing the new UI experienced a bit of confusion looking for them. I ended up placing them just under the post when in a feed and on top of it while viewing post details, making them easier to access.

The post action buttons sparked debate within the UX team.

However, they should also be able to display a post details page. To make this component reusable in any context, I implemented a parent to child navigation so it works like a fullscreen modal but only in appearance.

Opening a post triggers routing to a new page but the navigation is removed, leaving a lot of space to display post info, and a comments sidebar. A close button takes you back to the previous page when clicked.

The post page works like a fullscreen modal but only in appearance

Other challenges were related to the post component. It should differenciate based on wether the user has uploaded an image, a video, or if the post was originally published by someone else. A post can also be an event, which attaches additional data and info.

Designing the post components also led to work on action modals.

Designing the post components also led to work on action modals that pop when some actions are triggered, like sharing for instance.

Building the messaging UI

Jedari users are able to send private messages to other users within the same community. The messaging UI uses a unique layout, building upon best practices for messaging apps, allowing single and group conversations, as well as an additional area on the right side to display additional details.

The messaging UI allows both single and group conversations.

Building the music app UI

Jedari also allows the creation of musical universes, with the ability to create playlists, share tracks, and discover new artists. The result is a dedicated music interface, with a grid of tracks and an audio player, allowing users to discover new tracks and listen to them directly from the application.

Jedari also allows the creation of musical universes.

Content and gamification

I spent a lot of time thinking about how to implement content management and gamification features, that were required for the platform. The groups and pages generated by the instance admins remain simple, useable and attractive, regardless of the content displayed. There’s also a section for challenges, allowing users to participate in challenges and earn rewards.

Jedari offers a variety of community tools.

Key Takeaways

• Code-first design under pressure: With no time for traditional wireframing or visual design in Figma, the project demanded immediate execution in Angular 17. This accelerated approach required fast decision-making and direct implementation of UX patterns, emphasizing clarity, speed, and adaptability in a high-stakes environment.
• Modernizing legacy UI foundations: The original product was built on an outdated stack using Friendkit, Sass, jQuery, and Gulp. Redesigning over 30 screens involved rethinking UI architecture while carefully migrating to modern Angular components—balancing aesthetic renewal with technical modernization.
• Designing for a mobile-native, non-technical audience: The primary user group (aged 15–55) expected a frictionless experience modeled after mainstream platforms. The interface leaned on familiar paradigms like vertical feeds, story avatars, and simple navigation to ensure usability without onboarding materials or tutorials.
• Conversion-driven onboarding and paywall: Since Jedari supports paid communities, simplifying user acquisition was critical. Several onboarding approaches were tested, but a streamlined, single-step signup form was ultimately chosen to reduce drop-off and increase conversion, particularly for mobile users.
• User-tested interaction patterns: Post interaction buttons placement was iteratively refined based on usability feedback. An initially innovative vertical layout was replaced with more standard positioning after test users experienced confusion. Final designs prioritized clarity and accessibility over visual experimentation.
• Purposeful messaging design: A dedicated messaging UI supports both private and group chats, incorporating a three-column layout with room for metadata and context. This feature aligns with Jedari’s vision of deepening community interaction and fostering meaningful creator-user relationships.
• Embedded music experience: Jedari includes a dedicated interface for playlist creation and track discovery, creating a music-driven social layer. The design goal was to offer a distinct listening experience while staying visually cohesive with the overall platform.
• Content engagement through gamification: Community tools like groups, challenges, and rewards were built to increase retention and foster interaction. These features were designed to be visually lightweight yet engaging, enhancing the user journey without overwhelming the core social experience.

Before and after

I wish I could expand more on this project as there are so much more interesting focus points that diserve a highlight, but I think this already gave you a solid overview of the project and some of the problems that were solved. I hope you enjoyed reading about this passionate journey!