Huggg Consumer Gifting — full case study

The work in detail

Overview

Type: figure

Shape: tall

Hero image

The chosen homepage beside the buying flow. Source: design file GS5dz… frame 595:4903 and section 840:661.

Src: /case-studies/huggg-consumer/hero-image-mv86v7co.webp

Type: p

Huggg is a UK gifting platform that sold a "gift of choice" to companies. The sender buys a curated collection and sends a link, and the recipient picks one gift and enters their own address. The company wanted a consumer version of the same idea.

Type: p

The goal was a mobile-first product that a busy person could use to send a thoughtful gift in under a minute. I facilitated three workshops, led a twelve-competitor teardown and designed an MVP prototype from first wireframes to final screens. We tested it with 20 users. Half of them finished checkout in under a minute, and the main issue testing found was fixed before handover.

Type: facts

Role

Senior Product Designer. I facilitated three workshops, led the competitor analysis and designed the prototype from first wireframes to final screens.

Timeline

Value: December 2025 to June 2026

Team

CEO/Founder, senior product manager and another product manager

KEY OUTCOME

A tested MVP prototype. Half of testers finished checkout in under a minute.

Context

Type: p

Huggg sold the gift of choice to companies only. We kicked off the project with a workshop that framed a new problem: busy people want to send a thoughtful gift in under 60 seconds. It pointed at "busy mums" in particular.

Type: p

The hard part was not speed. **Nobody expects to send a choice.** People expect to buy a present and send it. The product had to explain an unfamiliar idea, from a brand most people had never heard of, to someone with no time to read.

Type: figure

Shape: wide

Workshop whiteboards

Source: Whiteboard sketches from the workshops.

/case-studies/huggg-consumer/workshop-whiteboards-mv9ki2k7.webp

Whiteboard sketches from the workshops: grouping gifts of choice by occasion, recipient and theme.

Type: columns

This led to

Type: list

• A brief for a consumer version, mobile-first, that a typical user could finish in under a minute
• A brand most people had never heard of, asking them to trust an unfamiliar idea
• An open question: how do you explain a choice to someone with no time to read?

Why it mattered

Type: p

If the idea needs explaining, busy senders leave before they start. The design had to make the promise obvious in a few seconds.

Users and stakeholders

Type: columns

Primary users

Type: list

• Busy senders, "busy mums" in particular
• A first-timer in a rush
• A sceptic who fears "losing £50"
• A returning user

Internal users

Type: list

• The founder, who set the direction and was in the room for every workshop
• The senior product manager, who owned the product decisions
• Another product manager

Challenge

Type: h3

Text: Objectives

Type: facts

Make it quick

Value: A flow a typical user can finish in under a minute

Make it clear

Explain a gift of choice to someone who has never heard of Huggg

Make it trusted

Value: Give a sceptic reasons to believe before any deep step

Type: columns

How the brief measured success

Type: list

• Homepage to start-gifting
• Checkout completion
• A second gift within 90 days
• NPS
• Perceived thoughtfulness

Approach and constraints

Type: p

Text: **MVP.** A tested prototype, not a launch.

Type: list

• Out of scope: desktop, group gifting, video messages and changes to the recipient flow
• The workshop notes were the team's own statements, so they were hypotheses, not quotes from users
• The prototype would be tested before anything was called done

Type: columns

My responsibilities

Type: list

• Facilitated three workshops
• Led the competitor analysis
• Built the insights table
• Designed the prototype from first wireframes to final screens
• Ran the testing with the Huggg team

Collaborators

Type: p

The founder, the senior product manager and another product manager. The Huggg team owned the brief and the earlier user research, and we ran the testing together.

Discovery

Type: p

Discovery ran in four steps, each feeding the next, so the team shared one view of the problem before any screens were drawn. I facilitated three workshops with the founder and two product managers: the first two sit here, and the third opened the design work.

Type: h3

