CreatorHub — Jae's IDP Portfolio

01 / Overview

Service Overview & Problem Definition

CreatorHub is the social layer of PropBank — a lightweight community space designed for sharing, not self-promotion.

What is PropBank?

PropBank is a cosplay and ACGN preparation platform that helps users discover events, source cosplay items with trust, access practical guides, and connect with the community — all within one integrated ecosystem. It consists of five services: CoNews (event discovery), Gear Library & Marketplace (buy/sell/rent cosplay items), Workshop (tutorials and guides), PropScan (AI-powered prop identification), and CreatorHub (community sharing).

What is CreatorHub?

CreatorHub is a social, informal, community-generated sharing space within PropBank. Unlike Workshop (which is structured and instructional), CreatorHub is designed for casual sharing — convention photos, cosplay progress shots, event memories, and community inspiration.

But it is not another social media app. Our research made that clear.

The Problem

Our user research revealed that cosplayers do want a community space, but their needs are fundamentally different from what mainstream social platforms offer. They want to share with friends, not build audiences. They want content grouped by events, not sorted by algorithms. And they want moderation built into the platform, not left to individual users.

"Friend posts are usually more important. It should predominantly feature friend stuff first, then random related ones."

— Interview participant (User K)

"I will immediately mute notifications on this app... except Convention News."

— Interview participant (User T)

"Album feature that allows you to ping or link other Cosplayers and group into events or Cons."

— Interview participant (User K)

Design Positioning

CreatorHub is a friend-first, event-linked community space that supports the PropBank ecosystem without trying to become another social media app. It prioritizes lightweight sharing, friend connections, event-grouped memories, and platform-enforced moderation — all while integrating seamlessly with the rest of PropBank.

02 / User Research

Understanding Our Users

Semi-structured interviews with 3 participants revealed clear patterns about what cosplayers actually want from a community platform.

Research Method

We conducted semi-structured interviews with three participants who had recently engaged with cosplay or ACGN events. Participants were purposively selected based on inclusion criteria (recent cosplay or convention participation within the past year). The interviews probed for pain points across event discovery, cosplay sourcing, learning resources, and community sharing — without revealing our planned features.

Affinity Diagram

We organized all raw interview statements into an affinity diagram, clustering them into five themes: Procuring Cosplay, Finding Events, Making Cosplay, Socializing, and AI. The Socializing theme was most directly relevant to CreatorHub's design direction.

Affinity diagram — user research statements grouped into themes. The "Socializing" column (rightmost) directly informed CreatorHub's design.

Key Findings Relevant to CreatorHub

Finding 01

Community sharing is a lower-priority feature than utility features

Users consistently valued event discovery and marketplace features more than social posting. One participant explicitly avoids posting for privacy reasons. This means CreatorHub must be lightweight — it should support the ecosystem, not try to dominate it.

Design decision → Keep CreatorHub minimal. Don't build a full social media platform.

Finding 02

Friend-centered, not feed-centered

Users want to see their friends' content first. They already "doomscroll enough elsewhere" and prefer active search over recommendation-heavy feeds. One participant said friend posts are "usually more important" than algorithmic content.

Design decision → Default feed shows friends' posts chronologically. Discovery is opt-in via a separate Explore tab.

Finding 03

Event-linked grouping is desired

Users want to tag posts to specific conventions and group photos by event — like Instagram highlights, but for shared convention memories. This creates a natural connection between CreatorHub and CoNews.

Design decision → Posts can be tagged to CoNews events, creating browsable event albums.

Finding 04

Moderation is essential

NSFW content and drama are real concerns in cosplay communities. Users don't want to manage moderation themselves — they expect the platform to handle it.

Design decision → Platform-enforced moderation. NSFW flagging built into the upload flow.

Finding 05

Notification control is non-negotiable

At least one user said they would mute everything except event news. Recommendation notifications feel like spam. Users want to know when a friend tags them — not when the algorithm has a suggestion.

Design decision → Granular notification categories: Friends, Explore, System — each independently controllable.

User Persona

Kai Ng

22 years old · University Student · Casual cosplayer & convention-goer

Background

Kai goes to 4–5 conventions a year and cosplays at about half of them. After each event, he takes photos and wants somewhere to share them with friends — not a full photoshoot, just casual group memory-keeping. He has Instagram but finds it too public. He's the person in his friend group who keeps track of who's going to what. He's not trying to build an audience.

