First Pages / Brand, website & e-commerce
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 ↗
01 / The challenge
A personalized book asks more of a customer than a standard product. Before ordering, they need to understand what the book will look like, which details to share, whether photos are needed, and what it will cost.
My goal was to connect the emotional appeal of the gift with a practical, understandable ordering experience. I shaped the visual direction, page hierarchy, instructional copy, and WordPress implementation.
02 / Viewing structure
The homepage introduces the idea, explains the process, and shows book examples before asking visitors to begin. Repeated calls to action give people a route forward as they gain confidence in the product.
Customer-journey model. These stages describe the intended experience, rather than five separate checkout screens.
03 / Visual direction
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.
Feedback & iteration
Feedback on the early experience highlighted two connected issues: the hero needed to communicate the product more immediately, and the product pages and checkout needed a more polished, consistent presentation to earn trust. The phrase “personalized kids book shop” explained the offer, but placed too much of that responsibility on a single line of copy.
A proposed two-word headline makes the product clear at a glance. Supporting copy adds the audience and emotional benefit: “Custom storybooks that make your child the main character.” A real book preview gives that promise visible proof.
The design response prioritizes readable interior previews, consistent imagery, and clear explanations of personalization and what happens after ordering. Proof, delivery, and returns information should reflect confirmed store policies.
The checkout direction brings together guided story details, optional-photo instructions, visible costs, an editable order summary, and a clear review step before payment. Consistent typography, spacing, and form states help the experience feel coherent.
This direction responds to qualitative feedback, not a formal usability study. The headline is a proposed refinement. The next validation step is to test whether customers understand the offer and can complete checkout confidently; an increase in trust or conversion has not yet been measured.
Customer feedback / Checkout clarity
Customer comments and a review from VentAiLabs highlighted what felt clear in the checkout and where hesitation remained. Each comment describes the version its reviewer saw.
“Price, free shipping and the 3 steps are all visible before I have to scroll, that part works. Two things: the main button says ‘add your book & begin’ which takes a second to parse, ‘start your order’ reads faster, and the FIRST20 code is repeated in the banner, the product line and the button area so it feels more like a promo landing page than a checkout. Also surface the delivery date or production time near the price, personalized books ship later than normal and people often bounce when they only find that out at the end.”
“The cost is there but took me a second to find it, maybe move it up higher so it’s the first thing people see. The ‘what you’re buying’ part could use a little more detail too, like what exactly the AI agent does with the book. Otherwise it’s clean, not a lot of clutter to distract you.”
Feedback 03 / VentAiLabs review
“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
Clarify the final commitment. Show the book title, format, and full total—including shipping and applicable tax—beside the payment button. Keep the promo-code field collapsed or visually secondary, minimize required fields, and provide one clear primary action.
Bring the price forward. Customers differed on how quickly they noticed the cost, suggesting the price should have a stronger position and visual emphasis.
Simplify the action. Use “Start your order” so the next step is immediately understandable, and reduce repeated discount messaging.
Explain the product and timing. Clarify what the customer receives, what the AI agent contributes, and the production timeframe beside the price.
Preserve the useful structure. Keep the three-step overview and the clean, uncluttered presentation that customers responded to positively.
Qualitative customer feedback supplied by the founder; quotations lightly edited for capitalization and punctuation. These observations guide refinements and do not establish a measured change in conversion.
04 / Ordering experience
The order page groups its guidance around story details, character photos, and payment. The current implementation collects the story through order notes, with optional reference-image uploads.
Prompts for name, age, interests, occasion, and a story idea help customers describe what they want without needing to write a complete creative brief.
Photo guidance states that images are optional and gives the supported formats, quantity, and size limits. Customers are asked to identify the people pictured in their notes.
The order introduction shows the book price and flat U.S. shipping charge before the customer starts. A cart link provides a route to review or edit the order.
One place to add the details, check your book, and continue.
Add up to 5 images. JPG, PNG or WebP; under 10 MB each. Tell us who is pictured.
Grouped customer, delivery and payment fields.
Book + delivery + applicable tax
Mobile priority: one reading column, persistent labels, and a clear next action.
A / Reduce recallSeparate story prompts replace an open-ended brief, helping customers know what to provide.
B / Prevent errorsExplain optional uploads before selection and show actionable feedback beside the upload.
D / Keep control visiblePlace costs and an edit route beside the next action; confirm the final total before payment.
Current displayed offer reviewed October 11, 2026: $39.99 per book + $10 flat U.S. shipping.
View the order experience ↗Checkout iteration / Screenshot review
Comparing the earlier payment view with the revised desktop captures revealed a more cohesive layout: customer details occupy the left column, while the order summary and payment controls sit together on the right. The following observations connect visible interface changes with their design rationale.
Before / Payment detail
After / Revised desktop checkout
These captures show different portions of the checkout and different cart states: the earlier view contains two books; the later view contains one book with a coupon. Compare layout and grouping rather than the order totals. Screenshots document appearance, not completed payment testing.
Personalization / Remaining refinement
Earlier mobile capture / Issue identified
Previously, the card inputs sat far to the right of the selected payment method. In the revised capture, the fields sit directly beneath it. This spatial grouping makes the relationship between the selected option and the required input clearer.
The revised desktop layout places the book thumbnail, quantity, shipping, and total in the same column as payment. Customers can refer to those details while reviewing the purchase. Sticky behavior and mobile positioning still require verification.
Personalization guidance appears in an expandable section, and coupon entry has a separate prompt. This creates a shorter initial view, but essential story instructions should also appear beside the story field.
Evidence: supplied desktop screenshots dated October 12, 2026. These are visual review findings, not measured usability outcomes. Validation should check whether customers can identify the total, correct quantity, find personalization inputs, and complete the flow without assistance.
05 / UX fundamentals
The checkout direction applies familiar UX principles to a purchase that requires personal input.
Group story, photo, and order tasks into a clear sequence. Introduce detailed guidance where it becomes relevant, keeping the initial instruction short.
Use specific prompts and examples so customers can respond to a question rather than invent a creative brief from a blank field.
The proposed interface shows upload progress, explains problems beside the relevant field, and preserves entered details when a customer needs to make a correction.
Keep the order editable and costs visible before the final commitment. Use action labels that describe the next step.
The implementation brief calls for persistent labels, explicit required and optional states, keyboard access, visible focus, and errors conveyed in text. These remain criteria for testing, not a claim of completed accessibility verification.
06 / AI-agent experience design
The live site introduces Shrey as the First Pages book concierge, inviting questions about personalized books, the process, and getting started. The design opportunity is to make that help contextual without distracting from the order.
Is the customer exploring a gift, asking about photos, or trying to place an order?
Ask one focused question only when it is needed. Avoid repeating information already supplied.
Give a short answer grounded in store information, with a relevant link or next step.
Return to the order form, or offer human help if the answer cannot be verified.
Use approved product, upload, shipping, and order guidance. Do not invent delivery promises or claim an order change has been completed.
Guide customers to the designated checkout and upload fields. The proposed agent should not ask for payment credentials or collect children’s photos in chat.
When an answer is unavailable, acknowledge the limit and provide a support route. Customers should always be able to continue without using chat.
AI-assisted exploration also supported structure, copy, and interface development. Human selection and review remain essential to the visual direction and the accuracy of customer-facing information.
AI-assisted observations are design hypotheses; they do not replace customer interviews or usability testing. Live assistant responses and checkout completion have not been verified in this review.
07 / Outcome & next steps
The site brings product examples, process information, personalization guidance, and the order entry point into a connected experience. This project demonstrates how I combine visual storytelling, content design, and implementation to make a custom offer easier to understand.
The next validation step is to observe customers completing an order, review where they hesitate, and measure form completion and abandonment. Conversion improvements have not yet been measured.