Text: 1. Framing the problem

Type: p

We started with a kick-off workshop in London. We mapped the existing B2B journey to find problems, pain points and opportunities. I then drafted the journey we expected for consumers and wrote how-might-we questions from it.

Type: figure

Shape: wide

The kick-off workshop board

Source: The kick-off workshop board

Src: /case-studies/huggg-consumer/new-image-mv9kg58u.webp

The kick-off board: the problem statement, success metrics, the key challenges discussed and the first ideas. Click to enlarge.

Type: h3

Text: 2. Competitor teardown

Type: p

I judged twelve competitors, from Etsy and Moonpig to Prezzee and Virgin Experience Days, across six stages from first impression to post-send. Each stage had a card stating what makes a user quit and what makes them stay. Every note used one fixed vocabulary, so every screen was judged the same way.

Type: figure

Shape: wide

Teardown overview

Competitors down the side, six stages across. Redact names and addresses. Source: FigJam / 01 Competitor analysis.png.

/case-studies/huggg-consumer/teardown-overview-mv88as16.webp

Type: h3

Text: 3. Mapping the consumer journey

Type: p

Next came a workshop in Bristol. We mapped the new consumer journey, using user research the team had done before. The notes became 175 digital stickies in nine clusters, from "Can I trust this? Is this legit?" to "I really don't know what to buy."

Type: p

The Bristol notes were hypotheses. Even with research in the room, they were the team's own statements. That is why we tested before calling anything done.

Type: figure

Shape: wide

Workshop notes, as written

A legible cluster of handwritten stickies. Redact names. Source: FigJam / 04 Workshop Notes.png.

/case-studies/huggg-consumer/workshop-notes-as-written-mv89nn1u.webp

Type: figure

Shape: wide

The workshop notes, clustered

Source: The typed-up notes, clustered.

Src: /case-studies/huggg-consumer/new-image-mv99vv7v.webp

The workshop notes, typed up and clustered beside photos of the handwritten originals. Click to enlarge.

Type: note

How I used AI.

I used AI tools, including Claude and FigJam AI, at two points. First, to read the handwritten sticky notes from photos and turn them into digital stickies. Then, to help summarise and synthesise the notes into clusters.

Type: h4

Text: From clusters to user flows

Type: p

From the Bristol clusters we wrote six flows, shaped by the buyer's mood, theme, emotions and situation. Each recorded goals, pains, drop-off risks and interventions from homepage to send, with a how-might-we for each problem.

Type: figure

Shape: wide

The user flows

Source: The scenario flows, stage by stage.

Src: /case-studies/huggg-consumer/new-image-mv9h29vs.webp

Five of the flows, each run through the same four stages: homepage, category and selection, personalisation, then review, checkout and send. Click to enlarge.

Type: h3

Text: 4. Insights table

Type: p

Discovery produced a lot of material, so I built one table of about 20 rows. Each row links a finding to a design question, a how-might-we, ideas, and a mobile zone: where the idea belongs on a phone screen. Red is the utility zone at the top, yellow the visual zone in the middle, and green the thumb zone at the bottom, where the main actions go. It went through four versions as ratings were challenged.

Type: figure

Shape: wide

The insights table

All 20 rows with the coloured theme and zone cells. Source: design file nMram… node 1:3.

/case-studies/huggg-consumer/the-insights-table-mv89oxra.webp

Type: figure

Shape: wide

Another version of the insights table

Source: Another version of the insights table

Src: /case-studies/huggg-consumer/new-image-mv9kjkqa.webp

Another version of the insights table. It went through four as the team challenged the ratings. Click to enlarge.

Type: figure

Shape: wide

The thumb-zone model

Source: The three zones, and a landing page laid out against them.

Src: /case-studies/huggg-consumer/new-image-mv8cyxea.webp

The three zones, and a landing page laid out against them: utility at the top, visuals in the middle, the main actions within reach of the thumb.

