Makeovers that serve the customer.
Give the business a distinctive voice and its customers a dependable way forward. Prove the useful journey first, then add the memorable moments.
Start with a customer decision
Before designing, record the audience, commercial model, main offer, existing systems and the one customer task this makeover should improve. For every included page, name the visitor, their question, the evidence that reassures them and the appropriate next action. Understand compare reassure act puts DigiThat’s understand trust decide act journey into practical page decisions.
Choose the action to match the business: an open shop, an allocation request, an appointment, a membership or an enquiry each needs different wording and expectations. A request awaiting staff approval must never look like a confirmed reservation. Someone arriving on an internal page should understand the offer, location and next step without starting again. Keep ordinary phone or email contact available.
Keep the approved page budget. Build one complete useful route before adding more scenes or pages. Review it with an unfamiliar visitor where possible: can they identify the offer, compare relevant choices, understand the cost and conditions, and reach the right next step without coaching? Record the task, observations and limits; agree project-specific success targets rather than inventing conversion benchmarks.
A distinctive identity with an optional sense of theatre
Write a short visual idea grounded in this business’s place, people, hospitality, craft or product. Use its real character to guide typography, colour, spacing, photography and components. A playful business can be playful; a premium business need not look like every other luxury hotel. Distinction must serve this business: avoiding a layout used in another makeover is not a reason to choose inferior photography or a weaker composition. Give product, visit and service pages, forms, confirmations and error states the same care as the hero.
Animation, a carousel, film or 3D scene must help someone understand, choose or feel confident. Keep location, practical offers, contact and the main action reachable before optional media finishes. Offer an appropriate pause or skip control, respect reduced motion, and retain a useful static experience. Sound, dragging, custom cursors or a loading sequence must not be essential to an ordinary task.
If a classic and an immersive route are appropriate, use the same facts, offers and destinations in both. Load the heavy experience only when needed. Prefer one well-executed enhancement over several competing interaction styles; choose the simplest maintainable architecture that serves the agreed journey.
Prove the visual improvement beside the original
Before building, make a short private brand brief from the actual original website: its strongest imagery, recognisable colours, typography, layout character and emotional appeal. State what to preserve and what to improve, with a reason tied to this business. Compare the proposed palette across large backgrounds, text and photographs against the original; sampling a tiny logo does not justify making that colour dominate the whole page. A fashionable palette, generic luxury styling or a tidy layout is not automatically an upgrade. Keep genuine distinctive strengths; do not trade them away merely to make implementation easier.
Inventory the usable genuine photography from the relevant original pages before choosing the opening image. Inspect the strongest candidates together, including the original lead image, at useful size and in the proposed desktop and mobile crops. Choose for what the scene communicates about this business, visual impact, focal clarity and fit with the customer’s task, not merely resolution or the first convenient download. Record the chosen hero and supporting images, their sources and usage basis, and why they are stronger choices than the alternatives. Preserve important subjects and photographic colour; if the original image is already the strongest, keep it and improve its presentation.
Write a motion brief with the visual idea: name each proposed movement, what the customer gains, its trigger and duration, any pause or skip control, and its reduced-motion or static equivalent. When a lively or cinematic direction has been requested, show that direction in the finished working concept; a static page with a promise of future animation does not fulfil the brief. Motion must add character or clarity without concealing information or delaying an ordinary task.
Review the finished original and makeover side by side at matching desktop and mobile sizes. Compare the first screen, the sections below the fold and the main customer journey: image choice and crop, colour harmony, typography, full-page composition, spacing, brand character, visual depth and the live motion treatment. For a business whose place or products provide its visual appeal, do not bury the main photograph below a long introductory preamble; compose identity, imagery and a useful action together. Keep dated comparison captures and a short explanation of what is visibly stronger and what still needs work in the private package evidence. Screenshots show composition, not animation or interaction; inspect the working page too.
Give a separate visual verdict: Clear upgrade, Mixed, or Not yet stronger, with specific reasons covering image choice and composition in the first screen and below the fold. A polished header above repetitive slate or beige sections is not evidence of a stronger complete page. Technical checks, a weighted score, page count and claims of award-worthy inspiration cannot supply that verdict. Mixed or Not yet stronger requires another design pass before the makeover is presented as complete; record unresolved limitations honestly. Clear upgrade still needs Robin’s visual review and never implies an award, customer approval or a measured commercial result.
Useful facts and authentic imagery
Keep a dated private inventory of approved prices, hours, facilities, availability, people, credentials and claims. Record the usage basis and approval for photographs, video, music, illustrations and fonts, plus the person responsible for updates. Missing evidence stays unknown; do not turn inference into factual customer copy.
Show what a real customer can expect. Do not invent premises, views, staff, services, reviews, awards or results. Clearly label fictional demonstration content and illustrative artwork. Preserve valuable existing content, working integrations and genuine strengths. A before comparison must remain faithful to the actual original website.
Recognition and attractive design do not prove accessibility, reliable checkout, secure operation or commercial success. Keep observed facts, business-reported claims, reasoned recommendations and unverified information distinct. Never transfer someone else’s recognition or results to the business or promise that a design will produce an unmeasured uplift.
Winery journeys: only the offers that exist
Start with Visit, Wines or Shop, Our Story and Contact where those destinations serve the real business. Add Club, Dining, Events, Weddings, Accommodation or Trade only when offered and relevant to the approved scope. Do not invent a service to fill a menu.
Visit or taste: establish location, opening times, experience choices, price, duration, inclusions, group rules and access information before asking someone to reserve. Provide an accurate availability link or a clearly labelled reservation request, with a human contact route for unusual needs.
Buy wine: use verified product and vintage details, style, price, availability, delivery context and terms. Match the action to open retail or allocation. Club: explain benefits, cost, frequency, commitment, changes or cancellation and member access. Events: show actual spaces, capacity, inclusions and constraints. Trade: provide appropriate technical material, imagery and a relevant contact.
Check regional and shipping context across the journey. Preserve the selected product, experience or market when handing over to another system where possible. Keep branding recognisable, back navigation useful and a contact fallback visible. Request only the information needed for the next operational step. The same thinking transfers to other industries: a tasting becomes a consultation, a bottle a product, and a venue visit a project enquiry.
For winery concepts, follow the established Whistler date-of-birth confirmation pattern on the first interaction with winery content after an optional intro has completed or been skipped. Reduced motion must skip the intro without skipping age confirmation. Validate a real date and an age of at least 18 before continuing the intended action. Keep the date only in the local controls; never save or transmit it. Use a local button handler for validation without depending on a form submission event. Verify invalid and adult Continue actions inside the unchanged private-preview sandbox, which has no allow-forms permission and keeps form-action set to none. Remember only a confirmed flag in available session storage, with an in-memory fallback when storage is unavailable. Retain accessible labels, error feedback, keyboard operation and a clear exit. Keep DigiThat frame navigation available. This is a preview interaction, not proof of legal compliance; do not weaken the private-preview sandbox or CSP to make it work.
Accessible use is part of the finish
Use WCAG 2.2 AA as the design and build target, with the audit scope stated explicitly. Combine automated checks with manual keyboard, focus, headings, names and labels, image alternatives, form errors, contrast, zoom and reflow, and relevant media checks. Include screen-reader sampling and people with disabilities where possible. An automated pass alone does not establish conformance.
Normal text generally needs 4.5:1 contrast; qualifying large text generally needs 3:1, with applicable exceptions and other criteria still considered. The AA target-size minimum is 24 by 24 CSS pixels or permitted alternatives and exceptions. Aim for a more comfortable 44-pixel size for important touch controls where practical; that is a project design target, not the AA minimum.
Test touch and keyboard operation, visible focus, reduced motion, appropriate pause controls, real browser zoom and narrow-screen reflow. A resized desktop viewport is not physical iPhone or Safari testing. Name the devices, tools, pages and states actually tested, and keep missing checks visible.
Fast, stable and useful while loading
Agree initial-transfer and JavaScript budgets for representative devices before adding expensive effects. Size and compress media, reserve its space, use responsive images and defer optional video or 3D. Record third-party loading costs. Essential content and useful navigation should survive slow media, unavailable graphics and nonessential script failure.
Use field targets of LCP at or below 2.5 seconds, INP at or below 200 milliseconds and CLS at or below 0.1, measured at the 75th percentile separately for mobile and desktop. Laboratory tests diagnose problems; they are not a real-user pass. With insufficient field data, record field performance as Unverified.
Test a cold load and slower connection as well as a cached desktop. Record the URL, device, connection, tool, date and result. Fix important delays and layout shifts before adding another decorative effect; do not invent performance scores.
Preserve how people find the business
Keep helpful content, descriptive page titles and headings, and crawlable ordinary links. Important information must be understandable without a canvas or visual effect. Review the URL and content map, indexability, canonical destinations, redirects and truthful structured data. Preserve useful established URLs unless a deliberate migration maps their replacements.
Keep previews out of public discovery and protect confidential material with access controls; noindex is not privacy protection. Verify intended production indexing separately. Good technical preparation does not guarantee indexing, rankings or traffic.
Separate a useful concept from a live service
For a makeover concept, keep local forms and outcomes clearly labelled and inert. No real enquiry, booking, payment, account, personal-data storage or notification is created. A clearly labelled verified official booking, shop or contact link can be the right next step. Do not simulate completed checkout or add live services merely to make a demonstration seem finished.
For a separately authorised production implementation, verify offer selection, price, availability, invalid input, correction, interrupted submission, durable receipt, staff notification, customer confirmation and reply path. Use authorised test environments and marked test records. Never place real bookings or payments during research. A button click or success message is not proof of delivery.
Document each booking, commerce, membership or other provider: owner, configuration, domain handoff and fallback contact. Test the boundaries on mobile, including back navigation and selected-item context. Start with one complete working journey; add more offers only after its handling and notifications have been verified. Carry untested production work into the handover as a separate gate, never a concept PASS.
Make ownership and recovery practical
Scope security to the actual functions and risk: authentication, authorisation, input handling, secrets, dependencies and external services. HTTPS alone is not a security audit. Apply least privilege, multifactor authentication where supported, protected credentials and proportionate logging. Collect and retain only needed personal information, and record where forms, analytics and embeds send it.
Review applicable privacy, marketing, alcohol, age-assurance and delivery obligations for the particular business and jurisdiction. Record the owner and unresolved questions. A design checklist is not legal advice or a compliance certificate; do not assume every small business has the same obligations.
Name the owners of content, accounts, renewals, backups, software updates and incident response. Keep separate static CSS and JavaScript, document the source of truth and deployment route, retain a rollback artifact and demonstrate recovery within the agreed scope. Preserve domain and email arrangements. Ensure the owner can safely update a representative page.
Define measurements before launch: completed or qualified enquiries, reservations, purchases, membership joins or relevant repeat actions. Label a button click as a proxy when a third-party completion cannot be observed. Record metric definitions, period, data source, baseline and concurrent changes; an improvement alone does not establish its cause. Set an early review date and owner, then address consequential friction before adding features.
Evidence scorecard and release gates
- Customer journeys and action clarity
- 20 points
- Content usefulness and trust
- 15 points
- Accessibility
- 15 points
- Mobile experience and performance
- 15 points
- Brand expression and visual craft
- 15 points
- Search and discoverability
- 5 points
- Security, privacy and operational reliability
- 10 points
- Maintainability and measurement
- 5 points
Use this 100-point framework to prioritise work, not to certify compliance or replace judgement. It assesses the delivered website within a stated review scope; it is separate from the prospect’s AI fit score and Robin’s 0–10 pursuit rating. Review the concept and production readiness separately.
For each evidenced category, rate 0–5 and calculate weight × rating ÷ 5. Use 0 for an evidenced absence, 1 for serious gaps, 2 for partial delivery, 3 for sound delivery within scope, 4 for strong delivery and 5 for exceptional delivery supported by testing. Missing evidence has no rating: mark Unverified, never quietly award points or call it a failure.
Report earned points, assessed weight, applicable weight and unverified weight separately. With incomplete coverage, label the result partial, for example 48 points earned across 60 assessed points, with 40 unverified. Do not rescale that into 80/100 or treat it as a full score. Not applicable needs a reason and its excluded weight stated. Only show a complete score out of 100 when all eight categories are applicable and evidenced.
For every requirement keep: Pass, Fail, Unverified or Not applicable; reason; exact URL, template or control; test method and environment; date; evidence; severity; owner; and retest result. Map an existing NOT RUN test to Unverified in this review without changing the import schema. Keep the evidence and scorecard in the private README.md, outside the public concept.
Critical failures override every score: a broken essential journey, serious accessibility barrier, misleading critical fact, exposed sensitive information, unresolved high-risk security finding or untested required data or transaction handling holds the relevant release. Fix known defects before calling the concept ready for review. If a required domain is unverified, readiness is conditional; name the blocker and owner. Production also requires content approval, domain and email safeguards, recovery evidence and authorised release. A high visual score cannot compensate for a customer being unable to act.
Use the final artifact, not an earlier preview. Discover and prioritise prove one useful journey verify templates and failure states release within the existing approval scope with a recovery route review actual outcomes. Re-test affected requirements after meaningful changes. Neither this framework nor generating a brief grants permission to publish, contact prospects, spend money or activate integrations.
Follow one customer’s route.
Choose an actual offer. Start on the page a new visitor would find, compare the options and reach the next appropriate step using only a keyboard, then a phone. Write down what helped, what created doubt and what evidence is still missing. Fix the most consequential obstacle before adding another effect.