Goals

Share event photos with the specific group he attended with, grouped by event
Stay aware of what his cosplay friends are up to without switching apps
Browse cosplay inspiration on his own terms, not because an algorithm pushes it
Control how much noise the app throws at him

Pain Points

Instagram is too public; photos get mixed with everything else
No good way to group photos by event or shared context
NSFW content and drama surface in niche cosplay communities
Apps that send constant notifications get muted, causing him to miss things he cares about

Needs from CreatorHub

Event-linked albums for grouping photos by convention
Friend-first feed as the default view
Easy friend tagging in posts
Granular notification controls
Platform-enforced moderation

User Journey Map

Kai's journey: "Sharing Convention Memories Without Losing Control"

03 / User Tasks

End-to-End Task Flows

Three core user tasks define the CreatorHub experience, each designed around the persona's goals and research findings.

Task 4.1

Share Cosplay / Prop Content

The user returns from a convention and wants to share photos with friends, tagged to the event and enriched with AI-suggested tags.

Trigger Post-event. User has convention photos to share.

Context Anywhere, on mobile.

Success Criteria Post created and visible to tagged friends within the event album.

Task Flow

Open CreatorHub from navbar
Tap "Create Post" (FAB button)
Select content type (photo / video)
Upload media from gallery or camera
Add caption and tags (character name, series, event)
Tag collaborators (cosplayer, photographer, prop maker)
Review AI auto-suggested tags from PropScan
Set visibility (public / friends only / private)
Review and publish

Task 4.2

Browse and Interact with Friend & Event Content

The user opens CreatorHub to see what cosplay friends are up to, interact with posts, and curate content into collections.

Trigger Idle browsing / checking in on friends.

Context Casual use, anywhere.

Success Criteria User finds relevant friend content without algorithmic noise.

Task Flow

Open CreatorHub from navbar
Feed loads with friend-first content
Browse general feed or search for event name
Click on event collection or continue scrolling
Tap a post to view in detail
Like, comment, or just view
View tagged collaborators, event tags, linked workshops
Optionally add post to a collection

Task 4.3

Discover and Follow Creators

The user discovers new cosplay creators through search or recommendations, evaluates their credibility across the ecosystem, and follows those who inspire them.

Trigger Seeking inspiration or new content.

Context Browsing mode, not task-driven.

Success Criteria User follows a creator whose posts appear in their friend-first feed.

Task Flow

Open CreatorHub and tap Search or browse feed
Enter search query or browse recommended creators
View search results (posts and creator profiles)
Tap on a creator's profile
View their post history and portfolio
Check cross-service reputation (Gear Lib reviews, Workshop contributions)
View last active date and posting activity
Decide: Follow or return to browsing
Creator's posts now appear in feed; optionally send a message

04 / Ideation

Exploring Directions

From research insights to design decisions — how we went from "what users need" to "what CreatorHub should look like."

How Might We...

"How might we help users share convention memories without it feeling like 'another social media app'?"

"How might we surface friend content first while still enabling broader discovery?"

"How might we integrate PropScan AI into post creation without being intrusive?"

"How might we connect CreatorHub posts to specific events across the ecosystem?"

Key Design Decisions

Friend-first feed vs. algorithmic feed

We chose a chronological friend-first feed as the default, with a separate "Explore" tab for broader discovery. This directly addresses the research finding that users prefer active search over algorithmic content pushing.

Image-forward post format

We chose large image cards over text-heavy post formats. The cosplay community is inherently visual — photos of costumes, props, and events are the primary content type. This also aligns with the group design system principle of being "image-led."

Event-linked posts via CoNews tags

Rather than building a separate album feature, we chose a tag-based linking system where posts reference CoNews events. This creates browsable event collections naturally and strengthens the ecosystem integration.

05 / Prototyping

From Wireframes to Hi-Fi

Iterating from lo-fi structure to a polished prototype that applies the shared PropBank design system.

Lo-fi Wireframes

The lo-fi prototype established the information architecture and core interaction flows across 10 screens. Focus was on structure and logic before visual polish.

View Lo-fi wireframes in Figma →

Design System

CreatorHub follows the shared PropBank design system — a "Beige Theme" with consistent typography, color palette, components (CTA buttons, search bars, filter chips, snackbars), and navigation patterns. This ensures visual coherence across all five services.

