VOTDO – Pet Campaign & Donation Platform

Web Designer – Individual Contributor · 2017 · 6 months · 2 people · 9 min read

Delivered the complete frontend build of a purpose-driven pet campaign and crowdfunding donation platform — translating client mockups into a fully modular, emotionally resonant HTML5/CSS3 interface covering campaign discovery, donation workflows, and campaign creation, through to development team integration support

Overview

Built the frontend for VOTDO — a crowdfunding and campaign platform dedicated to pet welfare, enabling users to donate to causes they care about and launch their own fundraising campaigns for pets in need. The platform served two distinct user journeys: donors discovering and contributing to active campaigns, and campaign owners creating, managing, and promoting their own pet fundraising initiatives. Working as the sole frontend contributor, owned the full delivery lifecycle from requirement analysis and project planning through to pixel-accurate HTML5/CSS3 module builds from client mockups and development team integration support.

Problem

General-purpose crowdfunding platforms were not purpose-built for pet welfare campaigns — their interfaces prioritised broad applicability over the emotional storytelling and community engagement that animal welfare causes depend on to drive donations. Pet owners and animal welfare advocates needed a platform that led with empathy, made campaign discovery emotionally compelling, and made the donation and campaign creation process simple enough for non-technical users to complete without friction. VOTDO's frontend needed to translate this emotional product vision into an interface that was simultaneously warm and trustworthy — a balance that generic crowdfunding templates could not achieve.

Constraints

  • Donation workflows must inspire trust — visual design, payment step clarity, and confirmation feedback directly affect donor conversion
  • Campaign creation interface must be approachable for non-technical pet owners unfamiliar with crowdfunding platforms
  • Campaign discovery must lead with visual and emotional content — pet photos, campaign stories, and progress indicators are the primary conversion drivers
  • No frontend framework — built entirely in HTML5, CSS3, jQuery, and vanilla JavaScript
  • Design delivered as client mockups — implementation required faithful translation with emotional design intent preserved
  • Solo frontend contributor responsible for the full module set within the engagement timeline

Approach

Began with a requirement analysis that paid particular attention to the emotional design intent of the client mockups — in a donation platform, how content is presented is as important as what is presented. Mapped the complete module inventory and user journey flows: campaign discovery, campaign detail, donation checkout, campaign creation wizard, and user dashboard. Built modules in user journey order — campaign browse and discovery first, establishing the visual tone and content hierarchy that would carry through the full platform, then the campaign detail and donation flow, and finally the campaign creation and management interface. jQuery handled the interactive layer: donation amount selectors, campaign creation multi-step wizard, image upload previews, progress bar animations, and social sharing interactions.

Key Decisions

Campaign discovery interface designed around visual storytelling, not data density

Reasoning:

Pet welfare campaigns succeed or fail on emotional connection — a donor who sees a compelling photo and a clear, urgent story is far more likely to give than one presented with a data table of campaigns. Designing the campaign browse interface around large imagery, concise emotional headlines, and prominent progress bars — rather than a feature-rich filter and sort table — matched the emotional product vision in the mockups and reflected how successful donation platforms actually drive conversion. This required disciplined restraint in the CSS layout to ensure content, not chrome, dominated the page.

Alternatives considered:
  • Filter-heavy campaign list with sortable data table
  • Map-based campaign discovery by location
  • Algorithm-driven featured campaign carousel as the primary entry point

Multi-step campaign creation wizard over a single long-form page

Reasoning:

Campaign creation on VOTDO required non-technical users to provide a meaningful amount of information — campaign title, pet story, fundraising goal, photos, and payout details. Presenting all of this on a single long form would have been overwhelming and led to abandonment. A multi-step wizard — breaking the creation process into focused, clearly labelled stages — reduced cognitive load per step, made progress visible, and allowed partial completion to be preserved between sessions. This pattern also gave the development team cleaner integration boundaries per wizard step.

Alternatives considered:
  • Single-page campaign creation form with all fields visible
  • Guided template selection followed by a single editing view
  • Minimal creation form with detail editing deferred post-creation

Donation amount selector with preset options and custom input

Reasoning:

Donation platforms consistently see higher average donation values when users are presented with preset amounts rather than an open input field — preset options anchor expectations and reduce decision friction. Building the donation selector with both preset amounts and a custom input option gave donors the speed of a quick selection and the flexibility to give exactly what they intended. The selected amount was visually highlighted and the total was reflected in real time before checkout confirmation, reducing hesitation at the payment step.

Alternatives considered:
  • Open text input only for donation amount
  • Slider-based donation amount selector
  • Tiered donation levels with named reward tiers

Tech Stack

  • HTML5
  • CSS3
  • jQuery
  • JavaScript
  • Responsive Design
  • CSS Animations
  • Multi-Step Form Patterns

Result & Impact

  • Pet crowdfunding & donation
    Platform Type
  • Donor + campaign creator flows
    User Journeys
  • Solo frontend, full module set
    Delivery Model
  • Donation checkout + campaign wizard
    Interaction Complexity

