Harris Deodorant

Product Page Backlog. Epics and User Stories

What this is?

This is the build list for the Harris Deodorant one page website. Harris is a refillable natural deodorant. The buyer picks a case colour and a scent, then chooses a one off purchase or a subscription. The page has to sell that in one scroll.

The work is split into eight epics. Each epic is a section of the page. They run in the order the buyer meets them, from the nav bar at the top to the legal bits at the bottom. Under each epic are the stories. A story is one small piece a developer can pick up and build.

The eight epics in page order

• Epic 1. Nav bar. The strip across the top that helps people move around.

• Epic 2. Website hero. The big top banner. The first thing a buyer really sees.

• Epic 3. About the product. What Harris is, what it does, and how it works.

• Epic 4. About us. The brand story and what Harris stands for.

• Epic 5. Call to action. Where the buyer builds a pack and pays.

• Epic 6. Footer. The bottom strip with links, social and payment.

• Epic 7. Content. The supporting content that builds trust. Reviews, logos and an FAQ.

• Epic 8. Privacy and terms and conditions. The legal pages the site needs.

How to read a story

• Why it matters. The reason the buyer needs this. Read this first.

• Task. The plain instruction. What to build.

• Build notes. The detail. Specifics, examples and things not to forget.

• How we know it is done. A pass or fail checklist. No opinions.

• Priority and size. What to build first, and roughly how big it is.

Priority key

Must have is needed for launch. Should have is important but not a blocker. Could have is nice if there is time.

Definition of done. This applies to every story

A story is only finished when all of the below are true. This is the shared standard. It saves repeating it on every card.

• A second person has reviewed the work.

• It works on a phone and a laptop.

• It passes its own checklist above.

• It uses only the brand colours and fonts in the palette.

• It is live on the page.

Brand colours

Use these and nothing else. The codes are hex codes the developers can drop straight into the site. Coral is the loud one. Save it for the buy button so it always means the same thing.

Readability note. Ink text on cream is easy to read. White text sits on coral, green or ink. Never put yellow text on cream. There is not enough contrast and people will struggle to read it.

Fonts. Pick one font for headings and one for body. Write both into a shared file so every section uses the same two. A clean rounded sans serif suits the playful feel.

Epic 1. Nav bar

The bar across the top of the page. It holds the brand and the way around the page. It is the first thing that frames the site.

Story 1.1. Brand logo links to the top

Priority. Must have   Size. Small

Why? The logo is the anchor. People expect it top left and expect it to take them back up.

Task. Place the Harris logo in the nav bar and link it to the top of the page.

Build notes.

• Put the logo on the left of the bar.

• Use the brand colours so it sits well on the bar.

• Clicking it scrolls back to the top.

• Leave clear space around it so it does not feel cramped.

How we know it is done.

• The logo shows in the nav on every screen size.

• It sits on the left of the bar.

• Clicking it returns the buyer to the top of the page.

• The logo is sharp, not stretched, on phone and laptop.

Story 1.2. Section links that jump down the page

Priority. Should have   Size. Small

Why? A one page site still needs a way to jump ahead. Links save the buyer scrolling.

Task. Add nav links that jump to each main section of the page.

Build notes.

• Link to the key sections. Product, About, Reviews, Buy.

• Each link scrolls to its section when tapped.

• Keep labels short. One or two words.

• Highlight the section the buyer is on, if there is time.

How we know it is done.

• Each link scrolls to the right section.

• Labels are one or two words.

• Links are readable against the bar.

• No link is broken if a section moves.

Story 1.3. Shop button in the nav

Priority. Must have   Size. Small

Why? The buy action should always be in reach. A button in the bar follows the buyer down the page.

Task. Add a shop button to the nav bar that jumps to the buy section.

Build notes.

• Use the coral colour so it stands out from the plain links.

• Label it Shop or Build your pack.

• It jumps to the buy section when tapped.

• Keep it on the right of the bar.

How we know it is done.

• The shop button is coral and stands out from the links.

• It sits on the right of the bar.

• Tapping it lands the buyer on the buy section.

• It shows on phone and laptop.

Story 1.4. Works on mobile and stays on scroll

Priority. Must have   Size. Medium

Why? On a phone there is no room for a row of links. And the bar should stay handy as people scroll.

Task. Collapse the nav into a menu on small screens and keep the bar in view as the buyer scrolls.

Build notes.

• On a phone, hide the links behind a menu icon.

• Tapping the icon opens and closes the menu.

• The bar stays at the top as the buyer scrolls.

• The shop button stays reachable on mobile.

How we know it is done.

• On a phone the links collapse into a menu that opens and closes.