Lo-fi to Hi-fi: What Changed and Why

Lo-fi

Basic wireframe post cards with placeholder content and minimal visual hierarchy.

Hi-fi

Applied the Beige Theme with proper typography, avatar components, tag chips, and the shared bottom navigation bar.

Lo-fi

Create Post flow had basic text fields without AI integration.

Hi-fi

Added PropScan AI tag suggestion UI ("AI Suggested Tags") as dismissible chips below manual tags. Added the 3-step progress indicator.

Lo-fi

Creator Profile with basic placeholder layout.

Hi-fi

Added cross-service reputation display (Gear Lib rating, Workshop guides published, last active), follow/message CTAs, and post grid.

Hi-fi Prototype Screens

The final hi-fi prototype implements all three user tasks with full visual design, interaction patterns, and ecosystem integration points.

View interactive Figma prototype →

Shared Utility: Settings & Profile Pages

Beyond CreatorHub, I also designed the Settings and Profile pages as shared utilities used across the entire PropBank ecosystem. These include My Profile (display name, bio, reputation score, activity history), and Account Settings (password, email, linked accounts, notification preferences, privacy, content visibility, data export).

Lo-fi

Wireframe structure for profile and settings screens with basic field layout.

Hi-fi

Applied the design system with grouped settings categories (Account, Preferences, Data & Storage), reputation score display pulling cross-service data, and activity history feed.

06 / Service Integration

Connecting to the Ecosystem

CreatorHub doesn't exist in isolation — it's deeply connected to every other PropBank service through deliberate integration points.

CreatorHub ↔ CoNews

Event-Linked Content

Users tag posts to CoNews events, creating browsable event albums. CoNews event pages have a "Community Posts" tab showing CreatorHub content tagged to that event. Friends' posts are surfaced first.

CreatorHub ↔ Marketplace

Product Linking

Posts can embed mini product cards from the Marketplace. Seeing a prop in a post can link directly to its marketplace listing for purchase or rental.

CreatorHub ↔ Workshop

Guide Connections

Users can tag a Workshop guide they followed to create a specific prop or look. Viewers tap the tag to jump directly to the tutorial. High-quality creator content can inspire new Workshop guides.

PropScan → CreatorHub

AI Tag Suggestions

During post creation, PropScan analyzes uploaded images and suggests relevant tags (character names, prop types, events). This is the AI integration point for CreatorHub.

CreatorHub → Profile

Portable Reputation

CreatorHub activity (posts, followers, engagement) contributes to the user's unified PropBank reputation, visible across all services. Creator profiles display cross-service metrics.

Entry & Exit Points

Direction	From / To	Mechanism
Entry	Bottom navigation bar	"Social" tab in the persistent bottom nav
Entry	CoNews event page	"See Community Posts" button on event detail
Entry	PropScan results	"Related Posts" section in scan results
Entry	Workshop guide / author profile	Tapping creator name links to CreatorHub profile
Exit	To CoNews	Tapping an event tag on a post
Exit	To Marketplace	Tapping an embedded product card
Exit	To Workshop	Tapping a linked guide tag on a post

Cross-Service Journey Example

Scenario: Kai attends AFA Singapore 2026. He opens CoNews to check the event schedule. After the event, he taps "See Community Posts" on the AFA event page, which takes him to CreatorHub's event album. He creates a post, uploads photos, and PropScan suggests tags like "Nezuko" and "custom bamboo mouthpiece." His friend sees the post, taps the bamboo mouthpiece tag, and lands in Workshop to find a guide on making one. Another friend taps a tagged cosplay wig and lands in Marketplace to find similar items for sale.

07 / AI Interaction Design

PropScan Tag Suggestions

A non-intrusive AI feature that helps users tag their posts accurately, powered by PropScan's image recognition.

The Feature

When a user uploads images to a new post, PropScan analyzes the images and suggests relevant tags:

• Character names (e.g., "Hatsune Miku", "Nezuko")
• Prop types (e.g., "wig", "weapon", "accessory")
• Event associations (if metadata matches a CoNews event)

Tags appear as dismissible chips labeled "AI Suggested Tags (PropScan)" in the Create Post flow. The user retains full control — every suggestion can be accepted, modified, or dismissed.

Why This Design?

"Users respond more positively to non-intrusive, task-based AI than to recommendation-heavy AI."

