[{"data":1,"prerenderedAt":386},["ShallowReactive",2],{"case-\u002Fen\u002Fcases\u002Fbookberry-booking":3,"cases-list-cases_en":312},{"id":4,"title":5,"body":6,"company":275,"cover":276,"description":280,"draft":281,"extension":282,"hero":283,"meta":286,"navigation":287,"ogImage":288,"order":289,"path":290,"period":291,"platform":292,"problemLine":293,"product":294,"prototype":295,"role":296,"seo":297,"status":298,"stem":299,"team":300,"tint":301,"tldr":302,"tools":307,"workType":309,"year":310,"__hash__":311},"cases_en\u002Fen\u002Fcases\u002Fbookberry-booking.md","BookBerry: direct hotel booking where price and terms are clear before payment",{"type":7,"value":8,"toc":267},"minimark",[9,68,200,253],[10,11,14,19],"case-section",{"id":12,"label":13},"problem","Problem",[15,16,18],"h2",{"id":17},"booking-direct-shouldnt-be-harder-than-booking-on-an-ota","Booking direct shouldn't be harder than booking on an OTA",[20,21,22,39,50],"case-grid",{},[23,24,26],"tile-text",{"label":25},"Guests need to",[27,28,29,33,36],"ul",{},[30,31,32],"li",{},"see the total price with all fees before paying, not on the last step;",[30,34,35],{},"understand cancellation terms and extras before entering card details;",[30,37,38],{},"book from a phone in a few steps.",[23,40,42],{"label":41},"The hotel needs to",[27,43,44,47],{},[30,45,46],{},"get bookings directly, with no OTA commission;",[30,48,49],{},"show rooms and rates under its own brand.",[23,51,55],{"label":52,"span":53,"tone":54},"Context","full","outline",[56,57,58,59,63,64,67],"p",{},"BookBerry AI (formerly BnBerry) brings hotels guests from AI assistants, Google and creators. ",[60,61,62],"strong",{},"DBS app"," is the B2C part of the platform: a booking engine under the hotel's brand. The pilot was built for a partner hotel together with the ",[60,65,66],{},"Outglow"," agency.",[10,69,72,76,138],{"id":70,"label":71},"solution","Key decisions",[15,73,75],{"id":74},"price-and-terms-are-clear-before-payment-at-every-step","Price and terms are clear before payment — at every step",[20,77,78,89,96,100,110,120,124,128],{},[23,79,81,86],{"label":80},"Decision 1",[82,83,85],"h3",{"id":84},"nightly-prices-right-in-the-calendar","Nightly prices right in the calendar",[56,87,88],{},"Guests see which dates are cheaper straight away, so there's no need to leave and compare on an OTA. A summary like “4 nights · 2 adults · 1 room” and a single button are always at the bottom.",[90,91],"tile-image",{"alt":92,"src":93,"width":94,"height":95},"“Choose your stay” calendar with a price for every night, the September 11–15 range selected and the “Select room” button","\u002Fcases\u002Fbookberry-booking\u002Fs-stay-range.png",644,1400,[90,97],{"alt":98,"src":99,"width":94,"height":95},"Room results: Garden Suite card with “Guest favourite”, “Only 1 room left” and “3 viewing now” badges, a 4-night price marked “includes all fees” and “Compare prices”","\u002Fcases\u002Fbookberry-booking\u002Fs-results.png",[23,101,103,107],{"label":102},"Decision 2",[82,104,106],{"id":105},"one-includes-all-fees-price","One “includes all fees” price",[56,108,109],{},"From the results onwards the price covers the whole stay and is marked “includes all fees”, so the total doesn't jump on the last step.",[23,111,113,117],{"label":112},"Decision 3",[82,114,116],{"id":115},"terms-before-the-card-form","Terms before the card form",[56,118,119],{},"“Review & book” shows the booking summary with “Edit”, the total, the rate and free-cancellation terms before the payment form. Apple Pay first, card second.",[90,121],{"alt":122,"src":123,"width":94,"height":95},"“Review & book” screen: booking summary with “Edit”, total price, rate terms and the guest details form","\u002Fcases\u002Fbookberry-booking\u002Fs-review.png",[90,125],{"alt":126,"src":127,"width":94,"height":95},"“Payment failure” screen with an explanation and the “Try again” and “Update your payment method” actions","\u002Fcases\u002Fbookberry-booking\u002Fs-payfail.png",[23,129,131,135],{"label":130},"Decision 4",[82,132,134],{"id":133},"an-error-isnt-a-dead-end","An error isn't a dead end",[56,136,137],{},"Every error has its own screen and a next step: on payment failure — “Try again” and “Update your payment method”, on a failed request — “Back to rooms”.",[139,140,142],"all-screens",{"count":141},"10",[20,143,144,150,157,163,167,171,177,182,186,192,196],{},[23,145,147],{"label":146,"span":53},"Desktop and other screens",[56,148,149],{},"Desktop follows the mobile logic in two columns: price, dates, terms and extras are pinned on the right; before payment — “You won't be charged yet” and a “Pay today \u002F Due at property” breakdown.",[90,151],{"alt":152,"src":153,"bg":154,"span":53,"width":155,"height":156},"Full mobile flow: room results, room page with terms and add-ons, Review & book with Apple Pay and card, booking confirmation","\u002Fcases\u002Fbookberry-booking\u002Fflow-long.png","#F4F4F2",1352,1913,[90,158],{"alt":159,"src":160,"bg":154,"span":53,"width":161,"height":162},"Mobile date picker: calendar with nightly prices, selected range September 11–15 and the “Guests & Rooms” sheet","\u002Fcases\u002Fbookberry-booking\u002Fdates.png",1800,1000,[90,164],{"alt":165,"src":166,"width":94,"height":95},"Garden Suite room page: photo, urgency badges, capacity, beds and facilities","\u002Fcases\u002Fbookberry-booking\u002Fs-room.png",[90,168],{"alt":169,"src":170,"width":94,"height":95},"“Your reservation is confirmed” screen: confirmation email, check-in and check-out dates and the “Add to calendar” button","\u002Fcases\u002Fbookberry-booking\u002Fs-confirm.png",[90,172],{"alt":173,"src":174,"bg":154,"span":53,"width":175,"height":176},"Desktop room results with the 4-night price, urgency badges and a “Choose room” button","\u002Fcases\u002Fbookberry-booking\u002Fd-results.png",1600,1110,[90,178],{"alt":179,"src":180,"bg":154,"span":53,"width":175,"height":181},"Desktop Review & book: guest details and payment on the left, booking summary and price breakdown on the right","\u002Fcases\u002Fbookberry-booking\u002Fd-review.png",1168,[90,183],{"alt":184,"src":185,"bg":154,"span":53,"width":175,"height":176},"Desktop booking confirmation with details, cancellation policy, actions and nearby places","\u002Fcases\u002Fbookberry-booking\u002Fd-confirm.png",[90,187],{"alt":188,"src":189,"bg":154,"span":53,"width":190,"height":191},"Desktop “Change dates” modal showing two months with a price for every night","\u002Fcases\u002Fbookberry-booking\u002Fd-datepicker.png",954,634,[90,193],{"alt":194,"src":195,"width":94,"height":95},"Room photo tour: living room, bedroom and pool photos in a grid","\u002Fcases\u002Fbookberry-booking\u002Fs-photo.png",[90,197],{"alt":198,"src":199,"width":161,"height":162},"Room photo tour, “Payment failure” screen and “Unsuccessful booking request” screen with recovery actions","\u002Fcases\u002Fbookberry-booking\u002Fstates.png",[10,201,204,208,233],{"id":202,"label":203},"design-system","Design system",[15,205,207],{"id":206},"a-design-system-that-maps-to-code-without-translation","A design system that maps to code without translation",[20,209,210,216,227],{},[23,211,213],{"label":212},"Structured like the code",[56,214,215],{},"Three token layers — Core → Semantic → Component (over 1,200 variables). The library is split into the same sections as the code: Primitives, Actions, Forms, Navigation, Feedback, Patterns.",[23,217,219],{"label":218},"A spec sheet for every component",[56,220,221,222,226],{},"One-sentence purpose, anatomy, props named exactly as in code and a ",[223,224,225],"code",{},"draft · ready · deprecated"," status. Plus domain patterns: RoomCard, a 6×7 Calendar, PriceSummary.",[90,228],{"alt":229,"src":230,"bg":154,"span":53,"width":231,"height":232},"Button: primary, secondary and ghost variants in md and sm sizes across all states, with anatomy and props","\u002Fcases\u002Fbookberry-booking\u002Fds-button.png",1500,873,[139,234,236],{"count":235},"3",[20,237,238,243,248],{},[90,239],{"alt":240,"src":241,"bg":154,"span":53,"width":231,"height":242},"Doc kit: library page template, draft, ready and deprecated statuses, and the component spec sheet format","\u002Fcases\u002Fbookberry-booking\u002Fds-dockit.png",991,[90,244],{"alt":245,"src":246,"bg":154,"span":53,"width":231,"height":247},"TextField: default, focus, filled, error and disabled states with boolean props showLabel, showHelper, required","\u002Fcases\u002Fbookberry-booking\u002Fds-textfield.png",1542,[90,249],{"alt":250,"src":251,"bg":154,"span":53,"width":231,"height":252},"PriceSummary: price rows, taxes and total in card and plain variants with 2 and 3 rows","\u002Fcases\u002Fbookberry-booking\u002Fds-price.png",1083,[10,254,257,261,264],{"id":255,"label":256},"metrics","Results",[15,258,260],{"id":259},"how-we-measure","How we measure",[56,262,263],{},"I don't publish the pilot numbers. We check the solution against four metrics:",[255,265],{":items":266},"[{\"metric\":\"Booking conversion\",\"why\":\"Share of sessions from picking dates to confirmation — the main signal the flow works\",\"expect\":\"↑ up\"},{\"metric\":\"Share of direct bookings\",\"why\":\"How many bookings the hotel gets without an OTA and its commission\",\"expect\":\"↑ up\"},{\"metric\":\"Time to book\",\"why\":\"From picking dates to payment: shows whether there are extra steps\",\"expect\":\"↓ down\"},{\"metric\":\"Recovery after errors\",\"why\":\"Share of guests who still complete the booking after a payment failure\",\"expect\":\"↑ up\"}]",{"title":268,"searchDepth":269,"depth":269,"links":270},"",2,[271,272,273,274],{"id":17,"depth":269,"text":18},{"id":74,"depth":269,"text":75},{"id":206,"depth":269,"text":207},{"id":259,"depth":269,"text":260},"BookBerry × Outglow",{"src":277,"alt":278,"bg":279},"\u002Fcases\u002Fbookberry-booking\u002Fcover.png","Bookberry AI logo on a light cream background","#FFFEED","A real project for BookBerry AI (formerly BnBerry) with Outglow: a direct hotel booking engine for mobile and desktop and a design system ready for code.",false,"md",{"src":284,"alt":285},"\u002Fcases\u002Fbookberry-booking\u002Fhero.png","Desktop room page: photo gallery, description, amenities and a right-hand column with the 4-night price, cancellation terms and add-ons",{},true,"\u002Fog\u002Fen\u002Fbookberry-booking.png",1,"\u002Fen\u002Fcases\u002Fbookberry-booking","2026","Mobile web + desktop","Direct hotel booking with price and terms clear upfront","DBS app — a direct booking engine for hotel guests (B2C)",null,"Product Designer",{"title":5,"description":280},"real","en\u002Fcases\u002Fbookberry-booking","BookBerry AI + Outglow agency","#ECE4D9",{"problem":303,"solution":304,"role":305,"effect":306},"Hotels pay OTAs a commission on every booking, and guests on the hotel's own site lack a reason to book direct","A direct booking engine for mobile and desktop: the all-in price and the terms are visible at every step, and the design system is ready to move into code.","Product design of the flow, screens and design system — together with the Outglow agency","Piloted with a partner hotel. I don't publish the numbers — we track booking conversion and the share of direct bookings",[308],"Figma (variables, components)","Mobile web + desktop · flows, UI, design system",2026,"Zdphu1txw6ajoVoQu9Pjhcp32ymlcW0ky1dwltEU6ig",[313,316,329,344,358,372],{"path":290,"company":275,"status":298,"problemLine":293,"workType":309,"cover":314,"hero":315,"order":289,"draft":281,"title":5},{"src":277,"alt":278,"bg":279},{"src":284,"alt":285},{"path":317,"company":318,"status":298,"problemLine":319,"workType":320,"cover":321,"hero":325,"order":269,"draft":281,"title":328},"\u002Fen\u002Fcases\u002Fbnberry-emails","BnBerry","In a minute, hosts see revenue, AI results and what to fix","Email · product design, 3 iterations",{"src":322,"alt":323,"bg":324},"\u002Fcases\u002Fbnberry-emails\u002Fcover.png","BnBerry logo on a violet background","#6366F1",{"src":326,"alt":327},"\u002Fcases\u002Fbnberry-emails\u002Fhero.png","Three email versions side by side: Voice of Guest with chips, a minimal version with AI insight and the approved Monthly Performance Recap","BnBerry: the monthly host email — from a review digest to revenue and actions",{"path":330,"company":331,"status":332,"problemLine":333,"workType":334,"cover":335,"hero":339,"order":342,"draft":281,"title":343},"\u002Fen\u002Fcases\u002Fpinterest-ai-control","Pinterest","concept","A “less AI” setting exists, yet AI still fills the feed","iOS \u002F Android · research, UX\u002FUI, prototype",{"src":336,"alt":337,"bg":338},"\u002Fcases\u002Fpinterest-ai-control\u002Fcover.png","Pinterest logo on a pale pink background","#FFEDED",{"src":340,"alt":341},"\u002Fcases\u002Fpinterest-ai-control\u002Fhero.png","Three concept screens: feed with an “AI: All” chip, a sheet for choosing the AI content mode, and the feed with “AI: Hidden” on and an Undo button",3,"Pinterest: control AI content in two taps, right from the feed",{"path":345,"company":346,"status":332,"problemLine":347,"workType":348,"cover":349,"hero":353,"order":356,"draft":281,"title":357},"\u002Fen\u002Fcases\u002F2gis-ads","2GIS","Owners can’t buy ads themselves — only via a sales call","Web + mobile · research, UX\u002FUI, prototype",{"src":350,"alt":351,"bg":352},"\u002Fcases\u002F2gis-ads\u002Fcover.png","2GIS logo on a light blue background","#D5EDFF",{"src":354,"alt":355},"\u002Fcases\u002F2gis-ads\u002Fhero.png","Step 2 of 5, “Package”: three packages with a fixed price and call forecast, a selection summary and a “Next” button on the right",4,"2GIS: buying ads in the business account, no sales call needed",{"path":359,"company":360,"status":332,"problemLine":361,"workType":362,"cover":363,"hero":367,"order":370,"draft":281,"title":371},"\u002Fen\u002Fcases\u002Fazbuka-order","Azbuka Vkusa","After checkout, orders can’t be edited and issues go to chat","iOS \u002F Android · hypotheses, UX\u002FUI, prototype",{"src":364,"alt":365,"bg":366},"\u002Fcases\u002Fazbuka-order\u002Fcover.png","Azbuka Vkusa logo on a dark green background","#004018",{"src":368,"alt":369},"\u002Fcases\u002Fazbuka-order\u002Fhero.png","Three screens: order placed with a “You can edit until 14:20” timer, a delivered order with “Report a problem”, and choosing a refund to card",5,"Azbuka Vkusa: giving customers control of their order after checkout",{"path":373,"company":374,"status":332,"problemLine":375,"workType":376,"cover":377,"hero":381,"order":384,"draft":281,"title":385},"\u002Fen\u002Fcases\u002Furalsib-login","Uralsib","New phone: no sign-in or access recovery without a call","Android + web · scenarios, UX\u002FUI, prototype",{"src":378,"alt":379,"bg":380},"\u002Fcases\u002Furalsib-login\u002Fcover.png","Uralsib bank logo on a light grey background","#EBEBEB",{"src":382,"alt":383},"\u002Fcases\u002Furalsib-login\u002Fhero.png","Three screens: quick fingerprint sign-in, a “passport or card” choice for identity verification, and the home screen with a new-phone limit banner",6,"Uralsib Online: one-gesture sign-in and access recovery without a call",1794339602968]