UI/UX Design & Development 2024

The Pink Envelope | Subscription Box Review Platform

A full-platform build for The Pink Envelope, a subscription box review and gifting directory site. Designed in Figma and built on WordPress with Elementor Pro, Crocoblock JetEngine, dynamic member dashboards, listing owner profiles, and a membership subscription system.

JetEngine Dynamic Listings

2-Side Member + Owner Portal

Figma UI/UX Design

Platform WordPress + Elementor Pro + JetEngine + Crocoblock

Project Type UI/UX Design (Figma) + Full Platform Development

Year 2024

Category Marketplace / SaaS Platform

The Project

What we built and why

The Pink Envelope is a subscription box review and gifting platform run by Samantha, covering subscription boxes across clothing, beauty, lifestyle, home decor, fitness, and education categories. The site combines editorial content, unboxing videos, coupon codes, and a curated directory of subscription box listings.

This was a long, complex build with two distinct user types: readers browsing reviews and deals, and subscription box owners managing their own directory listings. Both sides needed dynamic dashboards, membership access control, and a clean user experience built entirely in Figma before development began.

We built the full platform on WordPress with Elementor Pro and Crocoblock JetEngine for the dynamic directory, JetSmartFilters for category filtering, JetFormBuilder for listing submissions, and a multi-tier membership system controlling what each user type can access and publish.

Stack & Tools

Technologies used

WordPress CMSElementor ProCrocoblock JetEngineJetSmartFiltersJetFormBuilderMembership / Access Control SystemWooCommerce SubscriptionsFigma (UI/UX Design)Custom CSSCustom JavaScriptMobile-First Responsive Design

Visual Work

The design across all devices

The Pink Envelope | Subscription Box Review Platform desktop view

Desktop — 1440px

The Pink Envelope | Subscription Box Review Platform tablet view

Tablet — 768px

The Pink Envelope | Subscription Box Review Platform mobile view

Mobile — 375px

Design Process

How we approached it

The Figma design phase covered every page and user state across both sides of the platform: the public editorial site, the subscription box directory, individual listing pages, the reader member dashboard, and the listing owner dashboard with submission and editing flows.

The visual direction is warm, feminine, and editorial. Pink tones, clean card layouts, and generous use of video thumbnails reflect the brand's YouTube-first identity. The directory section uses a structured card grid with category filtering, price information, and coupon codes surfaced directly on listing cards so readers get value without clicking through.

The listing owner experience was the most complex design challenge. Box owners needed a self-service portal to create, edit, and manage their directory listings, upload images, set pricing and frequency, and manage their subscription tier. All of this had to work as a frontend experience with no WordPress admin access.

Development

Build highlights

JetEngine Dynamic Directory

Built the full subscription box directory on JetEngine custom post types, with each listing storing brand name, category, pricing, frequency, coupon code, description, and images as structured dynamic fields. All listings render from a single Elementor template, fed by JetEngine data.

Listing Owner Dashboard

Built a frontend dashboard for subscription box owners to create and manage their own directory listings without WordPress admin access. Owners submit listings via JetFormBuilder, edit them from their dashboard, and see their listing status and membership tier in one place.

Reader Member Dashboard

Built a separate frontend dashboard for reader members with saved listings, personalised deal alerts, exclusive coupon access, and account management. Access to features is controlled by membership tier, applied automatically on login.

Multi-Tier Membership System

Architected a membership system covering both user types across multiple tiers. Reader tiers unlock deal access and saved listings. Listing owner tiers control how many listings they can publish, their directory placement priority, and whether they appear in featured sections.

JetSmartFilters Category Filtering

Implemented real-time filtering across the directory by category (clothing, beauty, lifestyle, home decor, fitness, education), price range, subscription frequency, and availability. Filters update results instantly without page reload.

Video-Integrated Editorial Layout

Built the editorial sections, review pages, and homepage with YouTube video embed integration and thumbnail display, matching the site's video-first content strategy. The Watch section pulls the latest videos from the channel and surfaces them alongside written review content.

Problem Solving

Challenges & solutions

Challenge

Two completely different user experiences on one platform

The Pink Envelope serves readers looking for subscription box deals and box owners managing their listings. These two groups have different dashboards, different access rules, different content needs, and different membership tiers. Managing both cleanly on one WordPress install was the core architecture challenge.

Solution

Role-based access with separate dashboard flows

We built two entirely separate frontend dashboard flows using JetEngine and the membership system. On login, users are routed to the correct dashboard based on their role. Reader members see their saved listings and coupon access. Box owners see their listing management tools and subscription status. No overlap, no confusion.

Challenge

Letting box owners manage listings without touching WordPress

Subscription box owners are brand managers and small business owners, not developers. They needed to submit listings, upload images, set pricing details, and edit their entries entirely from the frontend. Any requirement to access WordPress admin would have broken the product.

Solution

Full frontend submission and editing via JetFormBuilder

We built the entire listing lifecycle as a frontend experience using JetFormBuilder for submissions and JetEngine's frontend editing for updates. Box owners create, edit, and manage listings from their dashboard. The site admin reviews and approves submissions from WordPress, but owners never need to go there themselves.

Outcome

Results & impact

The Pink Envelope launched with a platform that serves both audiences cleanly. Readers get a structured directory with real-time filtering, surfaced coupon codes, and a personalised membership experience. Box owners get a self-service listing system that puts them in control of their directory presence without needing developer support for updates.

The directory now lists brands across clothing, beauty, lifestyle, home decor, fitness, and education categories. The membership system creates recurring revenue from both sides of the platform, and the editorial content continues to drive organic traffic from YouTube to the directory.

JetEngine Dynamic Listings

2-Side Member + Owner Portal

Figma UI/UX Design

5+ Membership Tiers

Takeaway

Final thoughts

The Pink Envelope needed two platforms in one. JetEngine, Crocoblock, and a Figma-first build delivered a reader portal and a listing owner system on a single WordPress install.

This project required clear architectural thinking before a single page was built. Two user types, two dashboards, multiple membership tiers, a dynamic directory, and a listing submission system all had to coexist on one platform. The Figma design phase resolved the UX before development started. JetEngine handled the dynamic data layer. The result is a platform both audiences use independently, without ever needing developer involvement for day-to-day operations.

Next Project

Jim Venetos Golf Academy | Custom WordPress Gamification Plugin

View Case Study