Type: card

Key findings

Type: p

From the teardown and the workshops. The quotes are the team's hypotheses, written as a sender would say them, which is why we tested them.

Type: list

• **An unfamiliar idea.** The team expected senders to ask "Don't I just buy a present and send it?" We decided to show how it works, not explain it.
• **An unknown brand** ("I've never heard of Huggg"). We put trust cues before any deep interaction.
• **No time** ("I don't have time"). We kept the steps few and put the fastest payment first.
• **No inspiration** ("I need inspiration"). We kept browsing simple: trending, recipient, occasion and theme.
• **A fixed budget** ("I know my budget"). We showed that every budget is covered.
• No competitor designed for after the gift is sent. We designed for it.

Solution

Type: p

I designed a prototype that carries one promise from the homepage to payment: the other person chooses.

Type: p

Design started with the third workshop, back in London. We ran a round of Crazy 8s to open up ideas. Then I wireframed several versions of the homepage.

Type: figure

Shape: wide

Homepage wireframes

Source: Four rounds of homepage wireframes.

/case-studies/huggg-consumer/homepage-wireframes-mv9ktxcz.webp

Four rounds of homepage wireframes, from a headline-and-video opening (1), through "Send a gift in under 60 seconds" (2) and a phone showing how it works (3), to layout variations for the top of the page (4). Click to enlarge.

Type: figure

Shape: wide

Round 4 wireframes, up close

Source: Round 4 wireframes, up close

Src: /case-studies/huggg-consumer/new-image-mv9ku3l6.webp

Round 4 up close: layout variations for the top of the page, with notes on each. Click to enlarge.

Type: h3

Text: 1. A homepage that shows the promise

Type: p

A first-time visitor has a few seconds to learn what a gift of choice is, why to trust it and where to start. Three decisions shaped the homepage.

Type: h4

Text: Show the experience, don't explain it

Type: p

The hardest question was how to get the idea across on a phone. I explored many ways to show it: an automatic carousel, scroll-driven animations, a locked "how it works" section, a full-screen carousel, step cards, value proposition videos and several headlines. Most failed the same two tests. Anything driven by scrolling takes over the screen, and a returning sender has to scroll past an explanation they no longer need.

Type: figure

Shape: wide

Seven ways to show the value proposition

Source: The options board, with the cons noted on each.

Src: /case-studies/huggg-consumer/value-prop-options.webp

Type: p

We chose the option that shows the experience itself. The hero plays a WhatsApp chat, from the sender's message to the recipient's side: the gift arrives with "12 gifts to choose from", then "Pick your favourite", "Add the delivery address" and "Sit back and enjoy!". Nobody has to read an explanation to understand what happens.

Type: h4

Text: Let real people decide

Type: p

We didn't choose on instinct. We shared several prototypes with real users, watched them use each one and asked prompting questions, then finalised the version that worked best.

Type: figure

Shape: wide

Seven homepage hero options

Source: Seven homepage hero options

Src: /case-studies/huggg-consumer/new-image-mv9lyj6s.webp

Seven hero options from the rounds we compared, from carousels and colour-led heroes to longer marketplace pages. Click to enlarge.

Type: h4

Text: Leave out what doesn't serve the promise

Type: p

Along the way I designed more than the MVP needed: navigation and menu patterns, a three-question gift finder, search with suggestions and a no-results fallback, and brand pages. We left the traditional layouts, the gift finder and other extras out of the MVP, to keep every screen focused on the core value proposition: send a choice, they pick the gift, no address needed.

Type: figure

Shape: wide

The gift finder, explored and left out

Source: Gift finder board from Figma, Version 0.2.

Src: /case-studies/huggg-consumer/gift-finder-explored.webp

The gift finder: three questions, results and a no-results fallback. Designed, then left out of the MVP to keep the focus on the core promise. Click to enlarge.

Type: p

Text: The chosen homepage puts that experience first:

