Kori is a content editing management widget designed for marketing managers, content strategists, bloggers, and social media coordinators working in companies of various sizes.
Type: Sparc Cooperative Product Project
Role: Lead Designer, Branding Designer, Animation Designer, & UX/UI (Web) Designer
Sparc Team: User Experience Implementation Designer, User Experience Designer, Product Engineer, Product Architecture, Data Architecture, Product Marketing, and Copywriter
Tools: Procreate, Adobe Illustrator, Adobe After Effects, Figma
Problem
Currently, marketing teams, managers, content strategists, and other stakeholders often juggle multiple content management tools that they can't afford to use due to subscription costs, leading to inefficiencies and misalignment due to limited feature sets and tool options.
Solution
Our lightweight plugin provides a centralized solution, bringing all these functions together in one space to streamline workflows and improve collaboration. Our team developed the Kori plugin as an open-source tool. This plugin allows users to gather user data, conduct detailed analysis, and create better, more relevant content. Kori is a content editing tool bundle that serves four modes, each managing content in a different way, which are: 1) Kori - Content Editing, 2) Tovik - Translation, 3) Blog, and 4) A/B Testing. We needed a logo and brand that represent what Kori can do through friendly, tech-driven approaches.
Outcome
Users find Kori intuitive and efficient, quickly adopting it as their primary content operations hub. By consolidating multiple tools into one lightweight, open‑source plugin, teams significantly reduce subscription costs while expanding their access to robust features. Marketing managers, content strategists, and collaborators are now able to:
• Streamline their content workflows from ideation to publishing
• Analyze user data and performance metrics in one place
• Produce more relevant, consistent, and high-quality content across channels
• Collaborate more effectively without jumping between different platforms
As a result, teams experience improved alignment, faster turnaround times, and a more scalable, data-driven content strategy powered by Kori’s four modes: Content Editing, Translation, Blog, and A/B Testing.
Not only did I create Kori branding, but I also developed three additional characters as part of Kori's bundle: translation, a/b testing, and blog. Tovik is a standalone product, with its own branding and a separate application, although it remains part of Kori's suite of products.
The Strategy
Color Palette
Five bold colors align with each of the characters of Kori:
Dodger Blue tone is associated with trustworthiness, clarity, calmness, and dependability, which are ideal for a content creation or editing tool.
Midnight Blue conveys seriousness, trust, and analysis, balancing the playful shape with a tone of reliability.
Sunglow tone is associated with energy, positivity, and creativity. It conveys warmth and friendliness, which are ideal for a blog role, as blogs are about sharing ideas and connecting with an audience.
Quarter Pearl Lusta (white) tone is clean and clear, which is ideal for the background and highlighting some small elements such as notepads and papers, and icons.
Light blue is associated with a sense of whimsy, gentleness, and organic friendliness.
Typography
1) Brother 1816 Printed (Primary font) - used within headings and subheadings.
2) Neue Haas Grotesk Text Pro - readability, cleaniness typeface for body copy
Logo Design Concept
The name "Kori" is a Korean word meaning “loop” (고리) and refers to a circular shape or object made from rope or metal to connect things. Kori is inspired by the paper-clip character Clippy, who was an Office Assistant in Microsoft Office.
The logo aims to stand out from our tech/software competitors, which are vibrant, unique, friendly, and less corporate in nature. It should reflect a modern, friendly, and tech-savvy aesthetic while maintaining a clean, simple design.
Brand Nouns: Friendly, Helper, Simple, Teamwork, Tech-Savvy, Modern
Kori Logo - "O"
I came up with an 'O' letter as a loop or circular shape for Kori as a character. It features the character from the standalone icon — the 'O' with googly eyes — to make the brand feel lively, engaging, and slightly whimsical. The eyes give the logo personality and emotional connection, transforming it into a character rather than just a wordmark and making it less corporate. The "O" resembles a mouth-like gap, serving as a metaphor for a content editor, communication tool, or voice-driven platform.
The word "Kori" is set in a bold sans-serif font, Brother 1816 Printed typeface, which translates to a bold, bubbly, and fresh look. The typeface is edgy in a soft, playful, and expressive way, aligning elements like a decorative @ symbol on the "dot" of "i."
Kori Logo - "i"
The text color in the wordmark is blue because it symbolizes clarity, calmness, and dependability, which are ideal for a content creation or editing tool. Kori uses the color yellow at the symbol or "dot" on the "i" to inject energy, creativity, and enthusiasm as a playful accent. Yellow captures attention and contrasts nicely with blue, indicating interactivity. The swirl in the "@" on the "i" is used to add a unique, creative visual element while maintaining on-brand consistency with a playful, friendly tone.
Supporting Brand (shapes, characters, & elements)
Kori — The "O" resembles a mouth-like gap, serving as a metaphor for a content editor, communication tool, or voice-driven platform.
Tovik — The sunray form, or a semicircle base with radiating bars extending outward like rays, almost resembling a simplified rising sun. It conveys a universality that represents a burst or sunray, not limited to any specific culture or language, but spreading lines represent communication branching outward, symbolizing how one message can expand into many languages.
Blog — The internet symbol form resembles an “@” symbol, which is universally recognized as part of the internet, communication, and especially sharing ideas, as well as blogging and writing online to an audience.
A/B Testing — The squiggly line represents experimentation and variation—things aren’t straight or predictable, just like in A/B testing, where different paths are tested. It also shows that A/B testing explores different paths, carefully observes outcomes, and helps make smart, unbiased decisions.
Elements
Each character had their own elements that represent who they are and what they do as a tool.
Utilizing various shapes in characters to convey cohesive team spirit among Kori. It had to be versatile enough to integrate seamlessly into a product, such as through a Kori website, illustrations, graphic assets, and animations that are recognizable and memorable.
Animations
We decided to add interactive features to our website so visitors feel more engaged. Our idea was to create a live animation where visitors can drag the mouse cursor onto an animation that activates when the cursor hovers. These animations were categorized under the 'Features' sections on our website. I created each Kori character to represent what they do.
Branding in Action & UI Implementation
Kori Beta Referral Program
The Kori Beta Referral Program was an invitation-only event offered to beta users on our website, Sparc Cooperative.
Our marketing team researched a beta referral program to understand better how we can improve our beta testing by inviting our beta users. Using this method also helped us to identify the right target audience and demographic. We wanted to connect with a specific group and invite them to become beta users by trying the Kori plugin on their browser. This will help us gather valuable insights and feedback from their experiences, enabling us to improve the user experience and user interface of the Kori plugin.
I developed a beta referral program design utilizing Figma. As this project is hosted on the Sparc Cooperative website, I ensured that the design adheres to the Sparc Cooperative branding guidelines in order to maintain consistency with the organization's Brand Standards.