• The bar stays in view while scrolling.

• The shop button is reachable on mobile.

• The bar does not cover the page content.

Epic 2. Website hero

The big banner at the very top, under the nav. The first thing a buyer really sees. It has seconds to land the message.

Story 2.1. Hero headline, line and image

Priority. Must have   Size. Small

Why? A buyer who lands and feels confused will leave. The hero has to say what Harris is and why it is different, fast.

Task. Build the hero with a headline, a supporting line and a product image.

Build notes.

• Headline names the product and the hook. Refillable natural deodorant that actually works.

• One line of proof under it. Plastic free refills. Kind to skin. Lasts all day.

• Show the case in a bright colour so the look is clear.

• Load the text before the image so the message shows on a slow connection.

How we know it is done.

• The headline and line show on load with no scrolling, on phone and laptop.

• The headline is under twelve words.

• Four out of five test users can say what Harris is within five seconds.

• The text appears before the image when the page loads.

Story 2.2. Hero call to action button

Priority. Must have   Size. Small

Why? The keen buyer wants in straight away. Give them one clear button right here in the hero.

Task. Add a call to action button in the hero that jumps to the buy section.

Build notes.

• Use coral. One button, not three.

• Label it Build your pack or Shop now.

• It jumps to the buy section when tapped.

• Make it big enough to tap with a thumb.

How we know it is done.

• The button shows in the hero with no scrolling.

• It is coral and clearly the main action.

• Tapping it lands the buyer on the buy section.

• It is at least 44 pixels tall.

Story 2.3. Trust strip under the hero

Priority. Should have   Size. Small

Why? A quick proof line right under the hero reassures people before they read on.

Task. Add a short trust strip under the hero.

Build notes.

• Show a rating or an As seen in line.

• Keep it to one line so it does not crowd the hero.

• Only use claims you can back up.

• Keep it quiet. The hero is still the star.

How we know it is done.

• The strip shows directly under the hero.

• It is one line and does not crowd the hero.

• Every claim shown is true and approved.

• It fits the screen on phone and laptop with no cut off.

Epic 3. About the product

The part that explains Harris. What it is, what it does, and how the refill idea works.

Story 3.1. What Harris is and why it helps

Priority. Must have   Size. Small

Why? People want to know what they are buying and why it beats a normal deodorant off a shelf.

Task. Write a short section on what Harris does and why it helps.

Build notes.

• Lead with the main benefit. Fresh all day and far less plastic.

• Three short paragraphs at most.

• Plain words only. No terms a normal buyer would not use.

• Place it right after the hero.

How we know it is done.

• The first sentence names the main benefit.

• The section is no longer than three short paragraphs.

• It contains no jargon, checked against a plain word list.

• It sits directly after the hero.

Story 3.2. Key features

Priority. Should have   Size. Medium

Why? Buyers scan before they read. A tidy set of features lets them weigh Harris up at a glance.

Task. Build a features block with the key things Harris does.

Build notes.

• Pick three to six features. Natural ingredients. Plastic free refills. Lasts 24 hours. Kind to skin.

• Each one gets a short title and one line of detail.

• Lay them out in a row or grid on a laptop.

• Stack them into one column on a phone.

How we know it is done.

• Each feature has a title of five words or fewer and one line of detail.

• There are between three and six features.

• They sit in a row or grid on laptop and a single column on phone.

• Each feature title and line show in full on a phone with no cut off.

Story 3.3. How it works

Priority. Must have   Size. Medium

Why? Refillable is new to some people. Show the three steps so it feels easy, not fiddly.

Task. Build a how it works block with the steps to buy and use Harris.

Build notes.

• Three steps. Choose your case colour. Pick your scent. Buy once or subscribe.

• Number them one, two, three.

• A short line under each step.

• An icon or image per step helps it land.

How we know it is done.

• Three numbered steps show in order.

• Each step has a short line of detail.

• The steps stack into one column on a phone.

• The wording matches the build your pack section.

Story 3.4. Natural ingredients

Priority. Should have   Size. Small

Why? Natural and kind to skin is a big reason people switch. Back the claim up here.

Task. Add a short ingredients section that explains the natural promise.

Build notes.

• Name the headline points. Natural. No nasties. Kind to skin.

• Link to a full ingredients list if there is one.

• Keep every claim honest and backed up.

• Place it near the features block.

How we know it is done.

• The section names the key natural points.

• Any claim made is one you can back up.

• A link to the full list works, if used.

• It sits near the features block.

Epic 4. About us

The brand story. Why Harris exists and what it stands for. This is where a buyer starts to feel something for the brand.

Story 4.1. Brand story and mission