Type: list

• A hero chat widget showing the gift arriving in WhatsApp: "12 gifts to choose from", then "Pick your favourite", "Add the delivery address", "Sit back and enjoy!"
• The heading "Send our curated collection, let them choose their favourite"
• Collection cards with a gift count and a "Starting from" price
• Three benefits: No Address Needed, Recipient Chooses, Done in Seconds

Type: figure

Shape: phone

Chosen homepage

Source: Final frame. Source: design file GS5dz… frame 595:4903.

Embed: https://huggg-consumer-gifting.figma.site

Type: h3

Text: 2. A five-step send flow

Type: p

Few steps, with the fastest payment first, because time was the sender's biggest worry in the workshops.

Type: list

• **Collection.** See what is included, pick a price tier, optionally edit the choices.
• **Personalise.** A message, with optional [[AI]] AI help, and a gift wrap.
• **Delivery.** "We'll send it for you" or "I'll send it myself".
• **Checkout.** Summary cards for gift, message and delivery, then Apple Pay or card.
• **Sent.** Confirmation, then a prompt to earn credit.

Type: p

Apple Pay comes first, with a trust row beneath the button. Discount codes have add, invalid and applied states. The VAT logic holds: the discount comes off the VAT-inclusive price before VAT is worked out. A 10% code takes £15 to £13.50, of which £2.25 is VAT.

Type: figure

Shape: wide

Checkout

Secure checkout: Summary cards, Apple Pay first, trust row. Section 840:661; Discount: invalid and applied: Section 840:661, checkout states. Export as one image, side by side.

Src: /case-studies/huggg-consumer/checkout-mv8cuu3n.webp

Type: h3

Text: 3. Editing only when you ask for it

Type: p

Senders want to see what is in a collection, and some want to change it. The senior product manager pointed out a risk: checkboxes shown by default would let a sender deselect a gift by accident on a page meant for browsing. So editing is opt-in, behind an **Edit choices** button.

Type: list

• **All selected.** Save is disabled when nothing has changed.
• **None selected.** Save is disabled, with "Please select at least one gift from the collection".
• **Some selected.** An "Edited" badge shows the choices differ from the default.
• **After saving.** The product page shows the new count, "See all 11 gift choices".

Type: figure

Shape: wide

The four selection states

All selected: Frame 673:6885; None selected: Frame 673:7615; Some selected: Frame 673:8347; After saving: Frame 732:7207. Export as one image, side by side.

/case-studies/huggg-consumer/the-four-selection-states-mv8cv050.webp

Type: h3

Text: 4. The moment after the gift is sent

Type: p

Most gifting sites end with a receipt, and no competitor in the teardown designed for what comes next. We treated the moment after sending as the start of the next gift. It is when a sender feels best about Huggg, so it is the right time to reward them and ask for one more step.

Type: p

It isn't the most important part of the MVP. But the moment after checkout was a chance to be creative, and to give senders a reason to come back, so repeat purchases could grow.

Type: figure

Shape: wide

After sending

The two confirmation screens: Huggg sends it, or the sender shares the link.

Src: /case-studies/huggg-consumer/after-sending.webp

Left: Huggg sent the link by SMS or email. Right: the sender shares the link themselves. Both celebrate, confirm, then reward. Click to enlarge.

Type: h4

Text: Celebrate, then confirm

Type: p

Confetti plays for two to three seconds, then the screen confirms what happened. It changes with how the gift was sent:

Type: list

• **Huggg sends it.** "Gift link sent to" the recipient by name, with the phone number and email it went to, and a way to get in touch if there's a mistake. The recipient's name only appears if the sender gave it earlier.
• **The sender shares it.** "Almost done…", with the gift link, a Copy button, WhatsApp first and more sharing options, because the gift isn't sent until they share it.

Type: h4

Text: Reward the first gift

Type: p

