Amy’s social media community
People were asked what they wanted to see on the website. Their feedback became part of the work.
Conversations and feedbackHealing That Matters / Website + digital storeProject walkthrough
Helping people find the right guide and take the next step.
Making a digital guide easy to find, try and buy means working through the whole visit. For Healing That Matters, that meant speaking with people, testing the website and bringing the guide previews, prices and downloads together. The work covers the writing, design, WordPress build and store setup. Amy created the guides.
Healing That Matters · Redesigned website
Follow the work from conversations and website testing to the redesign, purchase and downloads. Compare the original artwork, then see how the site is being reviewed.
The walkthrough
1 of 6
Chapter 1 of 6
Understanding the first visit.
In this chapter
Follow the journey from a real need to a useful first step, then see who helped inform the work.
Making your website easier to use starts with understanding what people come for. For Healing That Matters, that means a clear path from finding support to trying a guide and getting the files.
From a difficult moment to a clear first step.
A smaller place to start. A way to look inside. Clear choices about what comes next.
01Find a place to start
The free guide sits beside a plain explanation of who it’s for.
02Look inside before choosing
Preview a guide, see the formats and read the price together.
03Know how to get the files
The purchase leads to labeled downloads and an order email.
Understanding the first visit
What do people want to find, and how can the website help?
Bringing the conversations and website feedback into the design.
Five paid website testers
Five people were paid to try the website and share feedback on the experience.
Website testingChapter 2 of 6
Making the offer clear before asking people to buy.
In this chapter
Compare the homepage openings, then work through the reconstructed page structure.
The earlier site introduced a broad healing offer, with appointments and “Coming Soon” buttons. The redesign puts a free guide up front and keeps paid guide previews, prices and what’s included together.
Original website artwork
Compare the homepage message, the guide offer and the first action.
Previous website
A broad healing offer, appointments and “Coming Soon” actions.
Redesigned website
A free guide to start with, real previews and paid guide choices.
Explore the flow
Giving the next step a clear place on the page.
Follow a visit from choosing a guide to getting the files. Each screen has a job: help someone start, explain what’s included and make the files easy to find.
Step 1 of 3
Help someone find their starting point.
The free guide gives someone a place to begin. The paid guides sit together so they can see the choices without searching through separate pages.
- First choice
- Start with the free guide or explore a specific guide.
- Details up front
- Guide titles, file formats and prices appear with the choice.
Step 2 of 3
Make what’s included easy to understand.
Keep the preview close to the guide details. Someone can read a sample, check the format and see the price before adding the guide to their cart.
- What they can try
- Read a preview and listen to an audio sample where available.
- What they get
- A PDF guide, with companion audio included for this guide.
Step 3 of 3
Finish with the files, not just a receipt.
The order needs to lead to something someone can use. Keep the guide and audio links easy to find on the confirmation page and in the order email.
- After the order
- Bring the purchased files together on the confirmation page.
- A way back
- Include the download links in the order email.
Reconstructed for this case study from the implemented website and store. These are explanatory wireframes, not original research screens or a working checkout.
See both complete website designs
Previous website
Redesigned website
Chapter 3 of 6
Giving people something useful to try.
In this chapter
See how the free guide and audio introduce the offer before the paid guide choices.
Letting people try something useful gives the offer a clear starting point. Healing That Matters offers the H.E.A.L. Moment Method as a free guide, with an audio version for people who prefer to listen.
Giving people two ways to try the free guide.
One free resource, with a way to read and a way to listen.
Read the guide
A PDF introduces the four steps and gives people something they can return to.
Listen to the audio
The audio gives people another way to work through the same free resource.
Keeping the guide, offer and person behind it connected.
The homepage, free-guide area and Amy’s story carry the same message across the website. This is the original three-screen project artwork.
Open full artwork ↗Chapter 4 of 6
Keeping the experience familiar as it grows.
In this chapter
Try the shared page parts, then see how they work on a phone.
Taking the design into a working website means checking what happens after the main button too. The responsive pages were built in Elementor, with WooCommerce handling the digital guides, orders and downloads.
From the page design to a working store
Making each part work together.
Choosing a guide is only part of the job. The steps, previews, prices and files need to make sense together. The build connects those details through HTML, CSS and JavaScript, with WordPress and WooCommerce handling the products and downloads.
01 / A place to begin
One step stays in focus.
The H.E.A.L. method has four parts. Keeping them in one panel gives visitors a way to explore without moving through four separate pages.
The selected letter and label change together, with space for each step’s explanation. The choice stays clear when someone uses a mouse, a touchscreen or a keyboard.
Try the letters. The content changes in place.
A place to begin
The H.E.A.L.
Moment Method
Step 1 of 4
Hear
The selected step has its own explanation. The other three stay within reach.
PDF guideAudio versionPhone support card
02 / Choosing what fits
Showing what comes with the guide.
Each guide has a preview, a price and a clear file format. Visitors can see what they are choosing before adding it to the cart.
The same card pattern works for a guide with companion audio or one that is PDF only. The product details change with the guide.
Choose another guide to compare the format and price.
A guide for a specific moment
When You Feel Yourself Slipping Away
PDF + companion audio
$29One-time purchase
Preview before choosingExample 1 of 3 · PDF + companion audio
03 / After the purchase
The order needs to lead to the files.
The work continues after the pay button. Product names, file labels and order messages need to help customers find what they bought.
WooCommerce connects each product to its files. The order page and email give customers a way back to the downloads.
Compare the information before and after checkout.
Example order
Your guide and files
When You Feel Yourself Slipping AwayPDF + companion audio
PDF guideRead and save your guideAvailable
Companion audioListen alongside the guideAvailable
File names and access instructions stay together on the order page and in the email.
Reconstructed interactive case-study examples, based on the website’s implemented patterns. These are not archived Figma screens. The order illustration does not place an order or download a file.
01
Design the parts
Clear steps, guide previews, formats and prices.
02
Build the behavior
HTML, CSS and JavaScript for the working interface.
03
Connect the store
WordPress and WooCommerce products, checkout and files.
04
Check the handoff
Test orders, payment states, emails and downloads.
Mobile experience
Keeping the guide and next step easy to reach.
The phone layout brings the free guide, paid guide choices and purchase actions into a smaller screen. The artwork shows the same website, with the page order and spacing worked through for mobile.
Downloads first.
The confirmation page puts the file links before order metadata. PDF and audio labels identify what each link delivers.
Readable receipts.
Order emails follow the site’s white cards, subtle shadows and brand colors. Paid-order emails include a PDF receipt.
A working cart.
Removing a guide exposed an out-of-date cart display. The removal action was changed to load the cart confirmed by the server.
Implementation details
The build combines HTML, CSS, JavaScript, WordPress settings and PHP hooks for the email and receipt styles. AI supported code iteration and troubleshooting, with Packy directing the design and reviewing the working result. WooCommerce and Stripe handle commerce and payments.
Chapter 5 of 6
Following the purchase through to the files.
In this chapter
Look at the purchase, receipt and download checks.
Following the whole purchase helps catch the details people depend on. The checks covered payments, order emails and the files customers receive. These were functional checks, separate from the five paid website testers.
Guide delivery
All three PDFs opened. All nine paid audio files downloaded through a test order.
Payment states
Successful and declined sandbox card payments were tested without moving real money.
Live notification
An existing expired-checkout event was replayed. Stripe received HTTP 200 and WooCommerce confirmed processing.
Receipt delivery
A test order email arrived with its PDF receipt attachment. File links and labels were checked.
What remains unmeasured
A real-money checkout was not performed. There are no verified conversion or health-outcome measurements to report. The screenshots show the live website as a logged-out visitor.
Chapter 6 of 6
Reviewing the experience as the site changes.
In this chapter
View the actual scroll capture separately from an illustrative click map.
Review and improve
Seeing the page, the actions and the scroll.
The actual scroll capture is from an earlier website iteration. The click-map example uses the current redesign to show the actions being reviewed.
Current redesigned websiteOriginal artwork
Click-map exampleIllustration · not recorded clicks
Earlier website iterationSupplied Hotjar scroll-map capture
The website brings together real guide previews, a free-guide signup, three paid digital products and branded order communications. The page design and store setup follow the same path.
A clear starting point
Visitors can try the free resource or explore a guide for a specific moment.
An accurate purchase
Guide descriptions, prices, and formats match the products and attached files.
Access after payment
The order page and email give customers a way to find and download their purchase.
Keeping the work connected
Working through the details in the website.
Designing and implementing the experience brought the mobile layout, guide descriptions, cart behavior and receipt readability into the same build. Each decision had to work beyond the mockup.
Explore the selected work Talk about your project More case studies