title-img
Monetizing Through Community:
A No-Code Approach to Integrating Commerce within Content
cover
date
2021 July - 2022 June
company
canD
canD is a no-code community-building platform that allows easy creation and management of social networks.
output
Responsive web,Mobile app (Flutter)
Team
Two Back-end Developer, Two Frontend Developer, One Mobile App Developer, One Product Manager, One Business Manager, One Product Designer(Me)
My Role
Customer interviews, Business model analysis, End-user Observation, Design system development, Prototyping, Mobile apps design, Responsive web design, Market release.
Overview
Service
canD, a no-code platform that allows users to combine components into blocks to build community networks, has grown to support 64 communities under my lead as the product designer.
Over four years, I've guided the product's design from user research and strategy to interaction and visual design, including leading the design system task force.
Project
The "Stories that Sell" project originated from identifying monetization needs during the community's growth phase.
The development of canD's product modules can be segmented into four major phases, each corresponding to different stages of community growth.
This project will particularly focus on the project that targets the monetization needs of these communities.
Evolution of canD
: Nurturing Community Engagement Tools
Project Background
This project aims to create a module that supports both Community Commerce and Commerce-driven Community by integrating community and commerce functionalities.
World Vision, an existing client, sought to add funding capabilities to their community-focused service, while Padobox, a commerce client, wanted to incorporate community features into their existing services.
Existing Client | Initial State
Community
vake
World Vision's platform nurtures growth and adds value for participants engaging in diverse social actions within SDG contexts.
We aim to integrate financial transactions into community platforms.
New Client | Pre Adoption
Commerce
pado
Padobox connects consumers directly with fishermen for fresh, affordably priced seafood, bypassing traditional distribution channels.
We seek to incorporate community elements into commerce services.
Achievements
logo
First NGO In-house Venture Spin-off
By incorporating commerce functionalities through canD, the World Vision NGO, as an operating client, successfully became the first in-house venture to spin off.
By adding community features through canD, the Padobox witnessed increased sales and a 78% increase in repeat purchase rates, proving potential and leading to successful investment attraction.
Evolution
Commerce-driven Community
New Era
Community Commerce
Project Process
01
Gathering client need
02
Analyzing business models
03
Creating New user scenarios (hypotheses)
04
Designing components and systems
05
Launching in the market
06
Incorporating client feedback
07
Planning next steps
Discover
Client Interviews, Observing, and Storyboarding
To understand client needs and the desired user experience aligned with business direction, I planned to conduct Client Interviews, Observing, and Storyboarding to gather insights.
Existing Client | Vake
New Client | Pado box
Painpoint
Juggling multiple services
for fundraising
juggling
Users drop off while using multiple tools for social actions within the community, especially when trying to engage in economic activities like crowdfunding.
Painpoint
Challenges in conveying service value through user experience
Customers appreciate direct trade's freshness and affordability but are discouraged by uncertain wait times and variable quality.
Approach
What if user-generated stories could directly fund social causes, turning engagement into a powerful force for good?
txt- title
Let's create connections that lead directly from these stories to products or funding opportunities.
The core content of a community is its stories. Engaging stories create fans, and storytellers become influencers. The rapport among stories, influencers, and fans strengthens the community.
Commerce-driven Community
Fill the waiting time of purchasing users with stories!
Community Commerce
Stories that Sell: Strategically connecting users directly from stories to funding opportunities.
Design
User Journey: Blending Storytelling with Commerce
The user journey unfolds in four stages:
(1)Enter, (2)Consume, (3)Waiting, and (4)Post-Participation pivoting around stories to blend narrative engagement with commerce
01
Enter
Users can enter through a Forum Post (Story) that transitions into products or includes embedded products. Story creators have the ability to direct others towards products or funding opportunities.
02
Consume
Users entering from Forum stories can engage with comments, Q&As, and support messages on product or funding pages, allowing decision-making through community-shared stories.
03
Waitting
After participating, users can monitor the progress of funding through stories, receiving updates on fishermen's activities and community involvement via live stories.
04
Post Participation
Upon receiving the goods, user reviews and post-participation testimonials become stories on the main page, encouraging further engagement from other users and enhancing the original author's immersion in the community.
Design
Story-Driven Component Design
Empowering Community Narratives :
Every user action is transformed into a story, enriching the community fabric with our meticulously crafted UI components designed to amplify and celebrate these contributions.
Items are designed for flexible widths, enabling admins to customize layouts by adjusting columns, rows, and scroll directions for desired item arrangements.
cover
Component Design Workflow
Leading and operating a Design System Task Force team. 
Spearhead the integration of legacy components and their updates into a new component system with each week's new component release.
Data Collection
Gathering scattered content data.
Data Flattening
Reorganizing data into a table and clarifying levels.
Data Segmentation
Dividing the table based on state, value, and item type constraints.
UI Design for Items
Designing the user interface based on the data.
Handoff and Release
Transferring designs to develope and launching features.
Feeback
Gathering feedback post-release for future updates.
Output
Real-World Implementations
Community Commerce
02 Participation
Funding
While participating in funding, users can continuously engage with both large and small stories through comments, words of encouragement, and viewing participation details with other users.
01
Entry
Posting
Enable direct entry from Forum Posts story suggesting fundraising projects through a seamless transition to Funding entries.
04
After participation
Rewarding
Post-funding, the journey is shared as stories, rewarding participants with badges or roles, encouraging ongoing engagement.
03 Waitting
Project Dashboard
Dashboard presents an integrated story of the campaign, including timelines, amounts, and allocation processes. ensuring transparency and comprehensive participation in social actions.
"The immediate community involvement reassured that I wasn't alone in donating"
*lmond (User)
Direct community-based funding enhances operational transparency and rewards, improving user experience over traditional methods.
The World Vision NGO, as an operating client, successfully became the first in-house venture to spin off. Higher participation rates were achieved compared to traditional funding.
"Participation brought a sense of fulfillment and the feeling of doing something important."
*kykim (User)
User Feedback & Result
Output
Real-World Implementations
Community Commerce
02 Participation
Purchase
Alongside product information, Featured Stories can be placed at the top, allowing for block group-based settings and placement.
01 Entry
Posting
Users entering through stories can directly access product pages via product inserts in the stories.
Home, Channels
Admins can display updates from fishermen and users in various community channels by combining block modules.
03 Waitting
Real-time story
Users can receive real-time updates from relevant fishermen while waiting.
04 After participation
Review posting
Reviews left by users after a purchase can become a post and be featured on the main screen.
02 Participation
Reveiw & QnA
Through comments and QnAs about products, fishermen and users can write other light-level stories together.
Users cheering for a fisherman facing issues while waiting for a product.
Users found it easier to understand the value of the service, immersing themselves and starting to enjoy the waiting experience.
Additionally, the client witnessed increased sales and a 78% increase in repeat purchase rates, proving potential and leading to successful investment attraction.
Users starting to have fun together through comments.
User Feedback & Result
Insights and Reflections
Design System: Leading a design system task force team and understanding the business impact and data structure significance of micro elements like UI components.
Effective UI design impacts business and user experience significantly, requiring designers' deep understanding of data and code for optimal results. Regular sync meetings help align web and mobile teams, ensuring consistency across platforms.
The element of 'story' serves as a foundational aspect of the community, establishing the social common sense and community rules.
User stories form the foundation of a community's vibe and drive revitalization, necessitating tools for story creation and designs that foster interactive engagements based on these narratives.
Responsibility in Setting User Autonomy, and Complex Decision-Making Based on Business Understanding
We focused on a flexible design to meet diverse brand needs, with our tool's adaptability and customization being key to its preference over others. Balancing UI integrity with broad customization options remains a challenge, highlighting the future need for component-level adjustments and diverse template styles.
People uniting amplifies collective power through financial flows, fostering a dynamic exchange between community and commerce.
Adding 'funds' boosts community strength, akin to nation-building, among people with common goals, leading to over 70% engagement and repurchase rates, far surpassing typical commerce rates.
We needed to design and make decisions based on the stories of both our diverse industry clients, including NGOs, cooking, parenting, real estate, seafood commerce, Web3, and their end-users.
A complex observation was made between the community desired by the client and the community desired by the users. Given the diverse purposes of operating communities, it was crucial to design inclusively, considering the age, gender, and behavior patterns of users in different