Straight after the confirmation, the sender learns they've earned **£5 Huggg credit** to use on their next gift. A gifting journey shows what's next, so one gift feels like the start of something:

Type: p

We wanted to try gamification: the more gifts a sender sends, the more credit they earn to spend on Huggg.

Type: facts

First Gift

Value: £5 credit, unlocked with the first gift

Generous

Value: £10 credit after 3 gifts

Legend

Value: £25 credit after 10 gifts

Super

Value: £50 credit after 25 gifts

Type: p

This speaks directly to one of the brief's measures: a second gift within 90 days. Credit gives the sender a reason to come back, and the badges give them a reason to keep going.

Type: h4

Text: Sign up after the gift, not before

Type: p

Sending a gift never needed an account. The account is offered once the sender has something worth keeping: "Sign up" with their email already filled in, one tap with no password, to claim the credit, track the gift and start unlocking badges. A "Give £5, Get £5" invite follows, so a happy sender can bring a friend.

Type: p

Around this moment, the prototype also has order statuses, including Claimed, and a "Gift opened" notification, so the sender hears what happened next.

Type: note

Not yet tested.

Text: This feature is still untested.

Testing

Type: p

The Huggg team and I tested together, with 20 users. We tested at every stage, not only at the end:

Type: list

• **Wireframe testing**
• **A/B testing**, with multiple versions of the same screens
• **Usability testing**
• **Prototype testing**, sharing multiple versions of the prototype built with Claude Code [[AI]] and Figma Make
• **Workflow testing**, from the homepage through to checkout
• **Time to checkout**, measured against the goal of under a minute

Type: p

Each session followed a script. We observed people as they used the designs, and used contextual enquiry to understand their situation as they went.

Type: p

Text: We timed every tester from homepage to checkout:

Type: bigstats

Value: 50%

finished in under a minute

Value: 30%

took around 90 seconds

Value: 20%

took more than 100 seconds

Type: p

The biggest issue was one nobody said out loud; it showed when we watched people browse. Every collection card looked the same, so people had to read every title, and some missed that the recipient picks one gift from many. We gave each collection its own images and added "Recipients choose from N gift choices" to every card.

Type: prototypes

Try the prototypes we tested

Prototype 1

Prototype 2

Prototype 3

Prototype 4

Prototype 5

Outcome

Type: bigstats

Value: 50%

Finished checkout in under a minute (timed, 20 users)

Value: 80%

Finished in about 90 seconds or less

Value: 5

Prototype versions compared with users

Type: facts

Senders

A five-step flow with Apple Pay first, and a homepage that shows what a gift of choice is.

Recipients

The recipient flow is unchanged. They pick one gift and enter their own address.

The Huggg team

A tested prototype, and a trail from every major decision back to a finding.

Type: card

Delivery results

Type: list

• Handed over a tested MVP prototype covering the homepage, the full send flow, every selection, discount and delivery state, the post-send screens and the account area
• The team agreed one view of the problem before any screens were drawn
• The prototype did not launch, so there are no live numbers against the brief's measures

Reflections

Type: columns

What worked well

Type: list

• One table linking every finding to a decision
• Mapping the journey in person, with the founder in the room
• **Editing only when you ask for it.** Removing gifts from a collection sits behind an "Edit choices" button, so nobody changes a collection by accident, and every state, from nothing selected to saved, has a clear rule.
• **Watching, not only asking.** The biggest issue, cards that all looked the same, was one nobody said out loud. It only showed when we watched people browse.

What I would do differently

Type: list

• **Bring developers in earlier.** I handed over the prototype, as the brief asked, but I'd have loved to talk to developers early in the flow. I didn't get that chance here, so it's something I'll make room for on the next project.

Type: card

Next steps

Type: list

• Launch, then track the brief's measures: homepage to start-gifting, checkout completion, a second gift within 90 days, NPS and perceived thoughtfulness
• Find out what slowed the half who took longer than a minute, and design for them