Koji Design System
Koji is a link-in-bio platform that gives creators a digital storefront on social media platforms like Instagram and TikTok. While Koji’s mini apps empower creators world-wide, they lack a consistent look and feel that represents the brand.
Goal
Creating a cross-platform design system that gives designers and developers the frameworks they need to create engaging product experiences.
Role
User Experience Designer, User Interface Designer
Tools
Figma, FigJam
Starting the converstaion
I began by talking with the team to get real time user feedback around the challenges that exist in their current methodologies. Using product design thinking and the team’s feedback, I then began building a living design system that represents Koji.
Creating a work-horse design system.
Accessibility
Any design system is only useful if it is accessible. While that perspective is typically user-focused, I felt it was two-fold. I wanted to make sure that I brought all of the internal teams along the journey through providing clear rationale, documentation, and education on the efforts in creating an accessible system.
Color Contrast and Content Accessibility
I focused on pressure testing all of the brands color systems, ensuring that we had sufficient contrast across buttons, input elements, headers, and themes overall. I also developed strategies for parsing all images and videos so that the team can begin to provide alternative text and captions
The System
Themes
I created some out-of-the box themes that users can choose from to customize the look and feel of their mini-apps. Additionally, I created context themes for how the apps would look like within the context of social media platforms such as Instagram, Facebook, Twitter and Tik Tok. Below are some examples of how some of these themes were customized by users.
Using the Design System
Me and the team at Koji started using the design system to create new mini-apps as well reskin the old one. We started by understanding the company’s goals and finding the gaps in user needs. We then designed accessible templates that fill those gaps using the new components.