VOTDO launched with a frontend that delivered on its emotional product promise — a pet campaign platform that felt warm, trustworthy, and purpose-built for animal welfare causes rather than adapted from a generic crowdfunding template. The campaign discovery interface led with visual storytelling, putting compelling pet photos and progress stories at the centre of the donor experience. The multi-step campaign creation wizard made the platform accessible to non-technical pet owners who would have abandoned a single long-form approach. The donation selector reduced checkout friction and anchored donor expectations with preset amounts. The engagement demonstrated the ability to translate emotional design intent — not just visual specifications — into a frontend that served the platform's human purpose.

Learnings

  • Donation and fundraising platforms are emotional products — frontend decisions about image sizing, typography scale, and content hierarchy directly affect how much a user cares about what they are seeing
  • Multi-step wizards are the right pattern for complex creation flows targeted at non-technical users — progressive disclosure reduces abandonment and makes each step feel achievable
  • Preset donation amounts are a UX decision with measurable financial impact — anchoring donor expectations with thoughtfully chosen presets is more valuable than an open input field alone
  • Consumer-facing platforms demand a higher standard of interaction polish than internal tools — hover states, transition timing, and loading feedback are noticed and felt even when users cannot articulate why
  • Emotional design intent must be preserved through implementation — a technically accurate translation of a mockup that loses the warmth of the original design has failed the brief, even if every pixel is in the right place
  • Solo delivery across a multi-journey platform (donor and campaign creator) requires deliberate sequencing — building the primary user journey to completion before starting the secondary one prevents half-finished experiences on both sides

Campaign Discovery & Browse

Built the emotionally-driven campaign discovery interface at the heart of the donor experience:

  • Campaign grid layout — visual-first browse interface with large pet photography, campaign titles, brief emotional summaries, and fundraising progress bars as the primary content hierarchy
  • Progress indicators — animated fundraising progress bars displaying amount raised, goal amount, and percentage complete — the primary social proof element for donor confidence
  • Campaign category filters — lightweight filtering by pet type, campaign urgency, and location without disrupting the visual-first layout
  • Featured campaign spotlight — hero placement for urgent or near-goal campaigns surfacing time-sensitive fundraising opportunities to donors on first visit
  • Campaign search — real-time search filtering campaign titles and descriptions as the user types, with jQuery-powered instant result updates

Campaign Detail & Donation Flow

Built the campaign detail and donation checkout experience with conversion and trust as the primary design concerns:

  • Campaign story page — full campaign layout with pet photography gallery, owner story, fundraising goal context, recent donor activity feed, and social sharing controls
  • Donation amount selector — preset donation amount buttons with custom input option, real-time total display, and selected state highlighting before checkout confirmation
  • Donation checkout flow — streamlined payment information collection with clear step indicators, field validation feedback, and trust signals throughout
  • Donation confirmation — success state with personalised thank-you message, campaign impact summary, and social sharing prompt to extend campaign reach
  • Donor wall — recent donor display with optional name and message attribution, providing social proof and community warmth on the campaign page

Campaign Creation Wizard

Built the multi-step campaign creation interface for pet owners launching their own fundraising initiatives:

  • Step-by-step creation wizard — multi-stage campaign setup breaking the creation process into focused steps: campaign basics, pet story, photo upload, fundraising goal, and payout details
  • Progress indicator — visual step tracker showing completed, current, and upcoming wizard stages, keeping non-technical users oriented throughout the creation flow
  • Photo upload with preview — drag-and-drop and browse-to-upload image interface with immediate thumbnail preview, crop guidance, and file validation feedback
  • Rich text story editor — formatted text input for campaign narrative with basic styling controls (bold, italic, lists) appropriate for non-technical campaign owners
  • Fundraising goal setting — goal amount input with suggested ranges based on common campaign types and a projected timeline calculator

Campaign Management Dashboard

Built the campaign owner interface for monitoring and managing active campaigns:

  • Campaign performance overview — dashboard summary of total raised, donor count, days remaining, and recent activity for each owned campaign
  • Donor management — list of campaign donors with donation amounts, messages, and timestamps, with export capability for campaign owner records
  • Campaign editing interface — post-launch editing of campaign story, photos, and updates to keep donors engaged throughout the fundraising period
  • Campaign update posting — owner update interface for sharing progress news with donors, displayed chronologically on the campaign detail page

Development Team Integration

Supported the backend team through the full integration phase:

  • Integration-ready HTML — semantic, templating-compatible markup across all campaign, donation, and wizard modules with consistent class naming and clear data binding points
  • Wizard step boundary documentation — annotated markup identifying data persistence points, validation requirements, and backend API calls at each campaign creation wizard step
  • Integration support — hands-on assistance resolving donation flow rendering, campaign data binding, and image upload integration issues during the development environment phase
  • Cross-browser validation — tested and resolved rendering and interaction inconsistencies across Chrome, Firefox, Internet Explorer, and Safari throughout the integration and QA phase
All projects