JosephWeb Design

Web design

Web design that converts.

500+ pages shipped across homepages, product pages, collections, listicles, ad landers, blogs, and lead-gen funnels. I research the customer, write the copy, design mobile-first, and build it myself.

+41%
revenue after the product page redesign
+89%
average time on page
500+
pages shipped across industries

Concept work

Redesigning mega brands.

Unsolicited, unofficial redesigns of household names. What I’d ship if they handed me the keys. Swipe through, hover to scroll a page, click to try the live build.

01 / 05 · Product page concept

The idea

A product page rethink for Bose's flagship headphones. Every shopper at $449 has the same question: why pay $90 more than the regular QuietComfort? This page answers it before they go looking somewhere else.

Compare with the originalBose's live product page

What I designed

  • Pick a color and the whole page re-themes to match, from the gallery backdrop to the accent details.
  • An Ultra vs QuietComfort comparison that spells out what the extra $90 buys, with a toggle to show only the differences.
  • Animated diagrams for each listening mode: noise fading out, ActiveSense flattening a spike, sound staying put as your head turns.
  • Launch films that play muted on scroll with one-tap sound, plus a CustomTune demo and a battery-life calculator.
  • A sticky product bar on desktop, and an Add to cart that stays in the thumb zone on mobile.

Unofficial concept redesign for portfolio purposes. Not affiliated with Bose Corporation.

02 / 05 · Shade finder concept

The idea

A shade finder that actually finds your shade. Today, Sephora's Find My Shade page has no finder on it: six steps send you to a product page, and the quiz starts by asking which foundation you already wear. Here, first-time buyers tap their tone and see their shade in 16 bestsellers.

Compare with the originalSephora's live Find My Shade page

What I designed

  • A hero wheel of all 672 real shades, lightest at the center and deepest at the edge. Tap the dot closest to your skin to start.
  • Four taps (depth, undertone, finish, coverage) with a live preview that shows your tone, the finish's sheen, and how much the coverage hides.
  • Your shade in every brand at once, by the brand's own shade name, with a lighter and a deeper option and an on-screen stripe test.
  • A match mode for people who already have a favorite: pick your foundation and shade, see its closest twin in 15 other brands.
  • One page instead of two competing ones, with the how-to answers in the HTML and FAQ schema so search engines and AI answers can quote it.

Unofficial concept redesign for portfolio purposes. Not affiliated with Sephora.

03 / 05 · Pricing page concept

The idea

A pricing page that sells the workout before the price. Today, five memberships sit behind a toggle, machine prices live on other pages, and the raw HTML search engines read says “$0/mo.” Here, the experience comes first, then one real monthly total.

Compare with the originalPeloton's live membership page

What I designed

  • A hero wall of instructor clips drifting behind the headline, so the page opens on energy instead of a price table.
  • An animated ride built in code: the rider's legs track every pedal stroke, with live cadence, resistance, and output, and auto-resistance following a class.
  • Classes, instructors, and at-home lifestyle shots up front, plus Peloton IQ films on form feedback and rep counting.
  • A three-question finder that adds the machine's 12-month payment to the membership and shows one real monthly total.
  • Real prices in the page's HTML and FAQ schema, so search engines and AI answers read $12.99, not $0.

Unofficial concept redesign for portfolio purposes. Not affiliated with Peloton Interactive.

04 / 05 · Landing page concept

The idea

A paid-traffic landing page for America's biggest meal kit. Today it takes 14 screens and two popups to see a price. Here, your exact price is on the first screen, and the page shows how easy dinner gets.

Compare with the originalHelloFresh's live sign-up flow

What I designed

  • Real prices up front: pick who's eating and how many dinners, and see price per plate and the first box total, shipping included.
  • A "Tuesday, 5:30 pm" story of recipe tabs, a wasted grocery run, and slimy spinach, with HelloFresh as the fix.
  • Box to table in 15 minutes: a scroll-driven timer walks through one real 15-minute recipe.
  • Cheaper than eating out, at a glance: three bars and one weekly savings number, backed by cited sources.
  • A hero of real plan dishes, a filterable menu of this week's recipes, and a plan bar that follows you down the page.

