The Challenge

Pleroma is a free, open-source social media platform nested within a federated social network running on free, open software called the Fediverse. The Fediverse empowers users to join or host social networks dedicated to their unique interests while maintaining control of their data sharing preferences, moderation, and terms of service.

Pleroma enlisted DockYard to increase adoption by identifying and addressing accessibility, usability, and functionality challenges. They needed to grow their communities by creating a more inviting front end—with wider appeal to users accustomed to the interfaces of mainstream social media platforms—without alienating core users, contributors, and developers of the Fediverse.

I operated as the Design Lead and Product Co-owner and was responsible for product and design strategy, running workshops, product and competitive research, feedback synthesis, UX, UI, motion and client presentations.

The Solution

01 | Diving into Discovery

A thorough discovery process was conducted to evaluate platform concerns and understand the overall vision, including a product audit, competitive analysis, and persona creation. I conducted interviews with Pleroma stakeholders and developed two key personas to guide user testing: one representing Pleroma’s existing user base and another representing new user targets. These became the subjects of one-on-one user interviews, ongoing qualitative feedback, and remote usability interviews aimed at uncovering product pain points. Leveraging these insights, we quickly established a shared team vision, a list of prioritized Minimal Viable Product (MVP) requirements, and a product roadmap.

02 | Developing a Responsive, Mobile-first PWA

With a validated and refined set of problem statements, I was ready to start wire-framing solutions and testing prototypes. My focus was to improve the intuitive nature of the user interface (UI), content scannability, and discoverability of features to provide an easy to use messaging system with a focus on task accomplishment recognition.

Our team developed a mobile-first Progressive Web App (PWA) with three responsive breakpoints to serve the best possible layout for users consuming information within the application. By launch date, we designed over 1,000 screens between these breakpoints, created 16 prototypes, and conducted over 20 rounds of user testing sessions.

03 | UI Kit and Branding for Customization

User customization is a cornerstone of the Pleroma product. Every instance is meant to be tailored to the user’s personal vision. This wide variety of aesthetics make the Pleroma ecosystem rich and compelling. All instances start with a baseline UI kit on which this personal vision is built. I was tasked with providing a kit that was beautiful and functional right out of the box, while allowing for new customizations to be added in the future. With an emphasis on strong hierarchy, low cognitive load, and feature discoverability, I proposed two general directions for the Pleroma Front-End UI Kit.

Our team chose to pursue direction one, as it successfully accomplished the usability goals set forth while maintaining an architecture that would be familiar to current Pleroma users.

This is the Pleroma interface before our redesign:

These are our redesign options 01 and 02:

A motion study for a customized version of option 01

04 | Iterative Learning

With problem statements, requirements, a roadmap, personas, user experience (UX) flows, and a UI kit under our belt, it was time to build interactive prototypes and test them with users. I used clickable prototypes to conduct individual interviews, contextual inquiries, and remote usability tests to gather feedback, iterate on our designs, and re-test until we achieved the desired results. I also developed a branded deck to socialize feedback with the client and team and to share our team’s progress towards the MVP.

The branded deck showing our target testing ratio plan broken down by personas

Insights gained after several user testing sessions

05 | MVP Features and Wins

Outlined below are some of the more significant UX and UI changes our team was able to create and implement. All revisions and designs were based on user research and their success was validated through user testing.

The Feed System

This includes the Top Tool Bar, Status Input, Feed Selection, Feed Widget/Feed Cards, Profile Widget, Introduction Widget and Notifications Widget. The goals accomplished include increasing scan-ability, reducing redundant information and functionality, improving system confirmation messaging and increasing the user’s understanding of the various timelines and their functions.

Direct Messaging

Our team created a high level Direct Messaging feature that users wanted and expected. The new Direct Messages, or Chats, utilizes a familiar UI and experience as other existing social and direct messaging platforms. The original DM functionality functioned more as posting statuses rather than a conversational flow.

Search

Our team created high level search functionality that users want and expect. The previous Pleroma search experience was not ideal for users. There was no auto population, breakdown of what users are searching for, etc. Pleroma now has an intuitive search experience where users can search by status, hashtags, users, etc. with an auto population feature.

06 | Conclusion

Users are becoming increasingly more aware of how their data is collected and shared across the web. Pleroma is poised to provide an ethical and viable social media ecosystem to meet the needs of this ever-growing, data-conscious user base. DockYard was able to partner with Pleroma to enhance the MVP’s UX, features, accessibility, and network in an effort to provide meaningful experiences for users seeking more control and ownership of their social media profiles and communities.