Back to blogs
Amudhasurabhi Aravindan
Sep 9, 2024
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:
Clearly defined the problem statement
Asked questions to eliminate ambiguity
Conducted thorough research and competitive analysis
Sought inspiration from different sources outside of the mainstream
Sketched various iterations
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
Other articles:
Oct 8, 2024
How Port is using design thinking to address diverse user needs
Ruthvik V
Read more
Aug 29, 2024
Sharing A Contact: The Numberless Way
Shantanav Saurav
Read more
Aug 29, 2024
Tame the Chaos: How Chat Folders Can Simplify Your Life
Harshitha Chawla
Read more
Aug 7, 2024
How does Port make secure, identifier-less, end-to-end encrypted chats?
Shantanav Saurav
Read more
Aug 2, 2024
How Port puts you in control
Abhay Shenoy
Read more
Jun 29, 2024
Blocking a user without public identifiers
Abhinav
Read more
Jun 20, 2024
What is a Port?
Abhinav
Read more
Jun 16, 2024
Why is Port a better way to connect?
Janice Coutinho
Read more
Jun 14, 2024
Superports - the smart way to network
Aniruddh Balasubramaniam
Read more
Jun 12, 2024
How "Ports" work (vs phone numbers)
Aniruddh Balasubramaniam
Read more
Jun 10, 2024
Connect on your terms … starting now
Janice Coutinho
Read more
Jun 8, 2024
Going Numberless
Aniruddh Balasubramaniam
Read more