Pixelfed | Notion

For several months now, I have been passionate about decentralized social networks

A federated social network is a platform composed of independent servers that communicate with each other using common protocols. Unlike traditional centralized social networks, where all data and interactions are managed by a single company, federated networks allow users to interact across different servers while maintaining control over their own data and communities. This structure promotes decentralization, giving users more freedom and autonomy.

I started with Mastodon, and then the Pixelfed network caught my attention. However, I noticed that the UI was somewhat outdated, so I decided to redesign Pixelfed in my own way for a more modern user experience.

Here is how Pixelfed currently looks like:

https://widgets.engine.so/notion-image-slider/result/?autoplay=true&borderRadius=16&speed=5000&shadow=true&images={"image"%3A"https%3A%2F%2Fi.ibb.co%2FXZPCyV7V%2Fhome.png"%2C"link"%3A"https%3A%2F%2Fspencerpauly.com"}&images={"image"%3A"https%3A%2F%2Fi.ibb.co%2FgbGDMvGN%2Fnotifications.png"%2C"link"%3A""}&images={"image"%3A"https%3A%2F%2Fi.ibb.co%2Fp6267Vrj%2Fdiscover.png"%2C"link"%3A""}&images={"image"%3A"https%3A%2F%2Fi.ibb.co%2FWv4NndMg%2Fmessages.png"%2C"link"%3A""}&images={"image"%3A"https%3A%2F%2Fi.ibb.co%2F99cVyRKb%2Fprofile.png"%2C"link"%3A""}

1. UI review

First, I conducted a UI review of the existing platform. I annotated the elements that seemed odd or in need of improvement.

https://widgets.engine.so/notion-image-slider/result/?autoplay=true&borderRadius=16&speed=5000&shadow=true&images={"image"%3A"https%3A%2F%2Fi.ibb.co%2FZ1VPSr6f%2Fimage-1.png"%2C"link"%3A"https%3A%2F%2Fspencerpauly.com"}&images={"image"%3A"https%3A%2F%2Fi.ibb.co%2FCpLj2csv%2Fimage-2.png"%2C"link"%3A""}&images={"image"%3A"https%3A%2F%2Fi.ibb.co%2FS4x0zZmc%2Fimage-3.png"%2C"link"%3A""}&images={"image"%3A"https%3A%2F%2Fi.ibb.co%2Fb591wrk4%2Fimage-4.png"%2C"link"%3A""}&images={"image"%3A"https%3A%2F%2Fi.ibb.co%2FdJsKrYsY%2Fimage-5.png"%2C"link"%3A""}&images={"image"%3A"https%3A%2F%2Fi.ibb.co%2F4w6wQHPd%2Fimage-6.png"%2C"link"%3A""}&images={"image"%3A"https%3A%2F%2Fi.ibb.co%2FJRdNWLNZ%2Fimage-7.png"%2C"link"%3A""}

2. Drafts & Wireframing

Then, I iterated on the look I wanted to see in the application, taking into account the reviews conducted earlier.

3. Designing in Figma

During the design phase, I noticed that some ideas I had during the wireframing stage were not as relevant as I initially thought. I challenged those ideas and proposed possible alternatives. The responsiveness of the content, as well as the different photo/video formats, were also crucial steps, as some users post in square format, others in 9:16 or 16:9. Everything needed to be consistent.

The motivations behind this redesign were mainly to achieve better consistency across pages, a cleaner design, and improved usability. I also made sure that the design was easily resizeable/responsive.

I added vibrant colours to make the application more attractive and used rounded corners to give it a warmer feel. The goal was to transition from a more technical approach to Instagram to a more mainstream platform, open to all types of audiences.

https://widgets.engine.so/notion-image-slider/result/?autoplay=true&borderRadius=16&speed=5000&shadow=true&images={"image"%3A"https%3A%2F%2Fi.ibb.co%2FzWgHhVHp%2FHome-alt-2.png"%2C"link"%3A"https%3A%2F%2Fspencerpauly.com"}&images={"image"%3A"https%3A%2F%2Fi.ibb.co%2FG6pL2tg%2Fsearch.png"%2C"link"%3A""}&images={"image"%3A"https%3A%2F%2Fi.ibb.co%2F3yyn7JG1%2Fdiscover.png"%2C"link"%3A""}&images={"image"%3A"https%3A%2F%2Fi.ibb.co%2FvyM03r5%2FNotifications.png"%2C"link"%3A""}&images={"image"%3A"https%3A%2F%2Fi.ibb.co%2FSDKf36pj%2FMessages.png"%2C"link"%3A""}&images={"image"%3A"https%3A%2F%2Fi.ibb.co%2Fv63TNV5z%2FProfile.png"%2C"link"%3A""}

<aside>

If you like my work, you can find me on Mastodon at [email protected]. I’m also a freelance designer, and you can reach me by clicking the button below. I’m currently accepting new clients, and would be thrilled to help bring your projects to life! 🌈

</aside>