Harbor Dashboard
Designing a Resource System for a Website Builder
To give clients more control over the types of rewards and items they offer users, I designed the Resource Creation System within the Harbor Dashboard—an internal tool that lets clients create custom resources like XP, currencies, loot boxes, and in-game items. These resources are built using a flexible framework that abstracts the complexity for end-users, allowing for seamless integration across features such as Quests, Check-Ins, Raffles, and Storefronts. My goal was to create a scalable, intuitive system that supports diverse reward strategies while keeping the user experience clean and consistent. Since launch, over 300 million resource transactions have been made across all Harbor websites, demonstrating high utilization by clients and end-users.
Problem
Clients needed a flexible way to create and manage a virtual economy on their Harbor-powered websites to support gamification. This included creating currencies, XP, and rewards like loot boxes or in-game items that drive incentivization and user engagement.
Design Approach
After discussing with engineers to determine the best approach for implementing an economy system, we agreed to design a concept called a "Resource." Resources can be abstracted to represent various item types, such as currency, XP, or loot boxes. Once created, each Resource can be assigned a specific tag that defines its behavior and functionality within the client’s website.
Solution
A Flexible Resource Management Tool for Every Client
Create Any Resource Type You Need
The system supports a variety of quest types including following accounts, retweeting and liking Twitter posts, joining Discord, watching YouTube videos, and more. This flexibility allows clients to create engaging campaigns that align with their community goals and outreach strategy.
Organize and Manage All Your Resources
To encourage participation, users earn XP, in-game currency, or loot boxes for completing social quests. These rewards can be tailored by each client to fit their ecosystem, making actions like sharing a post or joining a Discord server feel valuable and purposeful.
Built for Scalability and Integration
Every element of the module is brand-customizable, from button styles and background images to typography and iconography. This ensures that even while using a templated website builder, each client’s community hub looks and feels unique to their visual identity.
Handoff
Ensuring Pixel-Perfect, and Functional Implementation
Prototypes That Speak for Themselves
The system supports a variety of quest types including following accounts, retweeting and liking Twitter posts, joining Discord, watching YouTube videos, and more. This flexibility allows clients to create engaging campaigns that align with their community goals and outreach strategy.
Designing New Features with Existing Building Blocks (Components)
To reduce engineering lift and ensure consistency across Harbor’s dashboard, I maximized recyclability of old designs by nesting and reusing existing components such as buttons and modals. This modular approach allowed developers to plug the new feature into our existing design system with minimal overhead, speeding up implementation and reducing the need for redundant code.
Impact
More than 300 million transactions later, the Resource System continues to drive engagement and fuel digital economies across the Harbor platform…
