Business Challenge & Scope

I was hired as Knowledge Future's first full-time designer to establish robust yet lean design processes and systems while refining existing user flows and building entirely new features.

I joined during a critical transition as the team migrated from the original PubPub—well-loved by users but limited to basic styling customizations—to PubPub Platform, a more powerful version designed to address the architectural, data-specific, and workflow management needs of high-value publishing clients who required deeper customization capabilities.

This project encompassed many different areas, including how publishing communities structure and manage their data, but for this case study I'll focus on the platform's Form Builder—a critical component that determined how communities would organize and publish their content.

Research & Discovery

The discovery process for this feature required a deep understanding of what a 'Form' meant to both Knowledge Futures stakeholders and users. This concept was spearheaded by KF's Head of Product, and when I began work, a rudimentary developer prototype was already in place.

I spent a week understanding the problem the team was trying to solve through Forms and how this concept related to the smaller JSON schemas users were creating. After interviewing team members and key users, I researched products with similar functionality—primarily Google Forms and Contentful—as starting points for ideation.

Primary Problems

• The term 'Form' was overloaded within the KF team, referring to several different concepts, which frequently caused confusion in meetings. Recognizing that internal confusion would inevitably translate to user confusion, this experience made me hyper-aware of language consistency throughout the platform.

• Many design requirements for the Form Builder were highly conceptual and not fully developed, making developer collaboration essential to ensure my designs aligned with the technical solution the team envisioned.

• The primary user base wasn't accustomed to conceptualizing their data structure in this new way, requiring me to design solutions that guided and educated users through the mental model shift.

Strategic Approach & Methodology

Given our capable development team and highly invested user base, I leveraged Lean UX methodology to guide the Form Builder's development in the right direction. This approach allowed us to validate concepts early with real users, iterate quickly based on feedback, and maintain close alignment between design and development throughout the process.

In practice, this meant sharing mockup progress with the development team daily via Slack and conducting formal design reviews 1-2 times per week to ensure we stayed aligned despite the team's demanding schedule.

Since the product and research teams were the primary users for this initial iteration, I collaborated closely with our customer success manager to test and validate these mockups before development.

Once in production, I observed one of our lead developers—who had been less involved in the design process—navigate the interface while also collecting feedback from an academic publishing community beta testing the platform, documenting areas of friction and confusion from both sources.

Implementation & Adoption Strategy

To understand the Form Builder mockups, it's helpful to know how PubPub Platform structured community data:

• A 'Pub' represented a single piece of content
• Each Pub was assigned a Type that determined its available fields
• Types were collections of specific fields
• Forms were designed to help communities manage variations of Types more easily

The data hierarchy flowed: Fields → Types → Forms → Pubs

Below is a quick diagram I drew to share with my Lead Developer to ensure I had appropriate understanding of this data hierarchy:

PubPub Platform Data Hierarchy Notes

To ensure a smooth rollout, I built upon UX patterns already familiar to users throughout the platform. This consistency-first approach reduced cognitive load for users while allowing developers to focus on the feature's core functionality rather than new interface paradigms.

Product Mockups

Let's explore the mockups for the Form Builder by following a user's path through the feature from start to finish.

Forms Landing Page

This page appears immediately after users create a Type. I kept the design minimal to focus on explaining Forms within the broader application context.

The main challenge was concisely communicating the distinction between internal Forms (used by community members to create and edit existing Pubs) and external Forms (used by outside contributors to create new Pubs through submission).

While this solution provided a foundation for user testing, the primary feedback indicated that the explanation felt too generic, revealing several areas for future iteration.

Create New Form

For creating a new form, I leveraged an existing modal pattern from elsewhere in the application to collect essential form configuration details.

Each field included clear explanations of its purpose and impact, helping non-technical users understand what to expect from their choices.

Form Detail

Upon creating a form, users were taken to the Form Detail page, which displayed fields pre-populated based on the Type selected in the previous modal.

Each field appeared as a card showing essential information at-a-glance. Users could drag to reorder these fields as they pleased, or add additional fields beyond those defined in the Form's canonical Type.

Users could also add explanatory text and structural elements such as border rules to improve readability and comprehension during form completion.

Add New Field

If a user chose to add a new field, they would be shown all available fields from their community's field library.

Configure New Field

When configuring or editing a field, users saw appearance options showing how the field would display in the final form interface.

Recognizing this as a crucial step in helping users understand how their JSON schemas would translate into actual UI elements, I made the descriptions extra detailed to help users choose the most appropriate form elements for their content collection needs.

Field Added

Form Preview

Anticipating that the form builder could be overwhelming for new users, I advocated for implementing a preview feature to help users create better forms and collect higher-quality content.

We decided not to include previews in the MVP, but it became our most requested feature from external users during testing. Fortunately, having already designed the mockups made implementation straightforward for our second iteration.

Results & Impact

The Form Builder delivered significant positive impact for users and the team. External users quickly adopted the feature once preview functionality was implemented, praising its intuitive interface for structuring form data.

While I lack quantitative comparison metrics since this was an entirely new capability not present in the previous PubPub version, user feedback consistently highlighted how much faster communities could now create the various forms they needed.

Beyond efficiency gains, the Form Builder served as the final piece in helping users understand the value of structured data for content reusability—a key strategic goal for the platform.

From a team perspective, this was my first complete feature collaboration with the development team, successfully validating our new design processes while revealing specific areas for future refinement. The project established confidence in our methodology and created a foundation for subsequent design work.

Lessons Learned

Entity Component Systems

Working through this feature provided deep insights into PubPub Platform's core purpose and strategic direction. The process revealed numerous technical constraints that shaped my understanding of designing within an Entity Component System architecture.

Below is a screenshot I shared with my lead developer while working on the Form Builder to understand how user data would ultimately interconnect within the system. This deep technical understanding proved essential for creating scalable solutions that could adapt to diverse use cases within the platform.

My Figma Notes on ECS and how the concept translated to PubPub Platform

Form Builder Submission Button

Another key lesson involved the placement of customizable submission buttons, which users frequently overlooked or forgot to configure.

The current placement made this critical element easy to miss. If I were to redesign this feature, I would treat the submission button as a permanent, non-movable field pinned to the bottom of the form, ensuring users couldn't overlook this essential step in their workflow.

I would also recommend making submission buttons discoverable through the 'Add Element' menu, providing an alternative pathway for users who prefer that interaction pattern.

In Closing

This represents a small sample of my work with the Knowledge Futures team. I'd be happy to discuss any of these details in greater depth—please don't hesitate to reach out.

Below you can explore a live site designed and built by the Knowledge Futures team using the platform and features outlined in this case study.