Priority. Should have   Size. Small

Why? People buy from brands they believe in. A short story makes Harris feel human, not faceless.

Task. Write a short about us section with the Harris story and mission.

Build notes.

• Keep it short and warm. Why Harris started and what it wants to change.

• Two or three short paragraphs.

• A plain, honest tone. No big corporate words.

• A founder photo or brand image helps it feel real.

How we know it is done.

• The section tells the Harris story in two or three short paragraphs.

• The tone is plain and warm, with no jargon.

• It includes an image that fits the brand.

• It sits in a sensible spot in the page order.

Story 4.2. Refillable and planet friendly promise

Priority. Should have   Size. Small

Why? The refill idea is the heart of Harris. Make the planet promise clear and honest, not vague.

Task. Add a short section on the refillable, planet friendly promise.

Build notes.

• Explain the refill model in plain words. Buy the case once. Refill again and again.

• Show the plastic saving if you have a real figure.

• Keep claims honest. No greenwashing.

• A simple image of a refill helps.

How we know it is done.

• The refill model is explained in plain words.

• Any saving figure shown is true and sourced.

• There are no vague or unbacked green claims.

• It fits the screen on phone and laptop with no cut off.

Epic 5. Call to action

The conversion section. This is where the buyer builds their pack and pays. It has to feel simple and quick.

Story 5.1. Build your pack with pricing

Priority. Must have   Size. Large

Why? Harris is sold as a pack the buyer puts together. Choosing the case and scent is the fun part and the reason they buy.

Task. Build the pack builder. Case colour, scent, plan and price.

Build notes.

• Show case colours as tappable swatches in the real product colours.

• List the scents with a short note on each.

• Offer one off or subscribe and save, with the saving shown.

• Show the price in pounds and update it as choices change.

How we know it is done.

• The buyer can pick a case colour, a scent and a plan.

• Each choice shows clearly as selected.

• The price shows in pounds and matches the choices.

• All choices carry through to checkout.

Story 5.2. Buy and pay

Priority. Must have   Size. Large

Why? If paying is awkward, people drop out. The path from keen to paid should be short.

Task. Set up the buy and pay flow.

Build notes.

• The buy button opens checkout in a clear, expected way.

• Support card, Apple Pay, Google Pay and PayPal.

• A failed payment shows a friendly message and a retry.

• Never bounce the buyer to a strange site with no warning.

How we know it is done.

• Tapping buy opens the checkout.

• A test card completes a full purchase.

• A failed payment shows an error and lets the buyer try again.

• The buyer is not sent to an unexpected site without warning.

Story 5.3. Confirmation

Priority. Must have   Size. Medium

Why? After paying, people want to know it worked. Silence makes them worry and email support.

Task. Show a confirmation on screen and send a confirmation email.

Build notes.

• Show a clear message on screen as soon as payment goes through.

• Send an email within a few minutes with the order details.

• Say what happens next. When it ships and roughly when it lands.

• Include the case, scent and plan they chose.

How we know it is done.

• A message shows on screen within three seconds of payment.

• A confirmation email arrives within five minutes.

• Both the message and email say what happens next.

• The email shows the correct order details.

Story 5.4. Email sign up for later

Priority. Should have   Size. Small

Why? Most visitors will not buy on the first visit. An email lets you reach them again.

Task. Add an email sign up for people not ready to buy.

Build notes.

• One field for the email and one button to submit.

• A small line on what they get. Offers and scent drops.

• Catch a bad email with a friendly error.

• Save valid emails to the list.

How we know it is done.

• The buyer can type and submit an email.

• A bad email is rejected with a friendly error.

• A valid email is saved to the list.

• A success message shows after submitting.

Epic 6. Footer

The bottom of the page. The tidy ending. People scroll here for the practical links, the social accounts and the legal bits.

Story 6.1. Footer links

Priority. Must have   Size. Small

Why? People scroll to the footer for the practical links. Shop, help, policies. Make them easy to find.

Task. Build the footer links.

Build notes.

• Group them under clear headings. Shop, About, Help, Info.

• Link to the buy section, the about section, contact and the policy pages.

• Keep labels short and clear.

• Check every link works.

How we know it is done.

• The footer groups links under clear headings.

• Every link goes to the right place.

• Labels are short.

• The links stack into a single column on a phone.

Story 6.2. Social links

Priority. Should have   Size. Small

Why? People like to check a brand on social before they buy. Give them the link and a reason to follow.

Task. Add social links to the footer.

Build notes.

• Link to the real Harris social accounts.

• Use clear, known icons.

• Open them in a new tab so the buyer does not lose the page.

• Only add accounts that exist and are live.

