Web App Case Study

Glitter

A web app member hub for user and city block data, providing real-time insights and dynamic user interaction.

Role

Product Manager

Timeline

April 2024 – September 2025

Team

Product Manager/Designer, CEO, Founder

Glitter is a social impact cleaning service based in Philadelphia. They facilitate neighbor-funded cleanups for their city blocks, hiring and paying a living wage to cleaners who often have barriers to work. This case study provides an abbreviated overview of the design process behind the web app member hub.

Key Outcomes

Launched a dynamic, on-brand member hub that surfaces real-time, city block-level information, improving visibility, trust, and engagement across the platform
Designed a centralized data foundation across 1,000+ users and city blocks, enabling consistent data surfacing and providing a scalable base for future core business and grant-funded initiatives

Design Context

Designing for Integration and Scale

How might Glitter design an accessible, on-brand experience for users that could be built on top of and in step with Airtable data? As a lean startup, Glitter needed a tool that was: cost effective without the need for custom development, could be managed entirely in-house, and provided an out of the box solution without a steep learning curve. After considering multiple options, Softr proved to be the best solution.

Design Strategy

Clear, accessible UX for users with varying technical abilities
Balance visual design with robust data logic
Conditional visibility based on permissions and status
Maintain brand consistency across all touchpoints

Designing for an on Brand Experience

Glitter already had an established brand guide, created by Smith & Diction. Designing the web app required working within Softr’s native static and dynamic div block structures while incorporating custom elements such as Adobe Fonts. The goal was to deliver a seamless, cohesive brand experience across the web app.

Snapshot of Glitter's brand guide

Color, typography and branding applied using a mix of native styling in Soft's dynamic div block structure and custom code.

Design Context, Part One: How It Started

Early user flows and wireframes were intentionally loose, focused on defining structure, hierarchy, and critical data rather than refining UI. This gave us room to adapt once real platform constraints and trade-offs emerged inside Softr. Initial user interviews leveraged low-fidelity mockups to gather both high-level and detailed feedback, informing synthesis and guiding subsequent design iterations.

User Flow Mapping and Wireframing

Created initial user flows and wireframes in Figma to map the user journey
‍

Low-Fidelity Prototyping

Transitioned Figma prototypes into Softr's editor, iterating on design to accommodate functionality and data considerations

User Interviews and Feedback

Conducted user interviews sessions with users, synthesizing data and prioritizing feedback

Design Context, Part Two: Renewed Focus

As early design concepts evolved alongside two major grant-funded initiatives, Glitter partnered with a digital product agency to support UX refinement and asset development, later consolidating execution back in-house.

With clearer alignment and renewed focus, we returned to the core structure, iterating on what was working, refining what wasn’t, and rebuilding directly within Softr. This phase emphasized thoughtful execution, deeper customization, and a tighter connection between data architecture, brand, and user experience.

Where previously delivered assets fell short of expectations, we leveraged AI-assisted tools to generate adaptable visual components that, while not identical to the original Smith & Diction brand work, provided a cohesive and flexible extension of the identity within the web app. Additional refinement came through implementing targeted custom code, including window record lookups, to ensure dynamic data was pulled accurately and updates required minimal manual intervention.

High-fidelity design in the Softr editor

Designed polished dynamic and static templatized mockups that would scale to 1,000+ city blocks in Glitter’s database

Advanced Customization

Extended Softr's out-of-the-box capabilities with custom HTML/CSS and window.record lookups

Key Feature: Dynamic page templates

How Might we build trust and increase visibility while streamlining onboarding for new city blocks and users?

Previously, Glitter relied on a manual, time-consuming workflow that made scaling difficult. Each new city block or user required hand-creating fundraising pages, uploading images, and manually adjusting contribution amounts, slowing onboarding and limiting visibility for end users.

We designed scalable page templates that dynamically pull data across 1,000+ city blocks in Glitter's database, conditionally displaying block details, funding contributions, and cleaning status to improve transparency and accelerate onboarding.

Before: Static Pledge Pages

Manual updates required for each block, no real-time data

After: Dynamic Page Templates

Real-time data, conditional visibility, permission-based access

The public view of a city block’s page provides clear, block-specific details while introducing Glitter’s broader services, helping users easily imagine what the program could look like on their own block.

The page is accessible through multiple entry points, whether users arrive via the interactive map on Glitter's web page or by scanning a QR code on a street sign.

Once signed in, users are brought to a personalized dashboard that conditionally reflects their block association based on their account. Visual cues, like the waving raccoon mascot and block-specific UI cards, reinforce correct identification and give users clear access to detailed block information.

Grant-funded blocks are surfaced alongside neighbor-funded blocks through the same templated, conditionally driven system. By planning for their inclusion in the database, Glitter made large-scale grant-funded initiatives visible, allowing residents to opt in to additional pledges to support expanded cleaning.

Key Feature: Dynamic page templates

How Might we build trust and increase visibility while streamlining onboarding for new city blocks and users?

Before: Static Pledge Pages

Manual updates required for each block, no real-time data

After: Dynamic Page Templates

Real-time data, conditional visibility, permission-based access

Collaboration and Impact

Designing at scale required collaboration across teams, stakeholders, and users

This work was shaped through close collaboration with internal stakeholders, operations, and external stakeholder partners. Input from cleaners, user interviews, and the Softr team directly informed design decisions, ensuring the solution worked in real-world workflows, not just in theory.

Internal Stakeholder alligment

Partnered closely with leadership to align on vision, goals, and constraints. Through ongoing prioritization and trade-offs, design decisions balanced business needs with scalability and long-term maintainability.

User research and validation

Facilitated user interviews with leadership and synthesized insights to surface trust signals, clarity gaps, and onboarding friction. Research findings and ongoing feedback informed product and design decisions, balancing user needs with technical and data constraints.

Operational and cleaner feedback

Collaborated with operations and cleaners to understand on-the-ground workflows and constraints. Their input surfaced edge cases and operational realities that directly shaped data visibility, content hierarchy, and system design.

Platform and partner collaboration

Worked directly with the Softr team to navigate platform constraints and capabilities. These discussions shaped implementation decisions around dynamic data, templates, and custom code integrations to ensure scalability and a consistent product experience.