Building a new avatar set for Port

Digital avatars are powerful tools for users to express their identities in the online world. At Port, we understand that a digital avatar should not only reflect personal quirks but also represent how users wish to be perceived. As an access-controlled, privacy-focused messaging app that caters to diverse users—we recognized the need for an original avatar set that resonates with our audience.

Conceptualizing and designing the avatar set was a formidable task. It required a deep understanding of our core values, our user base, and a commitment to setting new design standards in avatar creation. We took on this challenge with a clear goal: to create avatars that stand out as unique, inclusive, and scalable.

 Problem Statement:

 We needed to create an avatar set that was:

• Playful and fun

• Not juvenile

• Gender non-specific

• Race non-specific

• Extensible

• Unique

 The Design Process:

With these constraints in mind, we initially explored existing avatars and online references but found them lacking. Our attempts at designing animal and human avatars fell short; they didn't capture the originality and substance we sought.

I was determined to create avatars that were not just visually appealing but also a testament to Port's innovative spirit. This wasn't just about aesthetics—it was about proving that Port is both a technical marvel and a user delight.

After extensive research, including a deep dive into academic papers on avatar design, I realized we were overlooking a critical aspect: digital inclusivity. This insight shifted our approach.

Incorporating research insights and aesthetic references from platforms like Pinterest, I grappled with the challenge of creating something truly unique and effective. Several factors became clear:

Originality: A successful product requires a delightful and engaging user experience, and originality is key. From the start, I knew that standing out from the competition was crucial, especially in a saturated market.

Global Appeal: As a social app, Port needed to make everyone feel welcome. A global appeal was non-negotiable.

Scalability: With strict deadlines, we needed a design that was scalable, ensuring efficiency without compromising quality.

One of my heroes the mathematician Srinivas Ramanujan, who once said, “An equation for me has no meaning unless it represents a thought of God.” Since Port’s core protocols are very math heavy, I wanted the avatars to embody some mathematical principle. 

That’s when I turned to middle school math and discovered tessellations:

“Tessellation is a pattern made by repeating shapes to cover a surface without any gaps or overlaps.”

Based on other uses of Tessellations in design, I believed that Tessellations would address all our constraints effectively. Once the constraints and a reasonable foundation to solve them were clear, I started sketching out the avatars.

I began sketching random shapes and organizing the avatars into three parts:
face, body, and accessory. This way, a large number of permutations and combinations could be achieved.

By leveraging Figma's components and variants feature, I created a scalable system of avatar parts that could generate an astounding number of unique avatars.

 My initial set had:

• Number of Faces: 9

• Number of Bodies: 9

• Number of Accessories: 14

With these elements, we could generate 1,134 unique avatars. We ultimately created over 50 avatars for the app.

While embarking on this project, I adhered to a rigorous process:

1. Clearly defined the problem statement

2. Asked questions to eliminate ambiguity

3. Conducted thorough research and competitive analysis

4. Sought inspiration from different sources outside of the mainstream

5. Sketched various iterations

6. Documented my thought process meticulously

This project was more than just a design challenge—it was a career-defining moment. It pushed me to my creative limits and made me better at thinking through problems and delivering effective design solutions. I hope this article was helpful in building up your own design thinking frameworks. If you have more questions for me, feel free to reach me on Port.

https://porting.me/?bundleId=5225034c009a4b7483661cc1684360ae