How we know it is done.

• Each social icon links to the right live account.

• Links open in a new tab.

• Icons are on brand and even in size.

• There are no dead or placeholder links.

Story 6.3. Payment icons and copyright

Priority. Should have   Size. Small

Why? Payment icons reassure people you are real and safe. The copyright line is the expected sign off.

Task. Add payment icons and a copyright line to the footer.

Build notes.

• Show the payment types you accept. Visa, Mastercard, Apple Pay, PayPal.

• Only show the ones you actually take.

• Add a copyright line with the year and brand.

• Keep it quiet and tidy at the very bottom.

How we know it is done.

• The payment icons match what checkout actually accepts.

• The copyright line shows the right year and the Harris name.

• It sits at the very bottom of the page.

• It fits the screen on phone and laptop with no cut off.

Epic 7. Content

The supporting content that fills the page and builds trust. Reviews, press and stockist logos, and answers to the questions buyers ask most.

Note. I have read Content as the trust and supporting content blocks. If you meant the written copy and photos being produced, this epic can be reshaped.

Story 7.1. Reviews and ratings

Priority. Should have   Size. Medium

Why? A new buyer does not know you yet. Real reviews and a rating make them feel safe handing over money.

Task. Add a reviews and ratings block.

Build notes.

• Show at least three real reviews, each with a name or source.

• Show an overall star rating if you have one.

• Only use reviews you have permission to show.

• Place it near the buy section so trust lands before the decision.

How we know it is done.

• At least three real, approved reviews are shown.

• A star rating shows if one is used.

• The block is within one scroll of the buy section.

• The reviews stack into a single column on a phone.

Story 7.2. Press and stockist logos

Priority. Could have   Size. Small

Why it matters. Known names lend their trust. If a big shop or a magazine features Harris, show it off.

Task. Add a press and stockist logo strip.

Build notes.

• Show logos of press or shops that feature Harris. As seen in. Find us in.

• Only use logos you are allowed to use.

• Keep them even in size so they sit together.

• A simple scrolling strip works well on a phone.

How we know it is done.

• Only approved logos are shown.

• The logos are even in size.

• The strip works on phone and laptop.

• Each logo is sharp, not stretched.

Story 7.3. FAQ

Priority. Should have   Size. Medium

Why? One unanswered question can lose a sale. Answer the common ones right here.

Task. Build an FAQ block with the questions buyers ask most.

Build notes.

• Cover the big ones. How do refills work. Is it natural. How does subscribe work. Returns.

• Use a tap to open style so it stays tidy.

• Keep answers short and plain.

• Link to the help centre or contact for more.

How we know it is done.

• At least four common questions are answered.

• Each answer opens and closes on tap.

• Answers are short, two or three sentences each.

• A link to more help works.

Epic 8. Privacy and terms and conditions

The legal bits. Not glamorous, but needed. They keep you on the right side of the rules and they build trust.

Important. I am not a lawyer. Treat the notes below as a starting point only. Have the wording and the rules checked by someone qualified before launch.

Story 8.1. Cookie consent banner

Priority. Must have   Size. Medium

Why? You need consent before you set tracking cookies. It is the law in the UK and people expect to be asked.

Task. Add a cookie consent banner.

Build notes.

• Show it on the first visit.

• Let the buyer accept or reject, not only accept.

• Remember the choice so it does not nag on every visit.

• Keep it small so it does not block the page.

How we know it is done.

• The banner shows on the first visit.

• The buyer can accept or reject.

• The choice is remembered on the next visit.

• Tracking only runs after consent is given.

Story 8.2. Privacy notice

Priority. Must have   Size. Small

Why? People want to know what you do with their data. A clear notice builds trust and is required.

Task. Add a privacy notice and link to it.

Build notes.

• Cover what data you collect and why.

• Say how people can ask for their data or its removal.

• Link to it from the footer and the cookie banner.

• Have it checked by someone qualified.

How we know it is done.

• A privacy notice is reachable from the footer.

• It covers what data is collected and why.

• It explains how to make a data request.

• It has been reviewed by someone qualified.

Story 8.3. Terms and conditions

Priority. Must have   Size. Small

Why? Terms set the rules for buying. They protect both sides if something goes wrong.

Task. Add a terms and conditions page and link to it.

Build notes.

• Cover buying, delivery, returns and subscriptions.

• Use plain language where you can.

• Link to it from the footer and the checkout.

• Have it checked by someone qualified.

How we know it is done.

• Terms are reachable from the footer and the checkout.

• They cover buying, delivery, returns and subscriptions.

• They have been reviewed by someone qualified.

• The link works on phone and laptop.