Unofficial concept redesign for portfolio purposes. Not affiliated with HelloFresh.

05 / 05 · Homepage concept

The idea

A full homepage rethink for the biggest membership retailer in the country. The goal: make the membership pitch and the savings shoppable from the first scroll, on both desktop and a phone.

Compare with the originalCostco's live homepage

What I designed

  • Leads with the membership promise, backed by a hero video and a three-stat proof strip.
  • Prices and add-to-cart live right on the homepage, so the savings are shoppable, not just announced.
  • An Executive membership calculator that answers "is the upgrade worth it?" with the visitor's own spend.
  • A separate mobile layout: category pills, a stacked hero, and a sticky join bar in the thumb zone.
  • Accessible by default, with a pause control on the video and full reduced-motion support.

Unofficial concept redesign for portfolio purposes. Not affiliated with Costco Wholesale.

Shipped

Built for real brands.

Live pages for clients and my own projects, with the numbers they moved. Pick a disc to load one.

Now playing · Disc 01 of 03Product pages built to convertAutomotive brand · +41% revenue · +79% CVR

01 · Automotive brand · Product pages

Product pages built to convert

+41%
revenue
+89%
avg time on page
+79%
conversion rate

The main product page · before and after

Built on Shopify · archived in full so the work lives here even if the live pages change · not all functions may work in the archived copy

Landing page · Meta partnership ads

Same scanner, rebuilt for cold traffic.

Partnership ads put the scanner in front of car enthusiasts through creators they already follow. This page picks up where the creator left off: outcome first, proof fast, one offer. Conversion rate went up 79%.

What I built

  • An enthusiast-first pitch. The headline sells keeping your car running like new, and the spec sheet waits until later.
  • A proof strip right under the hero: owner rating, a 15-second answer, 6,000+ functions, and $0 monthly fees.
  • Four creator clips that autoplay muted, with one-tap sound.
  • Five everyday jobs and two comparison tables (against other scanners and against the brand's cheaper model), so nobody leaves to comparison-shop.
  • One offer everywhere: a countdown offer bar, a bundle box that stacks the free extras against the price, and a scratch-to-win popup.

I also rebuilt this brand’s homepage, navigation, and coverage checker. See it in the case study →

Range

Every page in the funnel.

500+ pages across automotive, law, beauty, CPG, and health. Different jobs, same rule: every section earns its place or gets cut.

  • 01HomepagesThe front door. Sets the promise and routes every visitor to the right shelf.
  • 02Product pagesWhere the sale happens. Proof, objections, and the buy button in the right order.
  • 03CollectionsFiltering and comparison that make choosing feel easy instead of overwhelming.
  • 04ListiclesPre-sell pages for paid traffic. Editorial on the surface, conversion underneath.
  • 05Ad landing pagesOne audience, one promise, one action, message-matched to the ad that sent them.
  • 06BlogsStructured for search and answer engines, so posts rank and get cited.
  • 07Lead-gen pagesCustom funnels and forms for high-ticket offers where the goal is a qualified call.

Process

How a page gets built.

  1. Step 1Research the avatarDemographics, reviews, and search data before I open Figma. The customer writes half the page for me.
  2. Step 2Wireframe with AIDAAttention, interest, desire, action. Copy and layout get written together because they're the same job.
  3. Step 3Design mobile-firstMost of the traffic is on a phone, so that's the version I design first. Desktop is the expansion.
  4. Step 4Build, ship, iterateI write the HTML and CSS myself, ship it, then read the heatmaps and keep tightening.

Get in touch

Need a page that converts? Let’s talk.

Open to senior growth roles and select design work. Reach me by email or LinkedIn.

riveras3650@gmail.comLinkedInBack to the main portfolio