— Key Finding 5 from user research

Our AI design follows three principles from the research:

User-triggered

AI only runs when images are uploaded. It doesn't push content or recommendations unprompted.

Task-oriented

It assists a concrete task (tagging) rather than vaguely "enhancing" the experience.

User-controlled

Every suggestion can be dismissed. Manual tag input remains available alongside AI suggestions.

AI Interaction Flow

Create Post — Step 2 of 3: showing AI Suggested Tags (PropScan) as dismissible chips alongside manual tags, collaborator tagging, and visibility controls

Edge Cases

No results

"No suggestions found. Add tags manually." The flow continues without friction.

Wrong suggestions

User dismisses incorrect tags with a tap. System can learn from rejections over time.

NSFW detection

PropScan flags potentially inappropriate images before posting, connecting to the moderation need identified in research.

08 / Evaluation

Evaluation

Assessing the usability and effectiveness of the CreatorHub prototype.

Usability Testing Approach

We conducted unmoderated remote usability testing using Maze. Participants were given the interactive Figma prototype and asked to complete 4 task flows independently, with screen recordings captured throughout. After each task, participants responded to an emotional scale question. A summative satisfaction questionnaire was administered at the end of the session.

Method

Unmoderated remote testing via Maze with self-administered tasks and screen recording

Participants

3 participants

Metrics

Task completion rate, time on task, emotional scale, summative satisfaction score

Tasks Tested

Task 1

Create a New Post

Try creating a new post. Images, tags, captions, etc. are all pre-selected for you — walk through the full post creation flow.

Task 2

Search & View Event Content

Can you search "AFA Singapore 2026" and view the first post?

Task 3

Save Post to Collection

Can you save the first post in the feed to a collection?

Task 4

View Creator Profile

Can you open the profile of the creator of the first post in the feed?

Key Findings

Finding 01

Create Post FAB was hard to discover

Users found it difficult to find and locate the small "+" button at the bottom right of the Feed screen to initiate the post creation workflow. The FAB button lacked discoverability for first-time users.

Design change → Added a small "Create Post" card at the top of the post feed to initiate the post adding workflow, complementing the existing FAB.

Finding 02

"Save" button had a signifier issue

Users had a hard time finding the button to save a post to their collection. The label "Save" was ambiguous — users were unsure whether it saved the post itself or added it to a collection.

Design change → Renamed the button label from "Save" to "Save to collection" to make the affordance explicit.

Changes Made Based on Evaluation

Two iterative changes were made to the hi-fi prototype based on testing feedback:

• Added a Create Post card at the top of the feed to improve discoverability of the post creation flow, without removing the existing FAB for returning users.
• Renamed "Save" to "Save to collection" on post detail pages, clarifying the action's intent and aligning with the mental model of users navigating to the Collections feature.

09 / Reflection

Reflection

Looking back on the design process, decisions made, and lessons learned.

Design Process Reflection

Going into this project, I thought designing a "community sharing" feature would be straightforward — people already know what Instagram or Pinterest feels like. But the user research flipped this assumption. Throughout the design process, I watched the product being driven in a direction clearly backed by user research findings, and along the way I applied methodologies taught in class to structure the otherwise unstructured research and translate it into meaningful design decisions. I believe experiencing the entire design pipeline firsthand is invaluable for me as an engineer in an era where building software is easy, but deciding what to build is the true differentiator.

AI in the Design Process

I used AI tools throughout the design process — generating ideation variants, drafting copy, critiquing user flows, and producing the portfolio website itself. Along the way, I accepted structural suggestions for task flow breakdowns, wording refinements for design rationale, and initial layout scaffolding. However, I overrode AI suggestions on task workflows that pushed CreatorHub toward a richer social experience, such as engagement metrics and recommendation feeds. These contradicted the research findings, and I had to pull the design back toward restraint. I learned that AI is good at producing the standard answer to a problem, but my research told me the standard answer was wrong for this context.

Trade-offs and Conflicts Resolved

While designing the common group components, I was responsible for the profile and settings screens. One decision we had to make as a group was whether to have a separate profile for each service — like a dedicated Marketplace profile alongside a common profile screen — or just one unified profile screen. Given that a super-app should form a unified ecosystem across services, and that we had already agreed on a unified reputation score shared across all services, we decided after team discussion to go with a single common profile screen to minimize user confusion.