Show what they receive.
Lead with a direct product description, book previews, and a short explanation of personalization.
First Pages / Brand, website & e-commerce
A personal story.
A clearer path to purchase.
Designing a welcoming website for personalized children’s books, from the first glimpse of a story to the details that make it theirs.
Visit First Pages ↗First Pages / A connected website experience
01 / The challenge
Make a custom purchase feel approachable.
Customers need to understand the book, personalization process, and cost before committing to a custom gift.
I shaped the visual direction, page structure, instructional copy, and WordPress / WooCommerce implementation to connect the appeal of a personal story with a clear route to ordering.
02 / Viewing structure
Inspiration first. Details when they matter.
Introduce the product, show examples, and explain the process before asking customers to personalize and pay.
- 01DiscoverUnderstand the personalized-book idea.
- 02ExploreSee examples and how it works.
- 03PersonalizeShare story and character details.
- 04Review & payCheck the order and delivery cost.
- 05Next stepsUnderstand what follows the order.
Journey stages, not five separate checkout screens.
Wireframes / Page structure
From discovery to a personal order.
Four page studies map the experience across product discovery, the founder’s story, customer feedback, and checkout. Together, they show how content, navigation, and calls to action connect the journey.
Scroll within each preview to explore the full page, or open the full-size image. These layout studies include image and testimonial placeholders.
01 / Homepage
Discover the product
Introduces the personalized-book offer, explains the process, and leads visitors toward starting a book.
View full homepage wireframe ↗02 / About
Connect the product to its founder
Organizes the brand story, founder introduction, and reasons to choose a personalized keepsake.
View full about wireframe ↗03 / Testimonials
Plan space for customer stories
Shows the intended placement of future customer feedback. The quotation cards are draft placeholders, not published reviews.
View full testimonials wireframe ↗04 / Checkout
Bring the order into one view
Groups customer details, story notes, optional photos, and the order summary in a single proposed checkout layout.
View full checkout wireframe ↗03 / Visual direction
Let the book explain the promise.
Book imagery makes an unfamiliar custom product tangible. Short headings, generous spacing, and a consistent primary action keep the surrounding interface calm, giving the illustrations room to carry the personality.
04 / Feedback & iteration
Turn hesitation into clear design priorities.
Customer comments and a VentAiLabs review pointed to three priorities: make the offer clear, bring the cost forward, and simplify the next step.
Bring the price forward.
Keep price and production timing near the primary action. Show shipping and applicable tax before payment.
Start your order.
Use a direct action label and reduce repeated discount messaging. Keep coupon entry secondary.
“A few things I’d look at: show the full total (book price plus shipping/tax) before the final button. People bail when the number changes late. Keep the promo code field collapsed or low key, it makes full price buyers hunt for discounts. And show the book title and format right next to the pay button so there’s no doubt what they’re buying. One page, few fields, one clear button.”
VentAiLabs review · October 14, 2026
Issue identified: The reviewer recommended clearer final costs, quieter promo-code entry, and the book title and format beside payment.
Design response: Revised desktop captures group the order summary with payment. The latest checkout wireframe brings personalization and the order summary into one layout.
Retest: Pending. Next, check whether a customer can find the story input, identify the final total, and reach payment without help. This feedback is a qualitative review; task completion and conversion improvements have not been measured.
05 / Ordering experience
Three understandable tasks.
The checkout direction connects personalization with the final purchase. The uploaded page study above shows the proposed structure.
Give people a starting point.
Prompt for the child’s name, interests, and story idea. The existing implementation collects these details through order notes.
Explain the upload.
State accepted formats and limits beside the upload, and ask customers to identify who is pictured.
Keep the order in view.
Group the book, quantity, delivery, and total near payment, with an easy route to correct details.
Mobile checkout / UX concept
Personalize first. Review before ordering.
A proposed mobile flow pairs guided story details and optional photos with an editable review, visible pricing, and a clear next action.
Checkout / Before & after
Keep related decisions together.
The revised desktop capture brings payment fields beneath the selected method and places the order summary beside customer details.
Before / Payment detail
After / Revised desktop checkout
Historical captures from October 12, 2026 show different cart states and an earlier offer. Compare grouping rather than totals. The newer checkout study above shows $29.99 with free U.S. shipping.
Supporting review: personalization and mobile assistance
Personalization / Remaining refinement
Earlier mobile capture / Issue identified
Group related fields.
Keep payment inputs close to the selected method so the required action is clear.
Keep costs visible.
Place the book, quantity, and full total near the purchase decision.
Put help where it matters.
Use short personalization prompts beside the input, with optional detail available on demand.
Next checks: mobile layout, upload visibility before submission, quantity editing, and preservation of story details. Screenshots document appearance; successful payment and accessibility have not been verified here.
06 / AI-agent experience design
A book concierge with a defined role.
Shrey’s public greeting introduces help with books, photos, and ordering. The proposed conversation flow keeps answers short, grounded in store information, and connected to the relevant next step.
SHREY / CONVERSATION STRUCTUREPROPOSED AGENT BEHAVIOR
01 / IDENTIFY INTENT
Is the customer exploring a gift, asking about photos, or trying to place an order?
02 / CLARIFY
Ask one focused question only when it is needed. Avoid repeating information already supplied.
03 / GUIDE
Give a short answer grounded in store information, with a relevant link or next step.
04 / HAND BACK CONTROL
Return to the order form, or offer human help if the answer cannot be verified.
CUSTOMERDo I need to upload a photo?
SHREY · SAMPLE RESPONSEPhotos are optional. If you add them, use up to five JPG, PNG, or WebP images under 10 MB each, and identify who is pictured in your order notes.
CONTEXTUAL NEXT STEPContinue to story details →
The design brief keeps payment and photo uploads in their designated forms, offers human support when an answer is uncertain, and lets customers continue without chat.
AI in the design workflow
ChatGPT supported structure, copy, and HTML/CSS exploration. Gemini and Gamma formed part of the exploratory toolkit. I selected and reviewed the direction, hierarchy, wording, and generated material.
Agent routing, contextual actions, and fallback behavior shown in the diagram are proposals requiring implementation and testing.
07 / Outcome & next steps
A connected foundation for a personal product.
First Pages brings book examples, product guidance, and ordering into a working website, supported by page studies and a documented checkout review.
Next: observe customers placing test orders, address points of hesitation, and measure completion and abandonment. Conversion improvements have not yet been measured.