Pangea 💼

OVERVIEW

During my internship at Pangea.app, I collaborated with 3 designers, 1 PM and 5 developers to build components from scratch for Pangea.app's atomic design system; I then reskinned both desktop & IOS app with the components from system and writing detail documentation of variants/ usage guideline/ interaction etc in Coda.
Current status: Under development by the devs

DESIGN SYSTEM

Building Panthalassa

To improve the efficiency of work of future designers and communication with the devs team, the design lead started to build a design system and name it Panthalassa, the superocean that surrounded the supercontinent, Pangea ;)

As I joined the team, previous designers has set up a basic style guide for foundational elements like color, typography, spacing and layout grid etc.

My job was to build and implement components in the correct way such that

they align with the new branding style
responsive for different screen sizes
reusable for most of, if not all, use ases

Not to reinvent the wheel, our design lead refer to established design systems like Adobe Spectrum, Google Material Design and Apple's design guideline when defining our reusable components.

DESIGN PROCESS

Sync variants design process with tech stack

To get familiar with the previous style guide at first, I took the initiative to replicate some of the main pages of the website. It was when I realized that the Avatar component was a bit confusing and inflexible to use.

To figure out how exactly I can improve the component setup, I first asked about the tech stack being used trying to synchronize the setup in Figma with the setup in coding.

Knowing that the front-end tech stack is React, I referred to Material UI React for setting variants, like adding image, letter, and square shape for flexible usage and fallback avatar.

With better categorization of type, property, state and size, both designers and developers now can better understand and reuse the Avatar component easily.

Thanks to this cool feature on Figma, developers just need to click on the variants and view the clear setup and documentation linked!

RESPONSIVE COMPONENTS

Making responsive design easier than ever with reusable components

One of the most effort-taking tasks is to make sure that all the components are not only reusable for most use cases but also compatible for different screen sizes.

By setting up the container frame consistently & constraints of the components correctly, it efficiently and effectively makes design transferable to create the seamless experience for both desktop and mobile users. It's also a great foundation for developers to implement and designers to get creative with the basics.

Tranferring desktop to mobile design in ~30 sec

OUTCOME

Design system under construction

Currently, the developer team is building the components along with the documentation on Coda. The team is gradually shipping the system into the real desktop and mobile app!

A peek of the documentation

TAKEAWAYS

Apply design thinking when solving non-design problems

Working on the design system was a very rewarding experience. It fascinated me how design thinking can and should be applied in every aspect when I was designing for internal users like designers and developers.

One thing that I found interesting when creating components was the fallbacks status of avatar. Realizing the edge cases in user experience really allows me to stand in the dev's shoe and think more to understand what's their mental model and how to make their jobs easier.

Pangea internship

Apply design thinking when solving non-design problems

Let's chat!