[{"data":1,"prerenderedAt":5130},["ShallowReactive",2],{"menu-studies":3,"study-three-fonts":4939},[4,297,551,835,1090,1350,1623,1917,2201,2487,2836,3115,3392,3625,3966,4257,4630],{"id":5,"title":6,"body":7,"cover":286,"description":13,"draft":287,"extension":288,"meta":289,"navigation":287,"order":290,"path":291,"seo":292,"seoDescription":269,"seoTitle":269,"shelf":293,"stem":294,"summary":295,"__hash__":296},"caseStudies\u002Fcase-studies\u002Fdynamic-pricing-in-e-commerse.md","Dynamic Pricing in E-commerse",{"type":8,"value":9,"toc":268},"minimark",[10,14,19,22,51,54,58,61,72,80,93,102,108,112,115,120,123,127,130,141,144,148,151,154,158,161,165,168,172,192,196,199,203,229,232,236],[11,12,13],"p",{},"The prices online rarely stay still. There's the regular price, the payday sale, the member rate, the bundle deal, the voucher that stacks (or doesn't), and the flash sale that ends at midnight. For hotels, the price of the same room can change from one night to the next. I've designed for this kind of moving price across retail and hospitality projects, and I've learned that the hard part isn't the pricing logic. It's helping a shopper trust the number they see.",[15,16,18],"h2",{"id":17},"context-why-prices-move","Context: why prices move",[11,20,21],{},"Dynamic pricing is a broad term. In the projects I've worked on, it usually means one or more of these:",[23,24,25,33,39,45],"ul",{},[26,27,28,32],"li",{},[29,30,31],"strong",{},"Promotional pricing:"," scheduled sales, flash deals and seasonal markdowns.",[26,34,35,38],{},[29,36,37],{},"Segment pricing:"," member, loyalty or app-only prices.",[26,40,41,44],{},[29,42,43],{},"Bundle and tiered pricing:"," buy more, pay less per item.",[26,46,47,50],{},[29,48,49],{},"Demand-based pricing:"," rates that rise and fall with dates and availability, common in hotels.",[11,52,53],{},"Each one is reasonable on its own. The trouble comes when they pile up on one product page and the shopper has to work out what they'll actually pay.",[15,55,57],{"id":56},"the-problem-moving-prices-erode-trust","The problem: moving prices erode trust",[11,59,60],{},"Research on this is fairly consistent. People don't hate price changes. They hate price changes that feel hidden, unpredictable or unfair.",[11,62,63,64,71],{},"The UK consumer group Which? ran focus groups on dynamic pricing and found that people judge fairness by transparency, predictability, choice and whether the higher price brings them any benefit. Price increases after someone had already been quoted a price felt especially unfair. One participant summed up the limits of disclosure: \"you're telling me that I'm being ripped off but I'm still being ripped off\" (",[65,66,70],"a",{"href":67,"rel":68},"https:\u002F\u002Fwww.which.co.uk\u002Fpolicy-and-insight\u002Farticle\u002Fby-fair-means-or-foul-aMgOA8Q0aQlZ",[69],"nofollow","Which?",").",[11,73,74,75,71],{},"A 2025 Dectech survey of 1,166 people found that framing changes how fair a price feels. A higher peak price presented as a discount from the normal price rated as fairer than the same gap presented as a peak-time penalty. Unexpected fluctuations also did far more damage than expected ones (",[65,76,79],{"href":77,"rel":78},"https:\u002F\u002Fwww.dectech.co.uk\u002F?p=8995",[69],"Dectech",[11,81,82,83,88,89,71],{},"Then there's the display itself. Baymard found that 18% of desktop sites and 11% of mobile sites make the product price unnecessarily hard to find, and 14% of desktop sites place promotions far from the price (",[65,84,87],{"href":85,"rel":86},"https:\u002F\u002Fbaymard.com\u002Fblog\u002Fproduct-page-price-discounts",[69],"Baymard Institute","). On the checkout side, 12% of shoppers who abandon a cart say they couldn't see or calculate the total cost up front (",[65,90,87],{"href":91,"rel":92},"https:\u002F\u002Fbaymard.com\u002Flists\u002Fcart-abandonment-rate",[69],[11,94,95,96,101],{},"In the Philippines there's a legal angle too. The Internet Transactions Act of 2023 requires online merchants to indicate the prices of what they sell, and e-retailers to show business details like name, address and contact info (",[65,97,100],{"href":98,"rel":99},"https:\u002F\u002Fwww.forvismazars.com\u002Fph\u002Fen\u002Finsights\u002Fcorporate-secretarial-alerts\u002Finternet-transactions-act-of-2023",[69],"Forvis Mazars","). Clear pricing isn't only good UX. It's part of compliance.",[103,104,105],"blockquote",{},[11,106,107],{},"A price that changes is fine. A price that surprises is what loses the sale.",[15,109,111],{"id":110},"the-design-approach","The design approach",[11,113,114],{},"My goal on these projects was one honest number, with the reasons behind it visible but never in the way.",[116,117,119],"h3",{"id":118},"one-price-clearly-the-price","One price, clearly the price",[11,121,122],{},"The final price the shopper pays is the biggest, boldest number in the buy area. If there's a discount, the original sits next to it with a strikethrough in a muted color. I follow Baymard's advice to show the saving in a clear way, and when space is tight, I pick whichever is bigger: the percentage or the peso amount.",[116,124,126],{"id":125},"every-offer-lives-next-to-the-price","Every offer lives next to the price",[11,128,129],{},"Promos scattered across banners, badges and descriptions make shoppers wonder whether they stack. I group all offers into one block directly under the price:",[23,131,132,135,138],{},[26,133,134],{},"What the offer is, in plain words (\"₱200 off with code\" or \"Members save 10%\").",[26,136,137],{},"Whether it's already applied to the price shown.",[26,139,140],{},"When it ends, if it ends.",[11,142,143],{},"Each offer appears once. If a long page needs a reminder, it uses the same wording, so it doesn't read like a second deal.",[116,145,147],{"id":146},"explain-without-lecturing","Explain without lecturing",[11,149,150],{},"For hotel rates, I design small, calm explanations near the date picker, such as showing that weekend nights cost more and weekday nights cost less. Following the Dectech finding, I frame lower rates as savings (\"Save on weekday stays\") rather than framing higher rates as surcharges.",[11,152,153],{},"A price calendar works well here. Shoppers can see the pattern themselves and choose the dates that fit their budget, which gives them the sense of choice the Which? research highlights.",[116,155,157],{"id":156},"lock-the-price-once-its-quoted","Lock the price once it's quoted",[11,159,160],{},"This is the rule I push hardest with clients. Once a shopper has a price in their cart or booking form, it holds for a reasonable window. If it has to change, the interface says so clearly before payment, never silently at the last step.",[116,162,164],{"id":163},"urgency-but-only-if-its-true","Urgency, but only if it's true",[11,166,167],{},"Countdown timers and \"only 2 left\" badges work because they create pressure. I'll design them only when they reflect real data. A fake timer that resets on refresh is the fastest way to lose trust, and it's the kind of thing shoppers screenshot and share.",[15,169,171],{"id":170},"trade-offs","Trade-offs",[23,173,174,180,186],{},[26,175,176,179],{},[29,177,178],{},"Clarity versus marketing."," Marketing teams want every promo shouted everywhere. Grouping offers into one block felt quieter to them at first. I showed them side-by-side mockups, and the cleaner version usually won on clarity.",[26,181,182,185],{},[29,183,184],{},"Price lock versus revenue."," Holding a quoted price can mean selling a little below the latest rate. I frame it as a trust cost the business chooses to pay.",[26,187,188,191],{},[29,189,190],{},"Calendar versus simplicity."," A price calendar adds interface weight on mobile. I made it collapsible, with a simple \"cheapest nights\" hint visible by default.",[15,193,195],{"id":194},"what-came-out-of-it","What came out of it",[11,197,198],{},"I can't share client figures, but the qualitative change was noticeable. Support teams fielded fewer questions about whether a voucher applied, and in review sessions stakeholders could explain the price on a page in one sentence. For me, that's the real test: if the people running the store can't explain the number, the shopper won't trust it.",[15,200,202],{"id":201},"what-id-do-next","What I'd do next",[23,204,205,211,217,223],{},[26,206,207,210],{},[29,208,209],{},"Build a price component into the design system."," One component that handles regular, sale, member and range prices, with documented rules, so every new page starts honest.",[26,212,213,216],{},[29,214,215],{},"Test the copy."," Run quick preference tests on how discounts and rate changes are worded, in English and Taglish.",[26,218,219,222],{},[29,220,221],{},"Show price history."," For big-ticket items, a simple \"lowest price in 30 days\" note would make discounts easier to believe.",[26,224,225,228],{},[29,226,227],{},"Write a pricing UX checklist"," for clients, covering the Internet Transactions Act basics alongside display rules.",[11,230,231],{},"Prices can move as much as the business needs. The interface's job is to make every move easy to see and easy to understand.",[15,233,235],{"id":234},"sources","Sources",[23,237,238,244,250,256,262],{},[26,239,240,241],{},"Which?, \"By fair means or foul? Consumer views on dynamic pricing\": ",[65,242,67],{"href":67,"rel":243},[69],[26,245,246,247],{},"Dectech, \"Dynamic Pricing: How Do Consumers Respond to Fluctuations in Price?\": ",[65,248,77],{"href":77,"rel":249},[69],[26,251,252,253],{},"Baymard Institute, \"4 Pitfalls for Displaying Price Discounts on Product Pages\": ",[65,254,85],{"href":85,"rel":255},[69],[26,257,258,259],{},"Baymard Institute, \"Cart Abandonment Rate Statistics\": ",[65,260,91],{"href":91,"rel":261},[69],[26,263,264,265],{},"Forvis Mazars Philippines, \"Internet Transactions Act of 2023\": ",[65,266,98],{"href":98,"rel":267},[69],{"title":269,"searchDepth":270,"depth":270,"links":271},"",2,[272,273,274,282,283,284,285],{"id":17,"depth":270,"text":18},{"id":56,"depth":270,"text":57},{"id":110,"depth":270,"text":111,"children":275},[276,278,279,280,281],{"id":118,"depth":277,"text":119},3,{"id":125,"depth":277,"text":126},{"id":146,"depth":277,"text":147},{"id":156,"depth":277,"text":157},{"id":163,"depth":277,"text":164},{"id":170,"depth":270,"text":171},{"id":194,"depth":270,"text":195},{"id":201,"depth":270,"text":202},{"id":234,"depth":270,"text":235},"\u002Fcovers\u002Fdynamic-pricing-in-e-commerse.webp",true,"md",{},1,"\u002Fcase-studies\u002Fdynamic-pricing-in-e-commerse",{"title":6,"description":13},"work","case-studies\u002Fdynamic-pricing-in-e-commerse","Designing price displays that change with promos, member rates and demand, without making shoppers feel tricked.","VH4kOIQ4_6AJxQXxPU3iyzEMllQPKBRXR-itCn1ofQk",{"id":298,"title":299,"body":300,"cover":544,"description":304,"draft":287,"extension":288,"meta":545,"navigation":287,"order":290,"path":546,"seo":547,"seoDescription":269,"seoTitle":269,"shelf":293,"stem":548,"summary":549,"__hash__":550},"caseStudies\u002Fcase-studies\u002Fpinoy-e-commerce.md","Pinoy E-commerce Nowadays",{"type":8,"value":301,"toc":530},[302,305,308,312,320,329,332,336,339,350,356,365,370,372,375,379,382,393,397,400,403,414,417,421,424,435,439,442,444,447,467,469,472,474,500,503,505],[11,303,304],{},"Most e-commerce playbooks are written for a shopper who sits at a laptop, pays by credit card and never talks to anyone. That shopper exists here, but they aren't the majority. Over the last four years I've designed storefronts and shopping apps for retail and lifestyle brands in the Philippines, including a fashion retailer's website and customer mobile app. The biggest lesson from that work is simple. If you design for the Filipino shopper you imagine, you'll miss the one who actually shows up.",[11,306,307],{},"This piece covers what I've learned about that gap and how it changes the design.",[15,309,311],{"id":310},"context-a-market-that-buys-on-the-phone","Context: a market that buys on the phone",[11,313,314,315,71],{},"The numbers explain a lot. The latest e-Conomy SEA report from Google, Temasek and Bain puts the Philippine digital economy at about $36 billion in gross merchandise value for 2025, up 16% year on year, with e-commerce as the largest slice. Video commerce grew 35% on its own (",[65,316,319],{"href":317,"rel":318},"https:\u002F\u002Fbitpinas.com\u002Ffintech\u002Fph-digital-economy-2025\u002F",[69],"BitPinas",[11,321,322,323,328],{},"Reach is just as big. DataReportal counted 97.5 million internet users in the Philippines in January 2025 and 90.8 million social media user identities, about 78% of the population (",[65,324,327],{"href":325,"rel":326},"https:\u002F\u002Fdatareportal.com\u002Freports\u002Fdigital-2025-philippines",[69],"DataReportal","). Most of those people meet a brand first in a feed, on a phone, between other things.",[11,330,331],{},"So the starting point for every retail project I take on is the same. It's a phone, a mid-range one, on mobile data that isn't always fast. The customer probably found you through a post or a live selling video, not a search.",[15,333,335],{"id":334},"the-problem-three-habits-most-templates-ignore","The problem: three habits most templates ignore",[11,337,338],{},"Off-the-shelf storefront themes are good at the basics. Where they struggle is with three local habits.",[11,340,341,344,345,71],{},[29,342,343],{},"Cash on delivery is still a real payment method."," Xendit's Ecommerce Payments Momentum Report 2026 found that cash on delivery still makes up 23% of Philippine e-commerce transaction value on its platform, the highest of the six Southeast Asian markets it studied. Even more telling, 41% of Filipino shoppers who abandoned a purchase in the previous three months said their preferred payment method wasn't available (",[65,346,349],{"href":347,"rel":348},"https:\u002F\u002Ftribune.net.ph\u002F2026\u002F10\u002F20\u002Fcash-on-delivery-still-dominates-phl-online-shopping",[69],"Daily Tribune",[11,351,352,355],{},[29,353,354],{},"People want to ask before they buy."," \"Available pa po?\" is practically a national checkout step. Shoppers message the page to check sizes, stock, delivery areas and whether the photo matches the item.",[11,357,358,361,362,71],{},[29,359,360],{},"Surprise costs kill the sale."," This one is universal, but it hurts more when the budget is tight. Baymard's research puts the average documented cart abandonment rate at 70.22%. Among shoppers who abandon for reasons other than \"just browsing\", 40% blame extra costs like shipping and fees, and 12% say they couldn't see or work out the total up front (",[65,363,87],{"href":91,"rel":364},[69],[103,366,367],{},[11,368,369],{},"A Filipino shopper's checkout doesn't start at the cart. It starts in the chat window, and it ends when the rider hands over the parcel.",[15,371,111],{"id":110},[11,373,374],{},"I treat the whole journey as the product: discovery, the chat, the cart, the payment and the delivery. Here are the decisions I keep coming back to.",[116,376,378],{"id":377},"mobile-first-for-real","Mobile first, for real",[11,380,381],{},"\"Mobile first\" usually means the desktop layout squeezed down. I design the phone layout first and treat desktop as the expansion.",[23,383,384,387,390],{},[26,385,386],{},"Product cards are built for thumbs: big tap targets, the price in bold, and the main action within reach of the thumb.",[26,388,389],{},"Images are cropped for portrait screens because that's where traffic comes from, especially from social links.",[26,391,392],{},"Pages are kept light. Fewer heavy carousels, compressed images, and skeleton states so slow connections still feel responsive.",[116,394,396],{"id":395},"payment-options-as-a-trust-signal","Payment options as a trust signal",[11,398,399],{},"I put payment methods on the product page, not just at checkout. A small row saying COD, GCash, cards and bank transfer near the price answers the question before it turns into a reason to leave.",[11,401,402],{},"For cash on delivery, the design job is to set expectations:",[23,404,405,408,411],{},[26,406,407],{},"Show clearly whether COD is available for the shopper's area.",[26,409,410],{},"Remind them to prepare the exact amount, and show it in big, plain numbers on the confirmation screen.",[26,412,413],{},"Keep order tracking simple so the shopper knows when to expect the rider.",[11,415,416],{},"On the business side, COD carries risk, so I'll often design light friction for first-time COD orders, such as a confirmation message, rather than removing the option entirely.",[116,418,420],{"id":419},"messaging-as-part-of-the-flow","Messaging as part of the flow",[11,422,423],{},"Rather than fighting the urge to chat, I design for it. On the fashion app and site, that meant:",[23,425,426,429,432],{},[26,427,428],{},"A \"Message us about this item\" entry point on the product page that carries the product name, size and photo into the conversation, so the shopper doesn't have to describe it.",[26,430,431],{},"Clear size guides and real-person photos to answer the most common questions before anyone types them.",[26,433,434],{},"A visible store schedule for chat replies so silence doesn't read as \"no stock.\"",[116,436,438],{"id":437},"no-surprises-at-the-total","No surprises at the total",[11,440,441],{},"Given how often unexpected costs cause abandonment, I push for an estimated delivery fee as early as the product page, plus a running total in the cart that already includes shipping once a location is set. Vouchers and promos sit right next to the total so shoppers can see the effect immediately.",[15,443,171],{"id":170},[11,445,446],{},"Not everything is a win.",[23,448,449,455,461],{},[26,450,451,454],{},[29,452,453],{},"COD versus operations."," Cash on delivery lifts reach but adds failed deliveries and reconciliation work. Design can ease this, but it's a business decision, and I present it to the client that way.",[26,456,457,460],{},[29,458,459],{},"Chat versus self-service."," Every chat button adds load for a small support team. The goal is to make the page answer most questions so the chat handles only the real edge cases.",[26,462,463,466],{},[29,464,465],{},"Speed versus brand richness."," Fashion clients love big visuals and motion. On a slow connection, those can stop the page from loading. We usually agreed on one hero moment per page and kept everything else lean.",[15,468,195],{"id":194},[11,470,471],{},"I can't share client numbers, but the pattern held. Once payment options and delivery fees were visible early, the team got fewer \"how much is shipping?\" messages and fewer carts left at the delivery step. The app also gave repeat buyers a faster path. Saved addresses and a preferred payment method made reordering a few taps instead of a full checkout.",[15,473,202],{"id":201},[23,475,476,482,488,494],{},[26,477,478,481],{},[29,479,480],{},"Design for video commerce."," With video commerce growing fast, I'd want short product clips and live-selling replays on the product page itself, linked straight to the size and add-to-cart controls.",[26,483,484,487],{},[29,485,486],{},"Test with real devices on real data."," I'd set up regular usability sessions on mid-range Android phones over mobile data, not office Wi-Fi.",[26,489,490,493],{},[29,491,492],{},"Make COD smarter."," Use order history to offer COD confidently to trusted repeat customers while gently nudging new ones toward QR Ph or e-wallets.",[26,495,496,499],{},[29,497,498],{},"Use Taglish where it fits."," Microcopy that sounds like the brand's chat replies feels more honest than stiff formal English, as long as it stays clear.",[11,501,502],{},"Filipino e-commerce isn't behind. It's different. Design for the phone, the chat and the cash, and the shop stops feeling like a foreign template.",[15,504,235],{"id":234},[23,506,507,513,519,525],{},[26,508,509,510],{},"BitPinas, \"PH Digital Economy Posts 16% Increase\" (e-Conomy SEA 2025 coverage): ",[65,511,317],{"href":317,"rel":512},[69],[26,514,515,516],{},"DataReportal, \"Digital 2025: The Philippines\": ",[65,517,325],{"href":325,"rel":518},[69],[26,520,521,522],{},"Daily Tribune, \"Cash on delivery still dominates PHL online shopping\" (Xendit Ecommerce Payments Momentum Report 2026): ",[65,523,347],{"href":347,"rel":524},[69],[26,526,258,527],{},[65,528,91],{"href":91,"rel":529},[69],{"title":269,"searchDepth":270,"depth":270,"links":531},[532,533,534,540,541,542,543],{"id":310,"depth":270,"text":311},{"id":334,"depth":270,"text":335},{"id":110,"depth":270,"text":111,"children":535},[536,537,538,539],{"id":377,"depth":277,"text":378},{"id":395,"depth":277,"text":396},{"id":419,"depth":277,"text":420},{"id":437,"depth":277,"text":438},{"id":170,"depth":270,"text":171},{"id":194,"depth":270,"text":195},{"id":201,"depth":270,"text":202},{"id":234,"depth":270,"text":235},"\u002Fcovers\u002Fpinoy-e-commerce.webp",{},"\u002Fcase-studies\u002Fpinoy-e-commerce",{"title":299,"description":304},"case-studies\u002Fpinoy-e-commerce","Designing online shops around how Filipinos actually buy: on the phone, often with cash on delivery, and usually after a quick chat with the seller.","JU82OZ8oOVK9KGNk-yJykzRWzn2xPhLypBYwljxL_58",{"id":552,"title":553,"body":554,"cover":828,"description":558,"draft":287,"extension":288,"meta":829,"navigation":287,"order":270,"path":830,"seo":831,"seoDescription":269,"seoTitle":269,"shelf":293,"stem":832,"summary":833,"__hash__":834},"caseStudies\u002Fcase-studies\u002Fthe-mega-menu-of-academics.md","The Mega Menu of Academics",{"type":8,"value":555,"toc":813},[556,559,563,577,580,584,587,598,601,604,609,611,615,627,630,634,637,657,660,663,683,687,694,698,706,710,713,721,723,743,745,748,750,776,779,781],[11,557,558],{},"University websites are some of the hardest navigation problems I've worked on. A university is really dozens of organizations under one name: colleges, departments, graduate schools, admissions, research centers, student services and alumni offices. All of them want a spot in the top menu. I've designed websites for two universities, and in both cases the main question was the same: how does a 17-year-old on a phone find the program they want?",[15,560,562],{"id":561},"context-what-students-actually-come-for","Context: what students actually come for",[11,564,565,566,571,572,71],{},"Nielsen Norman Group has studied university websites for years. Their University Websites report collects 152 design guidelines from testing with high school students, transfer students, master's applicants and parents in several countries (",[65,567,570],{"href":568,"rel":569},"https:\u002F\u002Fwww.nngroup.com\u002Freports\u002Funiversity\u002F",[69],"Nielsen Norman Group","). One finding keeps coming up in discussions of that research: almost half of prospective students (48%) didn't realize a university offered the program they were looking for, even when it did (",[65,573,576],{"href":574,"rel":575},"https:\u002F\u002Faha.elliance.com\u002F2024\u002F06\u002F27\u002Facademic-program-finders-best-practices-and-examples\u002F",[69],"Elliance, citing NN\u002Fg",[11,578,579],{},"That one hit home. The program is the product. If students can't find it, nothing else on the site matters.",[15,581,583],{"id":582},"the-problem-an-org-chart-disguised-as-a-menu","The problem: an org chart disguised as a menu",[11,585,586],{},"When I started, the academic navigation followed the internal structure:",[23,588,589,592,595],{},[26,590,591],{},"Top level: colleges, named the way the university names them internally.",[26,593,594],{},"Second level: departments.",[26,596,597],{},"Third level, if you got that far: the actual degree programs.",[11,599,600],{},"This makes sense to staff. It doesn't make sense to a senior high student who knows they want \"something with computers\" and has no idea whether that lives under engineering, science or business. Some programs also sat in two places, which made people wonder whether they were different programs.",[11,602,603],{},"The existing dropdowns were long single columns that ran past the bottom of the screen. Hover menus opened and closed as the mouse moved across the bar. On mobile, it was a nested accordion three levels deep.",[103,605,606],{},[11,607,608],{},"Students don't browse a university by its org chart. They browse by \"what do I want to study, and can I get in?\"",[15,610,111],{"id":110},[116,612,614],{"id":613},"why-a-mega-menu","Why a mega menu",[11,616,617,618,622,623,71],{},"A mega menu fits this problem. Nielsen Norman Group's guidance is that mega menus work well for large sites because users can \"see rather than try to remember\" their options, and the panel gives room for grouping and richer content (",[65,619,570],{"href":620,"rel":621},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fmega-menus-work-well\u002F",[69],"). The catch is that a badly organized mega menu is just a bigger mess. NN\u002Fg's own critique of poor mega menus points to unclear structure, decorative images instead of real choices, and an organizing principle users can't see (",[65,624,570],{"href":625,"rel":626},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fmega-menus-gone-wrong\u002F",[69],[11,628,629],{},"So the menu was the easy part. The structure underneath it was the real work.",[116,631,633],{"id":632},"restructuring-by-how-students-think","Restructuring by how students think",[11,635,636],{},"I worked through grouping exercises with the university team, testing the groupings against the way students describe what they want to study, then grouped programs by field of study instead of by college. The academic panel became:",[23,638,639,645,651],{},[26,640,641,644],{},[29,642,643],{},"Fields of study"," in plain words, like Business and Accountancy, Computing and IT, Health Sciences, Engineering, Education, and Arts and Communication.",[26,646,647,650],{},[29,648,649],{},"Level"," as a clear split: undergraduate, graduate and short courses.",[26,652,653,656],{},[29,654,655],{},"One prominent link"," to \"View all programs\", which opens the full program finder.",[11,658,659],{},"Colleges still exist, but they moved to their own \"Colleges\" item and to each program page. That kept the staff view without forcing it on students.",[11,661,662],{},"I also followed a few NN\u002Fg rules strictly:",[23,664,665,671,677],{},[26,666,667,670],{},[29,668,669],{},"Each program appears once."," No duplicates across groups.",[26,672,673,676],{},[29,674,675],{},"Labels start with the most useful word."," \"Nursing\" rather than \"Bachelor of Science in Nursing\" in the menu, with the full degree name on the page.",[26,678,679,682],{},[29,680,681],{},"No decorative imagery."," One small feature slot for admissions deadlines, because that's something students actually look for.",[116,684,686],{"id":685},"getting-the-hover-right","Getting the hover right",[11,688,689,690,693],{},"Small timing details make a mega menu feel calm instead of twitchy. NN\u002Fg recommends waiting about half a second before opening a hover menu and keeping it open briefly after the pointer leaves (",[65,691,570],{"href":620,"rel":692},[69],"). I wrote these timings into the dev handover with a note about diagonal mouse movement, so the panel doesn't snap shut when someone moves toward a link. Click and keyboard access also open the panel, so it's not hover-only.",[116,695,697],{"id":696},"careful-with-audience-menus","Careful with audience menus",[11,699,700,701,705],{},"Universities love \"For Students \u002F For Parents \u002F For Alumni\" navigation. NN\u002Fg warns that audience-based navigation confuses people who fit several groups or aren't sure which one they belong to, and recommends it mainly as secondary navigation (",[65,702,570],{"href":703,"rel":704},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Faudience-based-navigation\u002F",[69],"). We kept audience links in a small utility bar at the top and kept the main menu task-based: Academics, Admissions, Campus Life, Research, About.",[116,707,709],{"id":708},"mobile-the-menu-isnt-enough","Mobile: the menu isn't enough",[11,711,712],{},"A mega menu doesn't translate to a phone. On mobile, I designed the Academics item to open a short list of fields, each leading to a filtered view of the program finder rather than another nested level.",[11,714,715,716,720],{},"The program finder did the heavy lifting. Following common program-finder best practices, it offered A–Z order, logical groupings and filters for field, level, college and format, plus keyword search (",[65,717,719],{"href":574,"rel":718},[69],"Elliance","). Search was visible at the top, not hidden inside the menu.",[15,722,171],{"id":170},[23,724,725,731,737],{},[26,726,727,730],{},[29,728,729],{},"Politics versus findability."," Every college wanted top-level visibility. Grouping by field meant some colleges lost their spot in the main bar. Walking stakeholders through the site as a student, step by step, did more than any argument I could make.",[26,732,733,736],{},[29,734,735],{},"Completeness versus scannability."," Listing every program in the panel was tempting but unreadable. We showed fields and top programs, and trusted \"View all programs\" for the rest.",[26,738,739,742],{},[29,740,741],{},"Content upkeep."," A finder only works if program data stays accurate. We designed simple CMS fields so staff could update programs without touching the menu.",[15,744,195],{"id":194},[11,746,747],{},"I can't share analytics, but the feedback from walkthroughs was clear. In walkthroughs, people new to the site found programs faster and with fewer wrong turns. The admissions team also stopped getting as many basic \"do you offer this course?\" inquiries.",[15,749,202],{"id":201},[23,751,752,758,764,770],{},[26,753,754,757],{},[29,755,756],{},"Tree testing before visuals."," I'd validate the field groupings with a proper tree test before any visual design.",[26,759,760,763],{},[29,761,762],{},"Search analytics."," Feed site search terms back into labels. If students keep typing \"IT\", the label should probably say IT.",[26,765,766,769],{},[29,767,768],{},"Career-based entry points."," Let students start from an outcome, like \"I want to be a nurse\", and land on the matching programs.",[26,771,772,775],{},[29,773,774],{},"Program comparison."," A simple side-by-side of two or three programs, covering duration, requirements and fees, so students don't have to juggle browser tabs.",[11,777,778],{},"A mega menu is just the doorway. The real design is in the room behind it.",[15,780,235],{"id":234},[23,782,783,789,795,801,807],{},[26,784,785,786],{},"Nielsen Norman Group, \"University Websites\" report: ",[65,787,568],{"href":568,"rel":788},[69],[26,790,791,792],{},"Nielsen Norman Group, \"Mega Menus Work Well for Site Navigation\": ",[65,793,620],{"href":620,"rel":794},[69],[26,796,797,798],{},"Nielsen Norman Group, \"Mega-Menus Gone Wrong\": ",[65,799,625],{"href":625,"rel":800},[69],[26,802,803,804],{},"Nielsen Norman Group, \"Audience-Based Navigation\": ",[65,805,703],{"href":703,"rel":806},[69],[26,808,809,810],{},"Elliance, \"Academic Program Finders: Best Practices and Examples\": ",[65,811,574],{"href":574,"rel":812},[69],{"title":269,"searchDepth":270,"depth":270,"links":814},[815,816,817,824,825,826,827],{"id":561,"depth":270,"text":562},{"id":582,"depth":270,"text":583},{"id":110,"depth":270,"text":111,"children":818},[819,820,821,822,823],{"id":613,"depth":277,"text":614},{"id":632,"depth":277,"text":633},{"id":685,"depth":277,"text":686},{"id":696,"depth":277,"text":697},{"id":708,"depth":277,"text":709},{"id":170,"depth":270,"text":171},{"id":194,"depth":270,"text":195},{"id":201,"depth":270,"text":202},{"id":234,"depth":270,"text":235},"\u002Fcovers\u002Fthe-mega-menu-of-academics.webp",{},"\u002Fcase-studies\u002Fthe-mega-menu-of-academics",{"title":553,"description":558},"case-studies\u002Fthe-mega-menu-of-academics","Making a university's hundreds of programs findable from one menu, and backing it up with a program finder that works on a phone.","mQdyOfZC5hn_OBnGqNz3pOA5_xYxz99l-Jl6ij0MGik",{"id":836,"title":837,"body":838,"cover":1083,"description":842,"draft":287,"extension":288,"meta":1084,"navigation":287,"order":277,"path":1085,"seo":1086,"seoDescription":269,"seoTitle":269,"shelf":293,"stem":1087,"summary":1088,"__hash__":1089},"caseStudies\u002Fcase-studies\u002Fpwa.md","PWA",{"type":8,"value":839,"toc":1073},[840,843,846,850,853,856,860,863,866,886,889,893,896,899,904,907,910,914,917,934,937,940,944,947,961,964,966,969,989,992,994,997,1017,1020,1022],[11,841,842],{},"\"Do we need an app?\" is one of the most common questions I hear in client kickoffs. It comes up with education clients, with food and beverage brands, with retail. Usually what the client actually wants is simpler than a native app: a home-screen icon, something that opens fast, and a reason for customers to come back.",[11,844,845],{},"That is where a Progressive Web App (PWA) fits. This piece covers how I design one, and the decisions that matter more than the technology.",[15,847,849],{"id":848},"context","Context",[11,851,852],{},"At an agency, I work with clients across very different industries, but the audience in the Philippines has one thing in common: they are on their phones. DataReportal counted 86.98 million internet users in the Philippines at the start of 2024, with a median mobile connection speed of 27.75 Mbps against 92.19 Mbps on fixed lines. In practice, that means a lot of people browsing on mid-range Android phones over mobile data that drops in and out.",[11,854,855],{},"A native app is a big ask for that audience. It has to be found in a store, downloaded, kept updated and given storage space. For the client, it means two codebases, store reviews and a bigger maintenance budget. Many of our clients already have a good website. The question is how to make that website feel like an app.",[15,857,859],{"id":858},"the-problem","The problem",[11,861,862],{},"MDN describes a PWA as an app built with web technologies that can, like a native app, \"be installed on the device, operate offline and in the background.\" The technical side is well documented. The design side is where projects usually go wrong.",[11,864,865],{},"When I look at a site before it becomes a PWA, I usually find three gaps:",[23,867,868,874,880],{},[26,869,870,873],{},[29,871,872],{},"No install story."," Nobody has decided when or why a visitor would want to install it.",[26,875,876,879],{},[29,877,878],{},"No offline story."," The site either works or shows the browser's dinosaur. There is nothing in between.",[26,881,882,885],{},[29,883,884],{},"No app shell."," Once launched from the home screen, the site has no browser bar, so any page that relied on the back button or the URL bar suddenly feels broken.",[11,887,888],{},"So the work isn't \"add a manifest.\" It's designing those three moments.",[15,890,892],{"id":891},"designing-the-install-moment","Designing the install moment",[11,894,895],{},"Chrome only offers installation once a site meets certain criteria: HTTPS, a web app manifest with a name, 192px and 512px icons, a start URL and a standalone-style display mode, plus some user engagement. According to web.dev, that means at least one click or tap and at least 30 seconds on the page. Those are developer requirements, but they shape design work too. The icon, the short name under it and the splash colours are now brand assets that sit on someone's home screen next to their banking and messaging apps.",[11,897,898],{},"The bigger design question is timing. web.dev's guidance on promoting installation is clear: avoid prompting on first load, keep promotions out of the main flow, always let people dismiss them, and remember that choice. It suggests showing a promotion after a meaningful action, like a purchase, a booking or a sign-up.",[103,900,901],{},[11,902,903],{},"An install prompt on page load is asking for commitment before you've earned it. I'd rather ask right after someone gets value.",[11,905,906],{},"So my rule is to tie the install prompt to a moment of success. For a booking flow, that is the confirmation screen. For a content site, it's after a few return visits. For an e-commerce site, it's after checkout, placed away from the next steps so it doesn't block them. Then I write the prompt around a specific benefit (\"Get your order updates in one tap\") rather than the technology (\"Install our PWA\").",[11,908,909],{},"iOS needs its own design. Safari doesn't fire the same install event, so people have to use the Share menu and \"Add to Home Screen.\" The web.dev case study on Rakuten 24 is a good example: the team built a custom install prompt, detected whether the app was already installed on Android or iOS, and sent users who didn't install from the banner to a step-by-step guide for each platform. I now design that guide as a standard part of the PWA kit: a short, illustrated sheet that matches the client's brand.",[15,911,913],{"id":912},"designing-for-offline-and-bad-connections","Designing for offline and bad connections",[11,915,916],{},"web.dev's offline UX guidelines read almost like a checklist I work through with the team:",[23,918,919,922,925,928,931],{},[26,920,921],{},"Tell users the app's state as soon as it changes, and whether the problem is on their side or ours.",[26,923,924],{},"Let people keep browsing what's cached and disable only what really needs a connection, like checkout.",[26,926,927],{},"Show when content was last updated.",[26,929,930],{},"Avoid full-screen blocking modals, and don't rely on colour alone to signal state.",[26,932,933],{},"Avoid jargon. Say \"download\" or \"save for later,\" never \"service worker.\"",[11,935,936],{},"In design files, this means every key screen gets extra states beyond \"loaded\" and \"error\": loading with skeletons, offline with cached content, offline with nothing cached, and back online. I design a small connection banner that sits under the header, uses an icon and text together, and goes away on its own when the connection returns. I also design an offline fallback page that still looks like the brand and offers something useful, such as saved items, contact details or the last content the person viewed.",[11,938,939],{},"Writing matters here. \"You're offline. You can still browse saved items. We'll send your message when you're back online.\" is three short sentences, and it does more than any illustration.",[15,941,943],{"id":942},"designing-the-app-shell","Designing the app shell",[11,945,946],{},"Once installed in standalone mode, the site loses the browser's address bar and, on some devices, an obvious back button. I check every flow for that:",[23,948,949,952,955,958],{},[26,950,951],{},"A persistent header or bottom navigation, so people never get stuck on a page.",[26,953,954],{},"Visible back actions on deep pages, instead of relying on the browser.",[26,956,957],{},"A share button wherever someone might have copied a URL before.",[26,959,960],{},"Safe-area padding for notches and gesture bars, and a splash and theme colour that match the brand.",[11,962,963],{},"This is the part clients notice first. When it's done well, people forget they're on a website.",[15,965,171],{"id":170},[11,967,968],{},"A PWA isn't always the answer, and I say so in kickoffs.",[23,970,971,977,983],{},[26,972,973,976],{},[29,974,975],{},"Platform gaps."," iOS support has improved, but install and some device features still behave differently than on Android. If a product needs deep device integration, native may still be right.",[26,978,979,982],{},[29,980,981],{},"Store presence."," Some clients want to be in the App Store for credibility or marketing. A PWA doesn't give you that by default.",[26,984,985,988],{},[29,986,987],{},"Caching takes discipline."," Offline support means deciding what to cache and for how long. Stale prices or schedules are worse than no data, which is why \"last updated\" labels matter.",[11,990,991],{},"What makes PWAs worth pitching is that the upside is well documented. In web.dev's case studies, Rakuten 24 reported a 310% increase in visit frequency per user and a 450% increase in retention among users who installed the PWA. OpenSooq saw page visits per session rise 48% and average session duration rise 28% for installed users. Those are vendor-reported numbers measured in different ways, but they all point the same way: people who install come back.",[15,993,202],{"id":201},[11,995,996],{},"If I were extending the PWA kit, I'd focus on three things:",[23,998,999,1005,1011],{},[26,1000,1001,1004],{},[29,1002,1003],{},"Measure installs properly from day one."," Track prompt impressions, dismissals and installs, so we can test timing and copy instead of guessing.",[26,1006,1007,1010],{},[29,1008,1009],{},"Design notifications as carefully as the install prompt."," Push notifications are the next permission ask, and the same rule applies: ask after value, not on arrival.",[26,1012,1013,1016],{},[29,1014,1015],{},"Make offline states part of the design system,"," so every new screen ships with them instead of having them added at QA.",[11,1018,1019],{},"The technology for PWAs has been ready for years. What makes one feel like an app is design: deciding when to ask, what to show when the network drops, and how people get around without a browser bar.",[15,1021,235],{"id":234},[23,1023,1024,1031,1038,1045,1052,1059,1066],{},[26,1025,1026,1027],{},"MDN Web Docs, Progressive web apps: ",[65,1028,1029],{"href":1029,"rel":1030},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FProgressive_web_apps",[69],[26,1032,1033,1034],{},"web.dev, Installation criteria: ",[65,1035,1036],{"href":1036,"rel":1037},"https:\u002F\u002Fweb.dev\u002Farticles\u002Finstall-criteria",[69],[26,1039,1040,1041],{},"web.dev, Patterns for promoting PWA installation: ",[65,1042,1043],{"href":1043,"rel":1044},"https:\u002F\u002Fweb.dev\u002Farticles\u002Fpromote-install",[69],[26,1046,1047,1048],{},"web.dev, Offline UX design guidelines: ",[65,1049,1050],{"href":1050,"rel":1051},"https:\u002F\u002Fweb.dev\u002Farticles\u002Foffline-ux-design-guidelines",[69],[26,1053,1054,1055],{},"web.dev, Rakuten 24 case study: ",[65,1056,1057],{"href":1057,"rel":1058},"https:\u002F\u002Fweb.dev\u002Fcase-studies\u002Frakuten-24",[69],[26,1060,1061,1062],{},"web.dev, OpenSooq case study: ",[65,1063,1064],{"href":1064,"rel":1065},"https:\u002F\u002Fweb.dev\u002Fcase-studies\u002Fopensooq-case-study",[69],[26,1067,1068,1069],{},"DataReportal, Digital 2024: The Philippines: ",[65,1070,1071],{"href":1071,"rel":1072},"https:\u002F\u002Fdatareportal.com\u002Freports\u002Fdigital-2024-philippines",[69],{"title":269,"searchDepth":270,"depth":270,"links":1074},[1075,1076,1077,1078,1079,1080,1081,1082],{"id":848,"depth":270,"text":849},{"id":858,"depth":270,"text":859},{"id":891,"depth":270,"text":892},{"id":912,"depth":270,"text":913},{"id":942,"depth":270,"text":943},{"id":170,"depth":270,"text":171},{"id":201,"depth":270,"text":202},{"id":234,"depth":270,"text":235},"\u002Fcovers\u002Fpwa.webp",{},"\u002Fcase-studies\u002Fpwa",{"title":837,"description":842},"case-studies\u002Fpwa","How I approach turning a website into an installable app people keep on their home screen, without the cost of building native apps.","TNer86ypr_VxPtA9jJVqxL0WeQv4HVvuGI8BNJu5tGE",{"id":1091,"title":1092,"body":1093,"cover":1342,"description":1097,"draft":287,"extension":288,"meta":1343,"navigation":287,"order":1344,"path":1345,"seo":1346,"seoDescription":269,"seoTitle":269,"shelf":293,"stem":1347,"summary":1348,"__hash__":1349},"caseStudies\u002Fcase-studies\u002Fai-chatbot.md","AI Chatbot",{"type":8,"value":1094,"toc":1331},[1095,1098,1101,1103,1106,1109,1112,1117,1119,1122,1125,1129,1132,1152,1155,1159,1162,1168,1174,1180,1186,1192,1196,1199,1202,1228,1231,1235,1238,1249,1252,1254,1274,1276,1296,1299,1301],[11,1096,1097],{},"Over the past couple of years, \"can we add an AI chatbot?\" has become a standard line in client briefs. I hear it from education, hospitality, financial services and retail clients. The request is almost always framed as a feature. In practice, a support chatbot is a service design problem with a chat window on top.",[11,1099,1100],{},"This piece covers how I design one: what it should answer, how it behaves when it's wrong, and the handover to a human, which is the part that matters most.",[15,1102,849],{"id":848},[11,1104,1105],{},"Most clients who ask for a chatbot have the same pain. Their support team answers the same questions every day: opening hours, requirements, pricing, booking changes, \"where is my order.\" They want those answered instantly, at any hour, without hiring more people.",[11,1107,1108],{},"That's a fair goal. The risk is that the chatbot becomes a wall between customers and the company. Gartner's 2024 survey of 5,728 customers found that 64% would prefer companies didn't use AI for customer service, and 53% would consider switching to a competitor if they found out a company was going to. The top concern was that AI would make it harder to reach a person.",[11,1110,1111],{},"So the brief I write back is different from the one I receive. It isn't \"add a chatbot.\" It's \"answer the easy questions faster, and make the hard ones easier to get to a human.\"",[103,1113,1114],{},[11,1115,1116],{},"People don't hate chatbots. They hate being stuck with one.",[15,1118,859],{"id":858},[11,1120,1121],{},"Nielsen Norman Group's research on chatbots puts the core issue plainly: bots do fine when users follow the expected path, and struggle as soon as people deviate, skip steps or phrase things in unexpected ways. Recovery is often poor, so users end up starting over. The same research found that people saw bots as less helpful than humans, but faster, because there's no queue.",[11,1123,1124],{},"Large language models make the bot better at understanding messy phrasing, but they add a new failure mode: confident answers that are wrong. Google's People + AI Guidebook calls this out directly. Users judge errors against their expectations, and the stakes vary a lot. A wrong answer about a café's opening hours is annoying. A wrong answer about a loan requirement or a hotel cancellation policy can cost someone money.",[15,1126,1128],{"id":1127},"designing-the-scope-first","Designing the scope first",[11,1130,1131],{},"Before any chat UI, I run a scoping exercise with the client and their support team. We sort real questions into three buckets:",[23,1133,1134,1140,1146],{},[26,1135,1136,1139],{},[29,1137,1138],{},"Answer."," Common, low-risk questions with a clear source of truth: hours, locations, requirements, how-to steps, order status.",[26,1141,1142,1145],{},[29,1143,1144],{},"Assist."," Questions where the bot can collect details and prepare the case, but a person decides: refunds, complaints, account changes.",[26,1147,1148,1151],{},[29,1149,1150],{},"Hand over immediately."," Anything sensitive, emotional or high-stakes: payment disputes, legal or medical topics, safety issues, or anyone who just says \"agent.\"",[11,1153,1154],{},"That third list is the most important design artefact in the project. It's what stops the bot from improvising in areas where it shouldn't. NN\u002Fg's guidance points the same way: limit scope to simple, well-defined tasks, and say clearly what the bot can do.",[15,1156,1158],{"id":1157},"designing-the-conversation","Designing the conversation",[11,1160,1161],{},"With the scope agreed, the conversation design follows a few rules I keep coming back to.",[11,1163,1164,1167],{},[29,1165,1166],{},"Say it's a bot, and say what it does."," The opening message names the assistant as automated and lists a few things it can help with, as tappable suggestions. NN\u002Fg found that when users knew they were talking to a bot, they wrote more directly and in simpler terms, which actually worked better.",[11,1169,1170,1173],{},[29,1171,1172],{},"Offer buttons and free text."," Suggested replies help people who don't know what to ask. Free text helps people who do. Every button has to look and behave like a button.",[11,1175,1176,1179],{},[29,1177,1178],{},"Remember what people already said."," Asking for an order number twice is the fastest way to lose trust. If someone gave their booking reference three messages ago, the bot uses it.",[11,1181,1182,1185],{},[29,1183,1184],{},"Admit when it doesn't know."," \"I'm not sure about that one\" with a next step is better than a confident guess. PAIR recommends explaining limitations specifically, suggesting alternatives and making it easy for users to take back control.",[11,1187,1188,1191],{},[29,1189,1190],{},"Show the source."," For answers drawn from policies or help articles, I link the original page. It lets people check the answer, and it gives the client a way to spot outdated content.",[15,1193,1195],{"id":1194},"designing-the-handover","Designing the handover",[11,1197,1198],{},"This is where I spend the most time, because it's where most chatbots fail.",[11,1200,1201],{},"The rule is simple: a person should never have to fight the bot to reach a human. In practice, that means:",[23,1203,1204,1210,1216,1222],{},[26,1205,1206,1209],{},[29,1207,1208],{},"A visible \"Talk to a person\" option"," in the chat header at all times, not hidden behind three failed attempts.",[26,1211,1212,1215],{},[29,1213,1214],{},"Automatic handover triggers:"," repeated \"I didn't understand\" responses, negative sentiment, anything on the hand-over list, or a direct request.",[26,1217,1218,1221],{},[29,1219,1220],{},"No starting over."," The agent receives the full conversation and any details the bot collected. Gartner's recommendation is the same: tell customers when they'll be connected to a person, and let the agent pick up where the bot left off.",[26,1223,1224,1227],{},[29,1225,1226],{},"Honest wait expectations."," If no agent is online, say so, give the support hours and offer a callback, email or ticket, so the request doesn't disappear.",[11,1229,1230],{},"I design the agent's side too. A short summary card at the top of the handed-over chat (topic, details collected, what the bot already tried) saves the agent from reading the whole thread, and saves the customer from repeating themselves.",[15,1232,1234],{"id":1233},"designing-for-failure","Designing for failure",[11,1236,1237],{},"Every chatbot will get things wrong, so I design those states as deliberately as the happy path:",[23,1239,1240,1243,1246],{},[26,1241,1242],{},"A \"Was this helpful?\" control on answers, with a quick reason when someone says no. This feeds the content team, not just the model.",[26,1244,1245],{},"A clear fallback message that offers rephrasing, related topics and a human.",[26,1247,1248],{},"Guardrail responses for off-topic or abusive messages that stay polite, keep the brand voice and don't over-explain how the system works. PAIR describes this as making failure \"safe and boring.\"",[11,1250,1251],{},"Microsoft's guidelines for human-AI interaction are organised the same way: what to do on first contact, during the interaction, when the AI is wrong, and over time. That framing is a useful checklist in design reviews.",[15,1253,171],{"id":170},[23,1255,1256,1262,1268],{},[26,1257,1258,1261],{},[29,1259,1260],{},"Coverage vs. trust."," A bot that tries to answer everything will answer some things badly. A narrower bot that hands over well usually earns more trust.",[26,1263,1264,1267],{},[29,1265,1266],{},"Personality vs. clarity."," A friendly, branded voice is good, but it should never get in the way of a clear answer. If the bot has a personality, it has to stay consistent, including in error messages.",[26,1269,1270,1273],{},[29,1271,1272],{},"Deflection vs. resolution."," It's tempting to measure success by how many chats never reached an agent. I push clients to measure resolved questions instead, because a deflected but unresolved customer just comes back angrier, or doesn't come back.",[15,1275,202],{"id":201},[23,1277,1278,1284,1290],{},[26,1279,1280,1283],{},[29,1281,1282],{},"Review real transcripts weekly in the first months."," The questions people actually ask are always different from the ones in the kickoff spreadsheet.",[26,1285,1286,1289],{},[29,1287,1288],{},"Treat the knowledge base as part of the product."," Most bad answers trace back to outdated or missing help content, so the content workflow needs an owner.",[26,1291,1292,1295],{},[29,1293,1294],{},"Test the handover with real support staff,"," not just the customer side. If the agent experience is clumsy, the whole thing falls apart at the most important moment.",[11,1297,1298],{},"A good support chatbot isn't the one that never hands over. It's the one that knows exactly when to.",[15,1300,235],{"id":234},[23,1302,1303,1310,1317,1324],{},[26,1304,1305,1306],{},"Nielsen Norman Group, The User Experience of Chatbots: ",[65,1307,1308],{"href":1308,"rel":1309},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fchatbots\u002F",[69],[26,1311,1312,1313],{},"Gartner survey on AI in customer service (July 2024), as reported by Insurance-Canada.ca: ",[65,1314,1315],{"href":1315,"rel":1316},"https:\u002F\u002Finsurance-canada.ca\u002F2024\u002F07\u002F15\u002Fgartner-survey-ai-for-customer-service\u002F",[69],[26,1318,1319,1320],{},"Google People + AI Guidebook, Errors and Graceful Failure: ",[65,1321,1322],{"href":1322,"rel":1323},"https:\u002F\u002Fpair.withgoogle.com\u002Fchapter\u002Ferrors-failing\u002F",[69],[26,1325,1326,1327],{},"Microsoft HAX Toolkit, Guidelines for Human-AI Interaction: ",[65,1328,1329],{"href":1329,"rel":1330},"https:\u002F\u002Fwww.microsoft.com\u002Fen-us\u002Fhaxtoolkit\u002Fai-guidelines\u002F",[69],{"title":269,"searchDepth":270,"depth":270,"links":1332},[1333,1334,1335,1336,1337,1338,1339,1340,1341],{"id":848,"depth":270,"text":849},{"id":858,"depth":270,"text":859},{"id":1127,"depth":270,"text":1128},{"id":1157,"depth":270,"text":1158},{"id":1194,"depth":270,"text":1195},{"id":1233,"depth":270,"text":1234},{"id":170,"depth":270,"text":171},{"id":201,"depth":270,"text":202},{"id":234,"depth":270,"text":235},"\u002Fcovers\u002Fai-chatbot.webp",{},4,"\u002Fcase-studies\u002Fai-chatbot",{"title":1092,"description":1097},"case-studies\u002Fai-chatbot","Designing a support chatbot: what it answers, how it admits what it doesn't know, and when it hands over to a person.","7PqpjLFrzQ328q6mob6H6jMl5LyI2KyV8CuweLPUJbI",{"id":1351,"title":1352,"body":1353,"cover":1615,"description":1357,"draft":287,"extension":288,"meta":1616,"navigation":287,"order":1617,"path":1618,"seo":1619,"seoDescription":269,"seoTitle":269,"shelf":293,"stem":1620,"summary":1621,"__hash__":1622},"caseStudies\u002Fcase-studies\u002Fdesign-system.md","Design System",{"type":8,"value":1354,"toc":1604},[1355,1358,1361,1363,1366,1369,1372,1374,1377,1380,1394,1397,1401,1404,1449,1463,1468,1471,1475,1478,1481,1485,1488,1505,1508,1511,1515,1518,1520,1540,1542,1562,1565,1567],[11,1356,1357],{},"Most design system case studies come from product companies: one brand, one product, a dedicated team. My situation is different. I work at an agency, and in any given quarter we might be designing for a university, a hotel group, a restaurant chain and a logistics company, each with its own brand and timeline.",[11,1359,1360],{},"This piece covers how I approach a design system in that setting, where the goal isn't one perfect brand system but a shared foundation that every project can start from.",[15,1362,849],{"id":848},[11,1364,1365],{},"Before we had a shared system, every project started from a blank file, or from a copy of the last project with someone else's colours still in it. Designers rebuilt the same buttons, form fields and cards over and over. Developers received files where the same grey had five slightly different values. Handover meetings turned into long conversations about which spacing was \"right.\"",[11,1367,1368],{},"None of this was anyone's fault. It's what happens when a small team moves fast across many clients. But it meant we were spending time on the parts that should be solved once, instead of on the parts that make each project different.",[11,1370,1371],{},"Nielsen Norman Group describes this payoff well: with a design system, designers spend less time on basic visuals and more on complex problems like workflows, and shared terminology cuts miscommunication across teams. Figma's data science team ran a controlled study where designers with access to a design system finished a task 34% faster than without one. Figma notes that the system in the study was up to date and directly relevant, so they treat 34% as an upper bound. Still, it matched what I was seeing.",[15,1373,859],{"id":858},[11,1375,1376],{},"NN\u002Fg also gives the honest warning: building and maintaining a system takes time and a dedicated team, and the payoff comes later. A custom system costs more as you customise it. For an agency, that raises a real question. How do you build one system when every client looks different?",[11,1378,1379],{},"My answer was to separate what changes between clients from what doesn't.",[23,1381,1382,1388],{},[26,1383,1384,1387],{},[29,1385,1386],{},"What changes:"," colour, typography, corner radius, imagery, tone of voice.",[26,1389,1390,1393],{},[29,1391,1392],{},"What stays the same:"," how a form field behaves, its states, its spacing logic, accessibility rules, how a modal or a navigation drawer works.",[11,1395,1396],{},"If the second list is solid, the first list is just a theme.",[15,1398,1400],{"id":1399},"tokens-first","Tokens first",[11,1402,1403],{},"The system is built on design tokens, named values for colour, type, spacing, radius and elevation, set up in layers.",[23,1405,1406,1424,1443],{},[26,1407,1408,1411,1412,1416,1417,1416,1420,1423],{},[29,1409,1410],{},"Primitives."," The raw palette and scales: ",[1413,1414,1415],"code",{},"blue-500",", ",[1413,1418,1419],{},"space-4",[1413,1421,1422],{},"radius-md",". These change completely per client.",[26,1425,1426,1429,1430,1416,1433,1416,1436,1416,1439,1442],{},[29,1427,1428],{},"Semantic tokens."," Named by role, not appearance: ",[1413,1431,1432],{},"color-background",[1413,1434,1435],{},"color-text-muted",[1413,1437,1438],{},"color-action-primary",[1413,1440,1441],{},"color-border-subtle",". Components only use these.",[26,1444,1445,1448],{},[29,1446,1447],{},"Component tokens,"," used sparingly, for the few cases where one component needs its own value.",[11,1450,1451,1452,1416,1455,1458,1459,1462],{},"This mirrors how IBM's Carbon system organises colour. Carbon names tokens by the UI element and role they apply to, uses suffixes like ",[1413,1453,1454],{},"-hover",[1413,1456,1457],{},"-active"," and ",[1413,1460,1461],{},"-disabled"," for states, and says component tokens should never be used outside their own component. I borrowed that discipline directly.",[103,1464,1465],{},[11,1466,1467],{},"A button should never know it's blue. It should only know it's the primary action.",[11,1469,1470],{},"In Figma, I set this up with variables and modes. Primitives live in one collection; semantic tokens point to them. Switching a project to a new client means remapping the semantic layer to a new palette, not touching a single component. Light and dark mode work the same way: a dark theme is another mode on the semantic layer, which is how I approached a website with dark mode for a content services client.",[15,1472,1474],{"id":1473},"speaking-the-same-language-as-developers","Speaking the same language as developers",[11,1476,1477],{},"A token is only useful if developers use the same name. So I align token names with the front-end team before anything goes into Figma, and we keep one naming convention across design files and CSS variables.",[11,1479,1480],{},"The standard for this has caught up. In October 2025, the W3C Design Tokens Community Group released the first stable version of its specification (2025.10). It defines a vendor-neutral format for sharing design decisions between tools, with support for aliases, light and dark modes, brand themes and modern colour spaces. Tools like Style Dictionary, Tokens Studio and Terrazzo serve as reference implementations, and Figma, Penpot, Sketch and others support it or are working on it. For an agency, a shared format means our tokens don't have to be locked to one tool or one client's stack.",[15,1482,1484],{"id":1483},"components-and-documentation","Components and documentation",[11,1486,1487],{},"On top of tokens sit the components. I kept the first version deliberately small:",[23,1489,1490,1493,1496,1499,1502],{},[26,1491,1492],{},"Buttons, links and icon buttons",[26,1494,1495],{},"Form fields, selects, checkboxes, radios and validation states",[26,1497,1498],{},"Cards, lists and tables",[26,1500,1501],{},"Navigation: header, footer, mobile menu, tabs, breadcrumbs",[26,1503,1504],{},"Feedback: alerts, toasts, modals, empty and loading states",[11,1506,1507],{},"Every component has all its states designed (default, hover, focus, active, disabled, error, loading) because missing states are where handover questions come from. Focus states and contrast are checked at the token level, so a new client palette that fails contrast shows up before it reaches a screen.",[11,1509,1510],{},"Documentation is short and practical: when to use a component, when not to, and a do\u002Fdon't pair. NN\u002Fg lists guidelines as a core part of a design system, both to onboard new people and to remind experienced ones. As the person who mentors our junior designers, I've found this is where the system pays off fastest. New team members learn our standards by using them.",[15,1512,1514],{"id":1513},"where-ai-fits","Where AI fits",[11,1516,1517],{},"I also use AI tools in maintaining the system. I've built custom Claude Skills for design system work, which help me draft component documentation, check naming consistency and turn a token set into a starting front-end theme. It doesn't replace design judgement, but it takes care of the repetitive parts of keeping docs and tokens in sync, which is usually the first thing that falls behind on a busy team.",[15,1519,171],{"id":170},[23,1521,1522,1528,1534],{},[26,1523,1524,1527],{},[29,1525,1526],{},"Flexibility vs. consistency."," Some clients need something the system doesn't have. I allow project-level components, but if the same need shows up twice, it gets promoted into the shared system.",[26,1529,1530,1533],{},[29,1531,1532],{},"Speed vs. distinctiveness."," A shared base risks making every project look the same. Tokens handle the surface, but layout, imagery and art direction still have to be done fresh for each brand. The system speeds up the parts that should be the same, not the whole design.",[26,1535,1536,1539],{},[29,1537,1538],{},"Maintenance is real work."," A system that isn't updated drifts from the code within months. It needs an owner and a regular review, not just a launch.",[15,1541,202],{"id":201},[23,1543,1544,1550,1556],{},[26,1545,1546,1549],{},[29,1547,1548],{},"Adopt the DTCG format end to end,"," so tokens go from Figma to code through a pipeline instead of by hand.",[26,1551,1552,1555],{},[29,1553,1554],{},"Add usage tracking,"," so we can see which components get used, detached or overridden, and fix the ones that keep getting worked around.",[26,1557,1558,1561],{},[29,1559,1560],{},"Grow the pattern library"," beyond components: page templates for common project types like booking flows, listing pages and dashboards.",[11,1563,1564],{},"For an agency, a design system isn't about making every project look alike. It's about solving the same problems once, so the team has more time for what makes each client different.",[15,1566,235],{"id":234},[23,1568,1569,1576,1583,1590,1597],{},[26,1570,1571,1572],{},"Nielsen Norman Group, Design Systems 101: ",[65,1573,1574],{"href":1574,"rel":1575},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fdesign-systems-101\u002F",[69],[26,1577,1578,1579],{},"Figma, Measuring the value of design systems: ",[65,1580,1581],{"href":1581,"rel":1582},"https:\u002F\u002Fwww.figma.com\u002Fblog\u002Fmeasuring-the-value-of-design-systems\u002F",[69],[26,1584,1585,1586],{},"IBM Carbon Design System, Color tokens: ",[65,1587,1588],{"href":1588,"rel":1589},"https:\u002F\u002Fcarbondesignsystem.com\u002Felements\u002Fcolor\u002Ftokens\u002F",[69],[26,1591,1592,1593],{},"W3C Design Tokens Community Group, Design Tokens specification reaches first stable version: ",[65,1594,1595],{"href":1595,"rel":1596},"https:\u002F\u002Fwww.w3.org\u002Fcommunity\u002Fdesign-tokens\u002F2025\u002F10\u002F28\u002Fdesign-tokens-specification-reaches-first-stable-version\u002F",[69],[26,1598,1599,1600],{},"Design Tokens Community Group: ",[65,1601,1602],{"href":1602,"rel":1603},"https:\u002F\u002Fwww.designtokens.org\u002F",[69],{"title":269,"searchDepth":270,"depth":270,"links":1605},[1606,1607,1608,1609,1610,1611,1612,1613,1614],{"id":848,"depth":270,"text":849},{"id":858,"depth":270,"text":859},{"id":1399,"depth":270,"text":1400},{"id":1473,"depth":270,"text":1474},{"id":1483,"depth":270,"text":1484},{"id":1513,"depth":270,"text":1514},{"id":170,"depth":270,"text":171},{"id":201,"depth":270,"text":202},{"id":234,"depth":270,"text":235},"\u002Fcovers\u002Fdesign-system.webp",{},5,"\u002Fcase-studies\u002Fdesign-system",{"title":1352,"description":1357},"case-studies\u002Fdesign-system","How I built and maintain one system of tokens and components that designers and developers share, re-themed for each client project.","zcewCbQAgYFExGq89DsX1WnupyikegcxN4wXJYzNAo4",{"id":1624,"title":1625,"body":1626,"cover":1909,"description":1630,"draft":287,"extension":288,"meta":1910,"navigation":287,"order":1911,"path":1912,"seo":1913,"seoDescription":269,"seoTitle":269,"shelf":293,"stem":1914,"summary":1915,"__hash__":1916},"caseStudies\u002Fcase-studies\u002Facross-industries.md","Across Industries",{"type":8,"value":1627,"toc":1889},[1628,1631,1634,1638,1641,1645,1649,1658,1662,1669,1673,1680,1684,1690,1694,1697,1702,1706,1710,1713,1745,1749,1752,1756,1763,1767,1774,1778,1781,1807,1809,1829,1831,1851,1854,1856],[11,1629,1630],{},"Agency work means switching worlds every few weeks. In four years I've designed for universities and exam review centers, a bank and a pawnshop and money changer, a restaurant chain, an ice cream brand, a café and bakery, hotel groups, a fashion retailer, malls, an Australia-based law firm, an Australian job board, a pharmaceutical company, a child sponsorship nonprofit, a trucking company's user and driver apps, a news agency, and an IT and BPO industry association. The clients were in the Philippines, Australia, Germany and the US.",[11,1632,1633],{},"People sometimes ask whether that range spreads a designer too thin. In my experience it does the opposite. You quickly learn which parts of the job are the same everywhere and which parts you have to relearn each time.",[15,1635,1637],{"id":1636},"context-one-process-many-rooms","Context: one process, many rooms",[11,1639,1640],{},"My process doesn't change much between projects. I gather requirements with the client and our system analysts, map the users and their tasks, wireframe, design, hand over to developers, then QA the build against the design. What changes is everything inside those steps: the users, the regulations, the vocabulary and what \"trust\" looks like.",[15,1642,1644],{"id":1643},"what-carries-over","What carries over",[116,1646,1648],{"id":1647},"people-expect-familiar-patterns","People expect familiar patterns",[11,1650,1651,1652,1657],{},"Jakob's Law says users \"prefer your site to work the same way as all the other sites they already know\" (",[65,1653,1656],{"href":1654,"rel":1655},"https:\u002F\u002Flawsofux.com\u002Fjakobs-law\u002F",[69],"Laws of UX","). This is the most portable rule I know. A hotel booking flow, a job application and a pawn loan inquiry are different businesses, but they all rely on the same patterns: forms, steps, progress, confirmation. When I reuse well-understood patterns, users spend their attention on the decision, not the interface.",[116,1659,1661],{"id":1660},"clear-prices-and-totals-everywhere","Clear prices and totals, everywhere",[11,1663,1664,1665,1668],{},"Whether it's a cake order, a hotel night or a money changer's rate, people want to know the real cost before they commit. Baymard's research finds that 40% of shoppers who abandon a cart (excluding those just browsing) cite extra costs, and 12% say they couldn't see the total up front (",[65,1666,87],{"href":91,"rel":1667},[69],"). That applies far beyond retail.",[116,1670,1672],{"id":1671},"mobile-is-the-default-audience","Mobile is the default audience",[11,1674,1675,1676,1679],{},"For Philippine clients especially, I assume the phone comes first. DataReportal counted 97.5 million internet users in the country in January 2025, and 90.8 million social media user identities (",[65,1677,327],{"href":325,"rel":1678},[69],"). Restaurant menus, mall maps and exam reviewer apps are all used on the go.",[116,1681,1683],{"id":1682},"information-architecture-before-visuals","Information architecture before visuals",[11,1685,1686,1687,71],{},"Every large site I've worked on, from a university to a news agency, lived or died on its structure. Grouping, labels and navigation come before color and type. Nielsen Norman Group's guidance on mega menus applies just as well to a mall directory or a pharmaceutical product range: group things the way users think, show each option once, and use plain labels (",[65,1688,570],{"href":620,"rel":1689},[69],[116,1691,1693],{"id":1692},"a-design-system-pays-off-on-every-project","A design system pays off on every project",[11,1695,1696],{},"I build and maintain design systems and team templates at the agency. A solid base of components, spacing and type scales means each new industry starts well ahead of zero, and the time saved goes into the parts that are actually unique.",[103,1698,1699],{},[11,1700,1701],{},"The patterns travel. The context never does.",[15,1703,1705],{"id":1704},"what-doesnt-carry-over","What doesn't carry over",[116,1707,1709],{"id":1708},"tone-and-trust-signals","Tone and trust signals",[11,1711,1712],{},"Trust looks different in every industry.",[23,1714,1715,1721,1727,1733,1739],{},[26,1716,1717,1720],{},[29,1718,1719],{},"Banking and pawn services:"," calm layouts, visible rates, clear requirements and no playful copy near money.",[26,1722,1723,1726],{},[29,1724,1725],{},"Legal (defense and military clients):"," discretion, clear practice areas and an easy, private way to make contact.",[26,1728,1729,1732],{},[29,1730,1731],{},"Healthcare and pharmaceuticals:"," careful wording, clear separation between information for patients and for professionals, and content that must pass review.",[26,1734,1735,1738],{},[29,1736,1737],{},"Nonprofit child sponsorship:"," honest stories and a clear account of where the money goes.",[26,1740,1741,1744],{},[29,1742,1743],{},"Food and beverage:"," appetite and personality. A wine and beer site I worked on included a personality quiz, which would be absurd on a bank site and was perfect there.",[116,1746,1748],{"id":1747},"users-with-very-different-days","Users with very different days",[11,1750,1751],{},"The trucking project was a good reminder. The customer app and the driver app served the same business but completely different people. Customers want to book and track. Drivers want big buttons, few steps and screens they can read in a moving vehicle at a glance. One design language, two sets of priorities.",[116,1753,1755],{"id":1754},"payment-habits","Payment habits",[11,1757,1758,1759,1762],{},"Payment expectations vary a lot by market. In the Philippines, Xendit's 2026 report found that cash on delivery still makes up 23% of e-commerce transaction value, and 41% of shoppers who abandoned a purchase cited a missing preferred payment method (",[65,1760,349],{"href":347,"rel":1761},[69],"). An Australian or German client's checkout looks very different.",[116,1764,1766],{"id":1765},"regulation-and-review","Regulation and review",[11,1768,1769,1770,1773],{},"Some industries have rules that shape the design before I draw anything. Finance and healthcare content needs approval steps. Philippine online sellers have to show prices and business details under the Internet Transactions Act of 2023 (",[65,1771,100],{"href":98,"rel":1772},[69],"). I've learned to ask about compliance in the first meeting, not the last.",[15,1775,1777],{"id":1776},"how-i-get-up-to-speed","How I get up to speed",[11,1779,1780],{},"Each new industry means a fast learning curve. My routine:",[23,1782,1783,1789,1795,1801],{},[26,1784,1785,1788],{},[29,1786,1787],{},"Ask the client to walk me through a real day."," Not the brand deck, the actual workflow.",[26,1790,1791,1794],{},[29,1792,1793],{},"Read the competitors and the regulators."," What users already know comes from other sites in the space, and what's allowed comes from the rules.",[26,1796,1797,1800],{},[29,1798,1799],{},"Learn the vocabulary."," Using the client's terms in requirements, and the users' terms on screen. Those are often not the same.",[26,1802,1803,1806],{},[29,1804,1805],{},"Use AI as a research assistant."," I've built custom Claude Skills for UX research, user journey documents and wireframing. They help me draft research summaries and first-pass structures quickly, which I then check and shape myself. It speeds up the start without replacing the judgment.",[15,1808,171],{"id":170},[23,1810,1811,1817,1823],{},[26,1812,1813,1816],{},[29,1814,1815],{},"Breadth versus depth."," I'll never know banking as well as a designer who's spent ten years in a bank. I make up for it by asking more questions and leaning on the client's experts.",[26,1818,1819,1822],{},[29,1820,1821],{},"Reuse versus fit."," A shared design system saves time, but it can make every site look alike. I keep the structure shared and let type, color, imagery and motion carry each brand.",[26,1824,1825,1828],{},[29,1826,1827],{},"Speed versus discovery."," Agency timelines are tight. I protect a short discovery phase even on small projects, because skipping it always costs more later.",[15,1830,202],{"id":201},[23,1832,1833,1839,1845],{},[26,1834,1835,1838],{},[29,1836,1837],{},"Document industry playbooks."," A short internal guide per industry: key users, trust signals, regulations and common pitfalls.",[26,1840,1841,1844],{},[29,1842,1843],{},"Build a pattern library by task."," Booking, applying, paying and tracking show up everywhere. Well-tested versions of each would make every project faster.",[26,1846,1847,1850],{},[29,1848,1849],{},"Test more across markets."," I'd like to run quick usability sessions with users in Australia and Germany, not just review their competitors.",[11,1852,1853],{},"Working across industries has made me less attached to any single look and more attached to the basics: know the user, respect their time, and be honest about what things cost.",[15,1855,235],{"id":234},[23,1857,1858,1864,1869,1874,1879,1884],{},[26,1859,1860,1861],{},"Laws of UX, \"Jakob's Law\": ",[65,1862,1654],{"href":1654,"rel":1863},[69],[26,1865,258,1866],{},[65,1867,91],{"href":91,"rel":1868},[69],[26,1870,515,1871],{},[65,1872,325],{"href":325,"rel":1873},[69],[26,1875,791,1876],{},[65,1877,620],{"href":620,"rel":1878},[69],[26,1880,521,1881],{},[65,1882,347],{"href":347,"rel":1883},[69],[26,1885,264,1886],{},[65,1887,98],{"href":98,"rel":1888},[69],{"title":269,"searchDepth":270,"depth":270,"links":1890},[1891,1892,1899,1905,1906,1907,1908],{"id":1636,"depth":270,"text":1637},{"id":1643,"depth":270,"text":1644,"children":1893},[1894,1895,1896,1897,1898],{"id":1647,"depth":277,"text":1648},{"id":1660,"depth":277,"text":1661},{"id":1671,"depth":277,"text":1672},{"id":1682,"depth":277,"text":1683},{"id":1692,"depth":277,"text":1693},{"id":1704,"depth":270,"text":1705,"children":1900},[1901,1902,1903,1904],{"id":1708,"depth":277,"text":1709},{"id":1747,"depth":277,"text":1748},{"id":1754,"depth":277,"text":1755},{"id":1765,"depth":277,"text":1766},{"id":1776,"depth":270,"text":1777},{"id":170,"depth":270,"text":171},{"id":201,"depth":270,"text":202},{"id":234,"depth":270,"text":235},"\u002Fcovers\u002Facross-industries.webp",{},6,"\u002Fcase-studies\u002Facross-industries",{"title":1625,"description":1630},"case-studies\u002Facross-industries","Four years of agency work across education, banking, food, hospitality, retail, legal, healthcare and more: what carries over from one industry to the next, and what doesn't.","UBYfzJtICvnIt609W9j6XOEgWl-GZktjcy1wZK91jGQ",{"id":1918,"title":1919,"body":1920,"cover":2192,"description":1924,"draft":287,"extension":288,"meta":2193,"navigation":287,"order":2194,"path":2195,"seo":2196,"seoDescription":269,"seoTitle":269,"shelf":2197,"stem":2198,"summary":2199,"__hash__":2200},"caseStudies\u002Fcase-studies\u002Ffigma-auto-layout.md","Figma Auto Layout",{"type":8,"value":1921,"toc":2183},[1922,1925,1928,1932,1935,1938,1941,1945,1948,1968,1975,1978,2036,2043,2047,2050,2064,2067,2072,2076,2086,2092,2098,2104,2110,2116,2120,2123,2145,2148,2152,2155,2158,2160],[11,1923,1924],{},"If you've ever changed one word in a button label and then spent ten minutes nudging every element around it, you already know why auto layout matters. It's the feature I lean on most in Figma, and it's the first thing I check when I open a file from someone else on the team.",[11,1926,1927],{},"Figma describes auto layout as the way to arrange objects inside a frame so their positions update as you add, remove or reorder them. That's accurate, but the way I think about it is simpler. Auto layout turns a drawing into a set of rules. Once the rules are right, the design keeps itself tidy.",[15,1929,1931],{"id":1930},"why-it-matters-on-agency-work","Why it matters on agency work",[11,1933,1934],{},"Most of my projects are websites and apps for clients in very different industries: hotels, universities, banks, restaurant chains, a trucking company with separate user and driver apps. The content changes constantly. A hotel adds a new room type. A university renames a program and the title doubles in length. A bank's legal team rewrites a disclaimer the day before a review.",[11,1936,1937],{},"Without auto layout, every one of those changes is manual cleanup. With it, I edit the text and the card, the section and the page adjust. That's time I get back for actual design decisions.",[11,1939,1940],{},"There's a handoff reason too. Auto layout maps closely to how developers build layouts in CSS. Gap, padding, direction and alignment are concepts our front-end team already uses. When my frames behave like flexbox, the build matches the design more closely and there are fewer \"why is this 13px here?\" conversations.",[15,1942,1944],{"id":1943},"the-properties-i-actually-use","The properties I actually use",[11,1946,1947],{},"As of 2026, an auto layout frame in Figma has three flows:",[23,1949,1950,1956,1962],{},[26,1951,1952,1955],{},[29,1953,1954],{},"Vertical",": stacks children on the y-axis. Lists, feeds, form fields, page sections.",[26,1957,1958,1961],{},[29,1959,1960],{},"Horizontal",": places children on the x-axis. Button rows, nav bars, icon plus label pairs.",[26,1963,1964,1967],{},[29,1965,1966],{},"Grid",": columns and rows, with children that can span multiple cells. Galleries and bento-style layouts.",[11,1969,1970,1971,1974],{},"Horizontal and vertical flows can also ",[29,1972,1973],{},"wrap",", which moves children to a new row or column when they run out of space. That's what I use for tag and chip groups.",[11,1976,1977],{},"Inside each flow, these are the controls that do most of the work:",[1979,1980,1981,2001,2007,2024,2030],"ol",{},[26,1982,1983,1986,1987,1990,1991,1416,1994,1458,1997,2000],{},[29,1984,1985],{},"Gap",": either a fixed number or ",[29,1988,1989],{},"Auto",". Auto has three options, Between, Around and Evenly, which match CSS ",[1413,1992,1993],{},"space-between",[1413,1995,1996],{},"space-around",[1413,1998,1999],{},"space-evenly",".",[26,2002,2003,2006],{},[29,2004,2005],{},"Padding",": uniform, per axis or per side.",[26,2008,2009,2012,2013,1416,2016,2019,2020,2023],{},[29,2010,2011],{},"Resizing",": each child can be ",[29,2014,2015],{},"Hug contents",[29,2017,2018],{},"Fill container"," or ",[29,2021,2022],{},"Fixed",". Hug shrinks or grows around the content. Fill takes up whatever space the parent gives it.",[26,2025,2026,2029],{},[29,2027,2028],{},"Min and max width\u002Fheight",": the underrated one. A card can fill its container but never stretch past a readable width, and a button can hug its label but never get narrower than a tap target.",[26,2031,2032,2035],{},[29,2033,2034],{},"Ignore auto layout",": what used to be called absolute position. The layer stays in the frame but leaves the flow, so I can pin a badge to a corner or float a close icon.",[11,2037,2038,2039,2042],{},"Smaller settings worth knowing: text baseline alignment (press ",[1413,2040,2041],{},"B"," in the alignment box), whether strokes are included in layout, and canvas stacking order when children overlap.",[15,2044,2046],{"id":2045},"how-i-build-a-component-with-it","How I build a component with it",[11,2048,2049],{},"I build from the inside out. Take a simple product card for a retail site:",[1979,2051,2052,2055,2058,2061],{},[26,2053,2054],{},"Text first. Title and price go in a vertical auto layout with a small gap. The title is set to fill width so long names wrap instead of pushing the card wider.",[26,2056,2057],{},"The text block and an add-to-cart button go into another vertical frame with padding. That's the card body.",[26,2059,2060],{},"The image and the body go into the outer card frame. Image set to fill width, fixed aspect.",[26,2062,2063],{},"The card itself is set to fill container, with a min and max width.",[11,2065,2066],{},"Then I stress test it. I paste in the longest product name I can find, delete the price, swap the image for a tall one and drag the frame narrow and wide. If anything breaks, the rule is wrong, not the content.",[103,2068,2069],{},[11,2070,2071],{},"If a layout only works with the placeholder text, it doesn't work.",[15,2073,2075],{"id":2074},"common-mistakes-i-see-and-made","Common mistakes I see (and made)",[11,2077,2078,2081,2082,2085],{},[29,2079,2080],{},"Wrapping everything in one giant frame."," People select a whole screen and hit ",[1413,2083,2084],{},"Shift+A",". Figma will do it, but you get one flat stack that's hard to control. Nest small frames inside bigger ones, each with one job.",[11,2087,2088,2091],{},[29,2089,2090],{},"Mixing up hug and fill."," If a parent hugs and its child fills, neither knows who sets the size. Decide which layer owns the width and work out from there.",[11,2093,2094,2097],{},[29,2095,2096],{},"Using spacer rectangles."," An invisible 24px rectangle between two elements is a sign the gap or padding isn't set up. It also confuses developers reading the layer tree.",[11,2099,2100,2103],{},[29,2101,2102],{},"Hiding layers to \"keep\" space."," In auto layout, hidden layers are removed from the flow. If you really need the space held, setting opacity to 0% keeps it, but most of the time the better fix is to rethink the gap.",[11,2105,2106,2109],{},[29,2107,2108],{},"Forgetting about strokes."," If spacing looks slightly off in nested frames, check whether each frame includes or excludes strokes from layout. The setting is per frame.",[11,2111,2112,2115],{},[29,2113,2114],{},"Detaching instances to reorder things."," You can't reorder children inside an instance. If you keep needing to, the main component needs a different structure, or a slot.",[15,2117,2119],{"id":2118},"how-it-plays-out-with-the-team","How it plays out with the team",[11,2121,2122],{},"As Assistant Creative Director, part of my job is reviewing files from junior designers before they go to a client or to dev. My auto layout checklist is short:",[23,2124,2125,2128,2131,2134],{},[26,2126,2127],{},"Can I resize the frame and nothing overlaps?",[26,2129,2130],{},"Is spacing coming from gap and padding, not from manual positioning?",[26,2132,2133],{},"Do spacing values come from our spacing scale, ideally bound to variables?",[26,2135,2136,2137,2140,2141,2144],{},"Are names on the frames meaningful (",[1413,2138,2139],{},"card\u002Fbody",", not ",[1413,2142,2143],{},"Frame 427",")?",[11,2146,2147],{},"When I mentor someone, I don't explain every property up front. I give them a component that breaks when the content changes and ask them to fix it. Learning auto layout by repairing something sticks much better than reading a list of settings.",[15,2149,2151],{"id":2150},"where-it-connects-to-everything-else","Where it connects to everything else",[11,2153,2154],{},"Auto layout is the base layer for the rest of my Figma craft. Components only work well when they're built on solid auto layout. Variables only pay off when gap and padding are actually bound to spacing tokens. And prototypes feel more real when frames reflow as content changes.",[11,2156,2157],{},"If I could only teach one Figma feature to someone new on the team, it would be this one.",[15,2159,235],{"id":234},[23,2161,2162,2169,2176],{},[26,2163,2164,2165],{},"Figma Learn, \"Guide to auto layout\": ",[65,2166,2167],{"href":2167,"rel":2168},"https:\u002F\u002Fhelp.figma.com\u002Fhc\u002Farticles\u002F31289464393751",[69],[26,2170,2171,2172],{},"Figma Learn, \"Explore auto layout properties\": ",[65,2173,2174],{"href":2174,"rel":2175},"https:\u002F\u002Fhelp.figma.com\u002Fhc\u002Fen-us\u002Farticles\u002F360040451373",[69],[26,2177,2178,2179],{},"Figma Best Practices, \"Components, styles, and shared libraries\": ",[65,2180,2181],{"href":2181,"rel":2182},"https:\u002F\u002Fwww.figma.com\u002Fbest-practices\u002Fcomponents-styles-and-shared-libraries\u002F",[69],{"title":269,"searchDepth":270,"depth":270,"links":2184},[2185,2186,2187,2188,2189,2190,2191],{"id":1930,"depth":270,"text":1931},{"id":1943,"depth":270,"text":1944},{"id":2045,"depth":270,"text":2046},{"id":2074,"depth":270,"text":2075},{"id":2118,"depth":270,"text":2119},{"id":2150,"depth":270,"text":2151},{"id":234,"depth":270,"text":235},"\u002Fcovers\u002Ffigma-auto-layout.webp",{},7,"\u002Fcase-studies\u002Ffigma-auto-layout",{"title":1919,"description":1924},"craft","case-studies\u002Ffigma-auto-layout","How I set up auto layout so frames resize themselves, and why it's the first thing I check when a file starts falling apart.","9dEeOZQdau0SaQa4K7L_iCAdjTJeW5CytNO9nbXmDy0",{"id":2202,"title":2203,"body":2204,"cover":2479,"description":2208,"draft":287,"extension":288,"meta":2480,"navigation":287,"order":2481,"path":2482,"seo":2483,"seoDescription":269,"seoTitle":269,"shelf":2197,"stem":2484,"summary":2485,"__hash__":2486},"caseStudies\u002Fcase-studies\u002Ffigma-components.md","Figma Components",{"type":8,"value":2205,"toc":2469},[2206,2209,2212,2216,2219,2222,2226,2229,2249,2252,2255,2259,2262,2294,2297,2307,2312,2316,2319,2322,2347,2350,2354,2357,2401,2405,2411,2417,2423,2429,2433,2436,2439,2441],[11,2207,2208],{},"Components are where a design file stops being a set of pictures and starts being a system. Figma defines them as elements you can reuse across your designs. Edit the main component and every instance updates.",[11,2210,2211],{},"That part is easy. The hard part is building components that the rest of the team can actually use without detaching them, and that still make sense six months later when the client asks for a new feature. This is how I approach it.",[15,2213,2215],{"id":2214},"why-i-care-so-much-about-this","Why I care so much about this",[11,2217,2218],{},"At an agency, I'm rarely designing one product for years. I'm designing a hotel booking site, then a university portal, then a mobile app for a review center, sometimes in the same quarter. Each one needs its own component set, and each one gets handed to developers and often to other designers on the team.",[11,2220,2221],{},"A good component library means a junior designer can build a new page that looks right on the first try. A bad one means every page is slightly different, and QA turns into a hunt for inconsistent buttons.",[15,2223,2225],{"id":2224},"start-small-then-nest","Start small, then nest",[11,2227,2228],{},"Figma's own best practices recommend building small \"atom\" components and nesting them inside larger ones, so a shared change only happens once. I follow that closely:",[1979,2230,2231,2237,2243],{},[26,2232,2233,2236],{},[29,2234,2235],{},"Base pieces first",": icon, avatar, badge, input field, button.",[26,2238,2239,2242],{},[29,2240,2241],{},"Composed pieces next",": a search bar is an input plus a button. A list item is an avatar, text and a badge.",[26,2244,2245,2248],{},[29,2246,2247],{},"Patterns last",": cards, navigation, modals, table rows.",[11,2250,2251],{},"Every component is built on auto layout, so it resizes with its content. If a component only looks right at one width, it's not done.",[11,2253,2254],{},"I also turn repeated elements into components early, even at wireframe stage. If a card shows up on three screens, it becomes a component before I make the fourth.",[15,2256,2258],{"id":2257},"choosing-the-right-property","Choosing the right property",[11,2260,2261],{},"As of 2026, Figma has five types of component property, and picking the right one is most of the skill:",[23,2263,2264,2270,2276,2282,2288],{},[26,2265,2266,2269],{},[29,2267,2268],{},"Variant",": for things that change the form of the component. State (default, hover, pressed, disabled), size, type.",[26,2271,2272,2275],{},[29,2273,2274],{},"Boolean",": for showing or hiding a layer. Booleans only control visibility.",[26,2277,2278,2281],{},[29,2279,2280],{},"Instance swap",": for nested instances people can swap, like the icon inside a button.",[26,2283,2284,2287],{},[29,2285,2286],{},"Text",": for text content people can edit straight from the properties panel.",[26,2289,2290,2293],{},[29,2291,2292],{},"Slot",": for flexible areas where people can add and arrange their own content inside an instance without detaching it.",[11,2295,2296],{},"The rule I give the team is the same one in Figma's docs: use a boolean for an optional element instead of making a variant for every combination. A button with or without an icon is one boolean, not double the variants.",[11,2298,2299,2300,1458,2303,2306],{},"Figma also recommends separate variant properties for separate changes, like ",[1413,2301,2302],{},"Type",[1413,2304,2305],{},"Size",", instead of one property that changes several things at once. That keeps the variant grid readable and makes it obvious which combinations exist.",[103,2308,2309],{},[11,2310,2311],{},"Every variant you add is a variant someone has to maintain. Add properties for real differences, not for every screen you've drawn.",[15,2313,2315],{"id":2314},"slots-changed-how-i-build-containers","Slots changed how I build containers",[11,2317,2318],{},"Before slots, flexible components were a workaround. You'd make a card with a placeholder instance and hope people swapped it correctly, or they'd just detach it.",[11,2320,2321],{},"Slots let me define an open area inside a component, such as a modal body or the content area of a card, where designers can add and arrange whatever they need. A few details from Figma's docs that matter in practice:",[23,2323,2324,2327,2334,2341,2344],{},[26,2325,2326],{},"You can convert an existing frame in a main component into a slot.",[26,2328,2329,2330,2333],{},"You can set a ",[29,2331,2332],{},"minimum and maximum layer count",". These are guidance, not hard limits. Going over shows a warning, but the designer can keep working.",[26,2335,2336,2337,2340],{},"You can set ",[29,2338,2339],{},"preferred instances"," so the slot suggests the right components first, and optionally restrict it to only those.",[26,2342,2343],{},"You can't change a slot's position, auto layout flow or constraints from an instance. That's set in the main component.",[26,2345,2346],{},"Removing a slot property from the main component resets modified instances, which can delete content people added. I treat that as a breaking change.",[11,2348,2349],{},"For repeating content, like a list of form fields or menu items, a slot is now usually cleaner than a variant for \"3 items\", \"4 items\" and \"5 items\".",[15,2351,2353],{"id":2352},"make-the-library-easy-to-use","Make the library easy to use",[11,2355,2356],{},"A component is only as good as the person using it can understand it. Things I do every time:",[23,2358,2359,2365,2371,2377,2383,2395],{},[26,2360,2361,2364],{},[29,2362,2363],{},"Expose nested instances",", so people can change a nested button's properties from the top-level instance without deep-selecting.",[26,2366,2367,2370],{},[29,2368,2369],{},"Set preferred instances"," on swap properties, so the icon picker shows the icon set, not the whole library.",[26,2372,2373,2376],{},[29,2374,2375],{},"Write descriptions."," They show up as tooltips in the assets panel and help people pick between similar components.",[26,2378,2379,2382],{},[29,2380,2381],{},"Name text layers consistently"," across related components, so text overrides carry over when someone swaps instances.",[26,2384,2385,2388,2389,2019,2392,2394],{},[29,2386,2387],{},"Hide internal pieces."," Prefixing a component with ",[1413,2390,2391],{},"_",[1413,2393,2000],{}," keeps it out of the published library.",[26,2396,2397,2400],{},[29,2398,2399],{},"Organize by page and frame."," Pages become top-level groups, frames become subgroups.",[15,2402,2404],{"id":2403},"common-mistakes","Common mistakes",[11,2406,2407,2410],{},[29,2408,2409],{},"The variant explosion."," A button with five types, three sizes, four states and an icon toggle built as pure variants is 120 frames. Most of that should be booleans and instance swaps.",[11,2412,2413,2416],{},[29,2414,2415],{},"Detaching as a habit."," When designers detach often, it's feedback about the component, not the designer. I ask what they needed and fix the main component.",[11,2418,2419,2422],{},[29,2420,2421],{},"Building for the mockup, not the product."," A component that only handles the copy on today's screen will break the moment real content comes in. Test with long text, missing images and empty states.",[11,2424,2425,2428],{},[29,2426,2427],{},"No owner."," On every project, one person owns the library. Changes go through them. Otherwise two designers fix the same thing two different ways.",[15,2430,2432],{"id":2431},"how-it-plays-out-on-projects","How it plays out on projects",[11,2434,2435],{},"On a typical agency engagement, the component library starts small in wireframes and gets richer through UI design. By handoff, developers should be able to look at a screen, see which components and properties are used, and map them to their own components.",[11,2437,2438],{},"That's also where I see the payoff of all the setup. When a client asks for a new page late in a project, the team can assemble it from existing pieces instead of designing from scratch, and it already matches everything else.",[15,2440,235],{"id":234},[23,2442,2443,2450,2457,2464],{},[26,2444,2445,2446],{},"Figma Learn, \"Explore component properties\": ",[65,2447,2448],{"href":2448,"rel":2449},"https:\u002F\u002Fhelp.figma.com\u002Fhc\u002Fen-us\u002Farticles\u002F5579474826519",[69],[26,2451,2452,2453],{},"Figma Learn, \"Create and use variants\": ",[65,2454,2455],{"href":2455,"rel":2456},"https:\u002F\u002Fhelp.figma.com\u002Fhc\u002Fen-us\u002Farticles\u002F39636737843735",[69],[26,2458,2459,2460],{},"Figma Learn, \"Use slots to build flexible components in Figma\": ",[65,2461,2462],{"href":2462,"rel":2463},"https:\u002F\u002Fhelp.figma.com\u002Fhc\u002Fen-us\u002Farticles\u002F38231200344599",[69],[26,2465,2178,2466],{},[65,2467,2181],{"href":2181,"rel":2468},[69],{"title":269,"searchDepth":270,"depth":270,"links":2470},[2471,2472,2473,2474,2475,2476,2477,2478],{"id":2214,"depth":270,"text":2215},{"id":2224,"depth":270,"text":2225},{"id":2257,"depth":270,"text":2258},{"id":2314,"depth":270,"text":2315},{"id":2352,"depth":270,"text":2353},{"id":2403,"depth":270,"text":2404},{"id":2431,"depth":270,"text":2432},{"id":234,"depth":270,"text":235},"\u002Fcovers\u002Ffigma-components.webp",{},8,"\u002Fcase-studies\u002Ffigma-components",{"title":2203,"description":2208},"case-studies\u002Ffigma-components","How I build components and variants that stay flexible as a product grows, without turning the library into a maze.","VBtQSk_F9MDB5-3RcHcC4nN7cShMJ_GHyFchvoB660Y",{"id":2488,"title":2489,"body":2490,"cover":2827,"description":2828,"draft":287,"extension":288,"meta":2829,"navigation":287,"order":2830,"path":2831,"seo":2832,"seoDescription":269,"seoTitle":269,"shelf":2197,"stem":2833,"summary":2834,"__hash__":2835},"caseStudies\u002Fcase-studies\u002Ffigma-variables.md","Figma Variables",{"type":8,"value":2491,"toc":2816},[2492,2502,2505,2509,2512,2515,2526,2530,2533,2570,2592,2599,2603,2606,2640,2660,2673,2677,2680,2706,2710,2716,2719,2726,2730,2737,2740,2742,2748,2754,2764,2770,2776,2778,2781,2784,2786],[11,2493,2494,2495,2019,2498,2501],{},"Variables are the closest Figma gets to the way developers think. Instead of picking a hex code every time, you pick a named value like ",[1413,2496,2497],{},"surface\u002Fprimary",[1413,2499,2500],{},"space\u002Fmd",", and that name can resolve to different values depending on context.",[11,2503,2504],{},"Figma's own definition is that variables store reusable values that can change depending on the context of a design. Light and dark mode is the classic example, but it's only the start.",[15,2506,2508],{"id":2507},"why-i-moved-my-files-to-variables","Why I moved my files to variables",[11,2510,2511],{},"I work on a lot of projects in parallel, across industries like education, banking, hospitality and retail. Some of them have needed dark mode, some needed to support more than one brand look, and almost all of them changed colors at least once after the client saw the first designs.",[11,2513,2514],{},"Before variables, a palette change meant updating styles and checking every screen. Theming meant duplicating frames. Now I change a value once and every layer using it updates, and switching a frame between light and dark is a single setting.",[11,2516,2517,2518,2521,2522,2525],{},"There's a handoff benefit too. When a developer inspects a layer and sees ",[1413,2519,2520],{},"color\u002Ftext\u002Fprimary"," instead of ",[1413,2523,2524],{},"#1A1A1A",", they know exactly which token to use.",[15,2527,2529],{"id":2528},"the-building-blocks","The building blocks",[11,2531,2532],{},"As of 2026, Figma has six variable types:",[23,2534,2535,2541,2547,2553,2558,2564],{},[26,2536,2537,2540],{},[29,2538,2539],{},"Color",": solid fills, with optional opacity.",[26,2542,2543,2546],{},[29,2544,2545],{},"Number",": spacing, radius, sizes, font sizes.",[26,2548,2549,2552],{},[29,2550,2551],{},"String",": text content, such as labels in different languages.",[26,2554,2555,2557],{},[29,2556,2274],{},": true\u002Ffalse, useful for showing and hiding layers.",[26,2559,2560,2563],{},[29,2561,2562],{},"Timing",": durations in milliseconds, for prototype animation.",[26,2565,2566,2569],{},[29,2567,2568],{},"Easing",": easing curves or springs.",[11,2571,2572,2573,2576,2577,2580,2581,2584,2585,1458,2588,2591],{},"Variables live in ",[29,2574,2575],{},"collections",", and each collection can have ",[29,2578,2579],{},"modes",". A mode holds one value per variable in that collection. So a ",[1413,2582,2583],{},"Theme"," collection might have ",[1413,2586,2587],{},"Light",[1413,2589,2590],{},"Dark"," modes, and every color in it has a value for each.",[11,2593,2594,2595,2598],{},"Inside collections, ",[29,2596,2597],{},"groups"," keep things organized, and each collection can hold up to 5,000 variables. Modes are available on Education, Professional, Organization and Enterprise plans, and how many modes you get per collection depends on the plan.",[15,2600,2602],{"id":2601},"two-layers-primitives-and-semantics","Two layers: primitives and semantics",[11,2604,2605],{},"This is the structure I use on almost every project, and it's the one thing I'd tell anyone starting out.",[1979,2607,2608,2624],{},[26,2609,2610,2613,2614,1416,2617,1416,2620,2623],{},[29,2611,2612],{},"Primitives",": raw values with no meaning attached. ",[1413,2615,2616],{},"blue\u002F500",[1413,2618,2619],{},"gray\u002F100",[1413,2621,2622],{},"space\u002F16",". One collection, one mode.",[26,2625,2626,2629,2630,1416,2633,1416,2636,2639],{},[29,2627,2628],{},"Semantic tokens",": named by purpose, aliased to primitives. ",[1413,2631,2632],{},"color\u002Fsurface\u002Fdefault",[1413,2634,2635],{},"color\u002Ftext\u002Fmuted",[1413,2637,2638],{},"color\u002Fborder\u002Ffocus",". This collection has the modes.",[11,2641,2642,2645,2646,2648,2649,2652,2653,2656,2657,2659],{},[29,2643,2644],{},"Aliasing"," means a variable points to another variable of the same type. So ",[1413,2647,2632],{}," points to ",[1413,2650,2651],{},"gray\u002F0"," in Light mode and ",[1413,2654,2655],{},"gray\u002F900"," in Dark mode. Designers only ever apply the semantic tokens. Primitives are hidden from publishing so nobody picks ",[1413,2658,2616],{}," directly.",[103,2661,2662],{},[11,2663,2664,2665,2668,2669,2672],{},"Name a variable for what it does, not what it looks like. ",[1413,2666,2667],{},"text\u002Fmuted"," survives a rebrand. ",[1413,2670,2671],{},"gray-dark"," doesn't.",[15,2674,2676],{"id":2675},"settings-that-make-a-library-usable","Settings that make a library usable",[11,2678,2679],{},"A few settings in the edit variable panel that I always fill in:",[23,2681,2682,2688,2694,2700],{},[26,2683,2684,2687],{},[29,2685,2686],{},"Scoping",": limits which properties a variable shows up for. Spacing numbers only appear for gap and padding, not for opacity or font size. Scoping is available for number, color and string variables. It only filters the pickers in Figma's UI. It doesn't actually stop a variable being bound elsewhere.",[26,2689,2690,2693],{},[29,2691,2692],{},"Code syntax",": sets the name developers see in Dev Mode code snippets. You can set one each for Web, Android and iOS.",[26,2695,2696,2699],{},[29,2697,2698],{},"Descriptions",": a line on when to use the token.",[26,2701,2702,2705],{},[29,2703,2704],{},"Hide from publishing",": for primitives and internal helpers.",[15,2707,2709],{"id":2708},"how-modes-behave","How modes behave",[11,2711,2712,2713,2715],{},"This is the part that confuses people at first. By default, layers with variables are set to ",[29,2714,1989],{},", which means they inherit the mode of their parent. If the parent is also Auto, Figma keeps checking up the tree. If nothing sets a mode, it uses the collection's default.",[11,2717,2718],{},"In practice, I set the mode once on the page or top-level frame, and everything inside follows. To show a dark version of a screen, I duplicate the frame and switch its mode. No duplicated components, no second set of styles.",[11,2720,2721,2722,2725],{},"Prototypes can switch modes too, using the ",[29,2723,2724],{},"Set variable mode"," action. That's how I build a working light\u002Fdark toggle in a prototype for client reviews.",[15,2727,2729],{"id":2728},"multi-brand-projects","Multi-brand projects",[11,2731,2732,2733,2736],{},"For clients with several sub-brands or properties, like a hotel group, Figma's ",[29,2734,2735],{},"extended collections"," let you create a parent collection and extend it per brand, overriding only the values that differ. Extensions stay linked, so updates to the parent come through. This is an Enterprise plan feature. You also can't add variables or modes in an extension, or change names, scopes or descriptions there. Those live in the parent.",[11,2738,2739],{},"On plans without it, I keep brands as modes in the semantic collection. It's less elegant, but it works for most agency-sized projects.",[15,2741,2404],{"id":2403},[11,2743,2744,2747],{},[29,2745,2746],{},"Skipping the semantic layer."," Applying primitives directly to designs means dark mode needs a full rework later.",[11,2749,2750,2753],{},[29,2751,2752],{},"Too many tokens too early."," I start with the tokens the design actually uses and add more as patterns repeat. A 400-token system for a five-page site is overhead nobody will maintain.",[11,2755,2756,2759,2760,2763],{},[29,2757,2758],{},"Inconsistent naming."," Pick a structure, like ",[1413,2761,2762],{},"category\u002Frole\u002Fstate",", and stick with it. Developers will use the names in code.",[11,2765,2766,2769],{},[29,2767,2768],{},"Not binding spacing."," Colors get variables, but gaps and padding stay as raw numbers. Then the spacing scale drifts. I bind auto layout gap and padding to number variables from the start.",[11,2771,2772,2775],{},[29,2773,2774],{},"Forgetting to check both modes."," Every new component gets reviewed in light and dark before it's published.",[15,2777,2432],{"id":2431},[11,2779,2780],{},"On a content services website that needed dark mode, the order was simple. Primitives first, then semantic tokens with Light and Dark modes, then components built only with semantic tokens. By the time screens were designed, dark mode was mostly a matter of switching the mode and fixing a handful of edge cases, usually images and illustrations.",[11,2782,2783],{},"That's the real value for me. Variables move the hard decisions to the start of a project, when they're cheap, instead of the end, when they're not.",[15,2785,235],{"id":234},[23,2787,2788,2795,2802,2809],{},[26,2789,2790,2791],{},"Figma Learn, \"Overview of variables, collections, and modes\": ",[65,2792,2793],{"href":2793,"rel":2794},"https:\u002F\u002Fhelp.figma.com\u002Fhc\u002Fen-us\u002Farticles\u002F14506821864087-Overview-of-variables-collections-and-modes",[69],[26,2796,2797,2798],{},"Figma Learn, \"Create and manage variables\": ",[65,2799,2800],{"href":2800,"rel":2801},"https:\u002F\u002Fhelp.figma.com\u002Fhc\u002Farticles\u002F15145852043927",[69],[26,2803,2804,2805],{},"Figma Learn, \"Modes for variables\": ",[65,2806,2807],{"href":2807,"rel":2808},"https:\u002F\u002Fhelp.figma.com\u002Fhc\u002Fen-us\u002Farticles\u002F15343816063383",[69],[26,2810,2811,2812],{},"Figma Learn, \"Extended collections\": ",[65,2813,2814],{"href":2814,"rel":2815},"https:\u002F\u002Fhelp.figma.com\u002Fhc\u002Fen-us\u002Farticles\u002F36346281624471",[69],{"title":269,"searchDepth":270,"depth":270,"links":2817},[2818,2819,2820,2821,2822,2823,2824,2825,2826],{"id":2507,"depth":270,"text":2508},{"id":2528,"depth":270,"text":2529},{"id":2601,"depth":270,"text":2602},{"id":2675,"depth":270,"text":2676},{"id":2708,"depth":270,"text":2709},{"id":2728,"depth":270,"text":2729},{"id":2403,"depth":270,"text":2404},{"id":2431,"depth":270,"text":2432},{"id":234,"depth":270,"text":235},"\u002Fcovers\u002Ffigma-variables.webp","Variables are the closest Figma gets to the way developers think. Instead of picking a hex code every time, you pick a named value like surface\u002Fprimary or space\u002Fmd, and that name can resolve to different values depending on context.",{},9,"\u002Fcase-studies\u002Ffigma-variables",{"title":2489,"description":2828},"case-studies\u002Ffigma-variables","How I use Figma variables to drive color, spacing and light\u002Fdark modes, so one change updates the whole design.","Q58xk1b0w7FCy7XEu21TcqR0lYOpWTOUQpNuluo3bkE",{"id":2837,"title":2838,"body":2839,"cover":3107,"description":2843,"draft":287,"extension":288,"meta":3108,"navigation":287,"order":3109,"path":3110,"seo":3111,"seoDescription":269,"seoTitle":269,"shelf":2197,"stem":3112,"summary":3113,"__hash__":3114},"caseStudies\u002Fcase-studies\u002Fart-direction.md","Art Direction",{"type":8,"value":2840,"toc":3096},[2841,2844,2847,2851,2854,2890,2893,2897,2900,2903,2907,2910,2913,2945,2948,2953,2956,2960,2963,2966,2970,2973,2999,3002,3006,3009,3035,3039,3042,3045,3047,3073,3075],[11,2842,2843],{},"People sometimes think art direction is about taste. Taste helps, but on agency projects the job is mostly about decisions: picking a direction, explaining it well enough that a client agrees, and then making sure five different people produce work that looks like it came from one hand.",[11,2845,2846],{},"In traditional advertising, the art director owns the visual side of a campaign, usually paired with a copywriter who owns the words, with a creative director overseeing both. In my role as Assistant Creative Director at a digital agency, the shape is similar. I set the visual direction for websites and apps, review the team's work against it, and help the creative lead keep projects consistent.",[15,2848,2850],{"id":2849},"what-art-direction-covers-on-a-digital-project","What art direction covers on a digital project",[11,2852,2853],{},"On a website or app, the direction has to answer more than \"what does it look like.\" I try to pin down:",[23,2855,2856,2862,2867,2872,2878,2884],{},[26,2857,2858,2861],{},[29,2859,2860],{},"Mood",": how should it feel? Calm and trustworthy for a bank. Warm and appetizing for a café. Premium and quiet for a hotel.",[26,2863,2864,2866],{},[29,2865,2539],{},": primary palette, accent, neutrals, and how much of each.",[26,2868,2869,2871],{},[29,2870,2302],{},": headline and body faces, scale, and how expressive the headlines get.",[26,2873,2874,2877],{},[29,2875,2876],{},"Imagery",": photography style, crop, lighting, whether people appear, illustration or 3D.",[26,2879,2880,2883],{},[29,2881,2882],{},"Shape and space",": corner radius, density, how much whitespace.",[26,2885,2886,2889],{},[29,2887,2888],{},"Motion",": how things enter, how fast, how playful.",[11,2891,2892],{},"Every one of these ends up as a design decision in Figma. That's why I think of art direction as the step before the design system, not something separate from it.",[15,2894,2896],{"id":2895},"step-one-words-before-pictures","Step one: words before pictures",[11,2898,2899],{},"Before collecting a single image, I agree on a short list of mood words with the client and the team. Nielsen Norman Group suggests picking four or five words that capture the vibe, and using synonyms to sharpen them. I find that's the right size. Fewer is vague, more starts contradicting itself.",[11,2901,2902],{},"The words come from the brief, from stakeholder interviews, and from whatever research we've done. \"Modern\" and \"clean\" don't count. Everyone says those. I push for words that would actually rule something out, like \"unhurried\", \"clinical\" or \"playful\".",[15,2904,2906],{"id":2905},"step-two-mood-boards","Step two: mood boards",[11,2908,2909],{},"Mood boards are how I make the words visible. NN\u002Fg describes them as collages that show the feelings or values a product should evoke, which is exactly why they work with clients. You don't need design training to react to a board.",[11,2911,2912],{},"How I build them:",[1979,2914,2915,2921,2927,2933,2939],{},[26,2916,2917,2920],{},[29,2918,2919],{},"Review what exists."," Brand guidelines, previous campaigns, the current site. I'm not throwing away equity the client already has.",[26,2922,2923,2926],{},[29,2924,2925],{},"Collect widely."," Photography, packaging, interiors, editorial layouts, film stills. Not just other websites.",[26,2928,2929,2932],{},[29,2930,2931],{},"Arrange with hierarchy."," One or two hero images, grouped supporting pieces, room to breathe.",[26,2934,2935,2938],{},[29,2936,2937],{},"Make more than one."," Usually two or three boards, each a clear and different direction.",[26,2940,2941,2944],{},[29,2942,2943],{},"Annotate."," A line or two per board on what it's saying and why.",[11,2946,2947],{},"I usually build these in Figma or FigJam so they sit next to the design file and the team can comment directly.",[103,2949,2950],{},[11,2951,2952],{},"A mood board isn't a feature list. If it's full of competitor screenshots, it's a reference board, and it'll pull the conversation toward features instead of feeling.",[11,2954,2955],{},"That point comes straight from NN\u002Fg's guidance, and it's the most common mistake I see from junior designers. The other two: mixing contradictory moods on one board, and boards with no hierarchy, where every image is the same size and nothing leads.",[15,2957,2959],{"id":2958},"step-three-style-tiles-and-a-sample-screen","Step three: style tiles and a sample screen",[11,2961,2962],{},"Once the client picks a direction, I translate it into something closer to the product. Usually that's a style tile (colors, type, buttons, a card, an image treatment) and then one key screen, like the homepage hero or the main app dashboard.",[11,2964,2965],{},"This is where direction meets reality. A palette that felt great on a board might fail contrast checks on a button. A headline face that looked elegant might fall apart at mobile sizes. Better to find out on one screen than on forty.",[15,2967,2969],{"id":2968},"step-four-turn-the-direction-into-rules","Step four: turn the direction into rules",[11,2971,2972],{},"Direction that only lives in my head doesn't scale. So once the key screen is approved, the direction becomes:",[23,2974,2975,2981,2987,2993],{},[26,2976,2977,2980],{},[29,2978,2979],{},"Variables"," for color, spacing and radius, so the palette is applied the same way everywhere.",[26,2982,2983,2986],{},[29,2984,2985],{},"Text styles"," for the type scale.",[26,2988,2989,2992],{},[29,2990,2991],{},"Components"," that carry the shape language.",[26,2994,2995,2998],{},[29,2996,2997],{},"A short do\u002Fdon't page"," in the file for imagery, with examples of good and bad crops.",[11,3000,3001],{},"This is the bridge between art direction and design systems, and it's where my Figma work pays off. A designer who joins the project halfway through can open the file and see what \"on direction\" means.",[15,3003,3005],{"id":3004},"keeping-a-team-on-direction","Keeping a team on direction",[11,3007,3008],{},"Most of my art direction time isn't spent creating the direction. It's spent reviewing work against it. A few habits that help:",[23,3010,3011,3017,3023,3029],{},[26,3012,3013,3016],{},[29,3014,3015],{},"Review early, not only at the end."," A quick look at a half-finished screen is easier to correct than a polished one.",[26,3018,3019,3022],{},[29,3020,3021],{},"Point to the rule, not my preference."," \"This image is too busy for the calm direction we agreed\" lands better than \"I don't like it.\"",[26,3024,3025,3028],{},[29,3026,3027],{},"Keep the board visible."," I pin the approved board at the top of the design file.",[26,3030,3031,3034],{},[29,3032,3033],{},"Allow evolution, on purpose."," Directions do change once real content arrives. When that happens, I update the rules so everyone moves together.",[15,3036,3038],{"id":3037},"where-3d-and-ai-fit-in","Where 3D and AI fit in",[11,3040,3041],{},"I also work in Blender, and 3D has become a useful part of the direction on some projects: product renders, hero visuals, or a consistent object style that photography can't give you. The same rules apply. The lighting and materials have to match the mood words.",[11,3043,3044],{},"I've also built a Claude Skill for art direction that helps me generate mood word options, critique a board against a brief, and draft the rationale for a client deck. It speeds up the writing and the exploration. The decisions are still mine and the team's.",[15,3046,2404],{"id":2403},[23,3048,3049,3055,3061,3067],{},[26,3050,3051,3054],{},[29,3052,3053],{},"Presenting one direction."," The client has nothing to compare it to, so feedback becomes vague.",[26,3056,3057,3060],{},[29,3058,3059],{},"Too many directions."," More than three, and the meeting turns into picking favorite images.",[26,3062,3063,3066],{},[29,3064,3065],{},"Skipping the rationale."," A board without the \"why\" gets judged on personal taste.",[26,3068,3069,3072],{},[29,3070,3071],{},"Not checking against real content."," Directions built on stock photography break when the client's actual photos arrive.",[15,3074,235],{"id":234},[23,3076,3077,3084,3091],{},[26,3078,3079,3080],{},"Nielsen Norman Group, \"Mood Boards in UX\": ",[65,3081,3082],{"href":3082,"rel":3083},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fmood-boards\u002F",[69],[26,3085,3086,3087],{},"Wikipedia, \"Art director\": ",[65,3088,3089],{"href":3089,"rel":3090},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FArt_director",[69],[26,3092,2178,3093],{},[65,3094,2181],{"href":2181,"rel":3095},[69],{"title":269,"searchDepth":270,"depth":270,"links":3097},[3098,3099,3100,3101,3102,3103,3104,3105,3106],{"id":2849,"depth":270,"text":2850},{"id":2895,"depth":270,"text":2896},{"id":2905,"depth":270,"text":2906},{"id":2958,"depth":270,"text":2959},{"id":2968,"depth":270,"text":2969},{"id":3004,"depth":270,"text":3005},{"id":3037,"depth":270,"text":3038},{"id":2403,"depth":270,"text":2404},{"id":234,"depth":270,"text":235},"\u002Fcovers\u002Fart-direction.webp",{},10,"\u002Fcase-studies\u002Fart-direction",{"title":2838,"description":2843},"case-studies\u002Fart-direction","How I set a visual direction for a project, get the client to agree to it, and keep a team on it through to launch.","5PJEsv07ObesrdCfdPATENB6YplDj0KufcprhCQNkiA",{"id":3116,"title":3117,"body":3118,"cover":3384,"description":3122,"draft":287,"extension":288,"meta":3385,"navigation":287,"order":3386,"path":3387,"seo":3388,"seoDescription":269,"seoTitle":269,"shelf":2197,"stem":3389,"summary":3390,"__hash__":3391},"caseStudies\u002Fcase-studies\u002Fux-research.md","UX Research",{"type":8,"value":3119,"toc":3372},[3120,3123,3126,3130,3133,3136,3156,3159,3162,3166,3169,3172,3176,3179,3205,3210,3213,3217,3220,3234,3238,3241,3244,3247,3251,3254,3280,3283,3287,3290,3311,3314,3318,3321,3323,3340,3342],[11,3121,3122],{},"At an agency, research rarely looks like it does in textbooks. There's no dedicated research team, the timeline was agreed before anyone asked what users need, and the budget is usually tight. But skipping research doesn't save time. It just moves the cost to the end of the project, when a client sees the build and says \"this isn't how our customers work.\"",[11,3124,3125],{},"So I treat research as something that has to fit the project, not something to skip. Here's how I approach it.",[15,3127,3129],{"id":3128},"start-with-the-question-not-the-method","Start with the question, not the method",[11,3131,3132],{},"The most common mistake I see is picking a method first. \"Let's do a survey\" before anyone has said what we're trying to learn.",[11,3134,3135],{},"Nielsen Norman Group has a useful framework for this. They map methods along three dimensions:",[23,3137,3138,3144,3150],{},[26,3139,3140,3143],{},[29,3141,3142],{},"Attitudinal vs. behavioral",": what people say versus what people do.",[26,3145,3146,3149],{},[29,3147,3148],{},"Qualitative vs. quantitative",": qualitative methods are better for \"why\" and \"how to fix\" questions, quantitative for \"how many\" and \"how much.\"",[26,3151,3152,3155],{},[29,3153,3154],{},"Context of use",": whether people use the product naturally, follow a script, see a limited version, or don't use it at all.",[11,3157,3158],{},"They also tie methods to project stages. Early, to find direction: interviews, field studies, diary studies, surveys, concept testing. During design, to improve it: card sorting, tree testing, usability testing. After launch, to measure it: benchmarking, analytics, A\u002FB tests, surveys.",[11,3160,3161],{},"That's how I plan. I write down the two or three questions we need answered, figure out the stage we're in, and the method usually picks itself.",[15,3163,3165],{"id":3164},"stakeholder-interviews-come-first","Stakeholder interviews come first",[11,3167,3168],{},"On almost every project, research starts with the client. Requirement gathering with stakeholders and our system analysts tells me the business goals, the constraints and who the users are supposed to be.",[11,3170,3171],{},"It also tells me the assumptions. A university team might be sure students care most about program listings. A bank might assume customers want more features in the app. Those assumptions are what I want to test with real users.",[15,3173,3175],{"id":3174},"talking-to-users","Talking to users",[11,3177,3178],{},"When I can get access to users, interviews are my main tool. NN\u002Fg's guidance shaped how I run them:",[23,3180,3181,3187,3193,3199],{},[26,3182,3183,3186],{},[29,3184,3185],{},"Ask about specific past events."," \"Tell me about the last time you booked a hotel room\" beats \"How do you usually book hotels?\" The second gets you an idealized version.",[26,3188,3189,3192],{},[29,3190,3191],{},"Ask for extremes."," Particularly frustrating or particularly smooth experiences are vivid, so people remember details.",[26,3194,3195,3198],{},[29,3196,3197],{},"Don't lead."," People will form an opinion about almost anything when asked. Pushing for answers creates opinions they didn't really have.",[26,3200,3201,3204],{},[29,3202,3203],{},"Don't ask them to design."," Interviews are bad for specific UI decisions, like menu types or button colors, and for predicting whether people would use a feature that doesn't exist yet.",[103,3206,3207],{},[11,3208,3209],{},"Listen to what users say about their lives. Watch what they do with the design. Don't confuse the two.",[11,3211,3212],{},"For mobile apps with more than one kind of user, like a logistics app with customers and drivers, I talk to both groups separately. Their goals and context are completely different, and one group's needs can't stand in for the other's.",[15,3214,3216],{"id":3215},"surveys-carefully","Surveys, carefully",[11,3218,3219],{},"Surveys are tempting because they're cheap and give you numbers. They're also easy to get wrong. A few rules I follow:",[23,3221,3222,3225,3228,3231],{},[26,3223,3224],{},"Use them for \"how many\", not \"why.\" Interviews explain. Surveys measure.",[26,3226,3227],{},"Keep them short. Every extra question lowers completion and quality.",[26,3229,3230],{},"Ask about behavior and facts where possible, not hypothetical preferences.",[26,3232,3233],{},"Pilot with two or three people before sending it out. Confusing questions show up immediately.",[15,3235,3237],{"id":3236},"testing-the-design","Testing the design",[11,3239,3240],{},"Usability testing is where research turns directly into design changes. NN\u002Fg's well-known guidance is that five users in a qualitative test find most of the usability problems you'd find with many more, and that the return drops quickly after that.",[11,3242,3243],{},"The important part of that advice is often skipped: it assumes you test, fix and test again. Several small rounds beat one big one. And if you have distinct user groups, each one needs its own participants. For quantitative studies with statistics, you need far more people, at least 20 according to NN\u002Fg.",[11,3245,3246],{},"On agency timelines, my version is simple: a few people, a clickable Figma prototype, three to five realistic tasks, and a quick round of fixes before the next review.",[15,3248,3250],{"id":3249},"making-sense-of-it","Making sense of it",[11,3252,3253],{},"Raw notes don't change a design. Synthesis does. My go-to is affinity diagramming, usually in FigJam:",[1979,3255,3256,3262,3268,3274],{},[26,3257,3258,3261],{},[29,3259,3260],{},"Everyone writes notes alone first."," One observation or quote per sticky. Working alone first reduces groupthink.",[26,3263,3264,3267],{},[29,3265,3266],{},"Cluster by content."," Group related notes, then label each group with a clear theme.",[26,3269,3270,3273],{},[29,3271,3272],{},"Don't throw away small clusters."," Outliers can be the most interesting finding.",[26,3275,3276,3279],{},[29,3277,3278],{},"Decide what to do."," For each theme: design change, open question, more research, or no action. Each gets an owner.",[11,3281,3282],{},"NN\u002Fg makes the point that the conversation while clustering matters more than the final diagram. That matches my experience, especially with developers in the room.",[15,3284,3286],{"id":3285},"from-findings-to-screens","From findings to screens",[11,3288,3289],{},"This is the step that gets lost most often. A research deck full of insights that nobody acts on is wasted effort. So I connect each finding to something concrete:",[23,3291,3292,3299,3305],{},[26,3293,3294,3295,3298],{},"A ",[29,3296,3297],{},"user journey document"," that shows where problems happen.",[26,3300,3301,3304],{},[29,3302,3303],{},"Design principles"," for the project, written from the findings.",[26,3306,3307,3310],{},[29,3308,3309],{},"Specific screen changes",", with the finding noted in the Figma file next to the design.",[11,3312,3313],{},"When a client pushes back on a decision, being able to point to what users actually did is far more convincing than my opinion.",[15,3315,3317],{"id":3316},"where-ai-helps","Where AI helps",[11,3319,3320],{},"I've built Claude Skills for UX research and user journey documents. They help me draft interview guides, spot leading questions, summarize transcripts and turn clustered notes into a first draft of findings. That saves real time on agency schedules. I still review everything against the source notes, because a summary that sounds right but misquotes a user is worse than no summary.",[15,3322,2404],{"id":2403},[23,3324,3325,3328,3331,3334,3337],{},[26,3326,3327],{},"Running research after the design is already approved.",[26,3329,3330],{},"Treating stakeholder opinions as user research.",[26,3332,3333],{},"Recruiting only friendly or internal users.",[26,3335,3336],{},"Reporting findings without recommendations.",[26,3338,3339],{},"Testing once and calling it validated.",[15,3341,235],{"id":234},[23,3343,3344,3351,3358,3365],{},[26,3345,3346,3347],{},"Nielsen Norman Group, \"When to Use Which User-Experience Research Methods\": ",[65,3348,3349],{"href":3349,"rel":3350},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fwhich-ux-research-methods\u002F",[69],[26,3352,3353,3354],{},"Nielsen Norman Group, \"Interviewing Users\": ",[65,3355,3356],{"href":3356,"rel":3357},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Finterviewing-users\u002F",[69],[26,3359,3360,3361],{},"Nielsen Norman Group, \"How Many Test Users in a Usability Study?\": ",[65,3362,3363],{"href":3363,"rel":3364},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fhow-many-test-users\u002F",[69],[26,3366,3367,3368],{},"Nielsen Norman Group, \"Affinity Diagramming\": ",[65,3369,3370],{"href":3370,"rel":3371},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Faffinity-diagram\u002F",[69],{"title":269,"searchDepth":270,"depth":270,"links":3373},[3374,3375,3376,3377,3378,3379,3380,3381,3382,3383],{"id":3128,"depth":270,"text":3129},{"id":3164,"depth":270,"text":3165},{"id":3174,"depth":270,"text":3175},{"id":3215,"depth":270,"text":3216},{"id":3236,"depth":270,"text":3237},{"id":3249,"depth":270,"text":3250},{"id":3285,"depth":270,"text":3286},{"id":3316,"depth":270,"text":3317},{"id":2403,"depth":270,"text":2404},{"id":234,"depth":270,"text":235},"\u002Fcovers\u002Fux-research.webp",{},11,"\u002Fcase-studies\u002Fux-research",{"title":3117,"description":3122},"case-studies\u002Fux-research","How I pick the right research method on agency timelines, and turn interviews, surveys and tests into decisions on the screen.","u1DXyQUiey20ar8T0rxuvA1y0yqEAiH4KykM2-8BliQ",{"id":3393,"title":3394,"body":3395,"cover":3617,"description":3399,"draft":287,"extension":288,"meta":3618,"navigation":287,"order":3619,"path":3620,"seo":3621,"seoDescription":269,"seoTitle":269,"shelf":2197,"stem":3622,"summary":3623,"__hash__":3624},"caseStudies\u002Fcase-studies\u002Fsketching.md","Sketching Will Help You A Lot",{"type":8,"value":3396,"toc":3607},[3397,3400,3403,3407,3410,3418,3421,3426,3430,3437,3440,3443,3447,3450,3453,3484,3487,3491,3494,3520,3524,3527,3530,3534,3540,3546,3552,3558,3562,3579,3581],[11,3398,3399],{},"I spend most of my day in Figma, and I still start almost every project with a pen. Not because it looks nice in a process photo, but because it's the fastest way I know to find out which ideas are bad before I've invested in them.",[11,3401,3402],{},"This is the habit I push hardest when mentoring junior designers, and the one they resist the most at first.",[15,3404,3406],{"id":3405},"the-problem-with-starting-in-figma","The problem with starting in Figma",[11,3408,3409],{},"Figma is a commitment machine. The moment you draw a rectangle, you're picking a width, a radius, a color, a font. Those choices feel small, but they pull your attention toward polish instead of the question that actually matters at the start: is this the right idea?",[11,3411,3412,3413,3417],{},"Bill Buxton's book ",[3414,3415,3416],"em",{},"Sketching User Experiences"," makes this point well. He treats sketching and prototyping as points on a continuum. Sketches come during early exploration and are meant to suggest and question. Prototypes come later and are meant to refine and commit. The trouble is when you skip straight to the second.",[11,3419,3420],{},"Buxton also argues that a sketch's ambiguity is where its power comes from. A rough sketch leaves room for interpretation, which invites other ideas. A polished screen looks finished, so people react to the details instead of the concept.",[103,3422,3423],{},[11,3424,3425],{},"A sketch asks \"what if?\" A high-fidelity mockup says \"here it is.\" Early on, you want the question.",[15,3427,3429],{"id":3428},"what-the-research-says-about-making-many","What the research says about making many",[11,3431,3432,3433,3436],{},"One study I come back to often is by Steven Dow and colleagues at Stanford, titled ",[3414,3434,3435],{},"Parallel Prototyping Leads to Better Design Results, More Divergence, and Increased Self-Efficacy",". Participants designed web banner ads. One group made several prototypes in parallel before getting feedback. The other group made one at a time, getting critique after each.",[11,3438,3439],{},"The parallel group's ads performed better on click-through and were rated higher by experts. Their designs were also judged as more diverse, and the participants reported a bigger gain in confidence.",[11,3441,3442],{},"The lesson I take from it: exploring several directions side by side beats perfecting one and iterating on it. And sketching is by far the cheapest way to make several directions.",[15,3444,3446],{"id":3445},"how-i-sketch","How I sketch",[11,3448,3449],{},"My setup is simple: A4 paper or a sketchbook, a fine black pen and a thicker marker. No pencil, because erasing turns it into polishing again.",[11,3451,3452],{},"My usual process:",[1979,3454,3455,3461,3467,3473,3479],{},[26,3456,3457,3460],{},[29,3458,3459],{},"Write the question at the top."," \"How does a driver confirm a delivery?\" or \"What does a student see after logging in?\" One question per sheet keeps it focused.",[26,3462,3463,3466],{},[29,3464,3465],{},"Crazy eights for breadth."," Fold the paper into eight panels and sketch eight different ideas in eight minutes. Most will be bad. That's the point.",[26,3468,3469,3472],{},[29,3470,3471],{},"Pick two or three."," Circle the ideas worth exploring, and note what's good about each.",[26,3474,3475,3478],{},[29,3476,3477],{},"Sketch the flow, not just the screen."," Buxton notes that sketching interaction is harder than sketching a static object because it has to show time. So I draw a few screens in sequence with arrows, like a storyboard.",[26,3480,3481,3483],{},[29,3482,2943],{}," Short notes on what's happening and what's still a question.",[11,3485,3486],{},"Only after that do I open Figma, and usually it's for lo-fi wireframes, not UI.",[15,3488,3490],{"id":3489},"where-it-saves-the-most-time","Where it saves the most time",[11,3492,3493],{},"On agency projects, sketching earns its keep in a few specific places:",[23,3495,3496,3502,3508,3514],{},[26,3497,3498,3501],{},[29,3499,3500],{},"Kickoff and discovery."," Sketching during a workshop with the client and our system analysts helps everyone agree on what's being built before anyone argues about colors.",[26,3503,3504,3507],{},[29,3505,3506],{},"Complex flows."," Mobile apps with multiple user roles, like a trucking app with separate user and driver sides, or an exam review app with practice tests and progress tracking. The flow gets messy fast, and paper makes it visible.",[26,3509,3510,3513],{},[29,3511,3512],{},"Odd interactions."," An interactive mall map, a personality quiz for a drinks brand. Things with no standard pattern to copy.",[26,3515,3516,3519],{},[29,3517,3518],{},"Layout exploration."," Five homepage layouts on paper take minutes. Five in Figma take an afternoon.",[15,3521,3523],{"id":3522},"sketches-are-social","Sketches are social",[11,3525,3526],{},"Buxton describes sketches as social things, meant to be shared and talked about. I agree. The best sketching sessions I've had are with developers and system analysts in the room, because they spot technical problems early and often suggest simpler solutions.",[11,3528,3529],{},"It also lowers the bar for everyone. A project manager who would never touch Figma will happily grab a pen and draw what they mean. That's often the moment a vague requirement becomes clear.",[15,3531,3533],{"id":3532},"common-objections","Common objections",[11,3535,3536,3539],{},[29,3537,3538],{},"\"I can't draw.\""," You don't need to. Boxes, lines, squiggles for text, a circle with an X for images. If someone can tell what the box is, it's good enough.",[11,3541,3542,3545],{},[29,3543,3544],{},"\"It's faster in Figma.\""," For one screen, maybe. For eight different ideas, no. And the ideas you'd explore in Figma tend to be variations of the first one you drew.",[11,3547,3548,3551],{},[29,3549,3550],{},"\"Clients won't take it seriously.\""," I rarely show raw sketches to clients unless we're sketching together in a workshop. They're a thinking tool for the team. What the client sees is the wireframe that came out of it.",[11,3553,3554,3557],{},[29,3555,3556],{},"\"We have AI now.\""," I use AI tools a lot, including Claude Skills I've built for lo-fi wireframing. They're great at producing options fast. But choosing between options still needs a clear question and your own judgment, and sketching is how I get both.",[15,3559,3561],{"id":3560},"tips-if-youre-starting-out","Tips if you're starting out",[23,3563,3564,3567,3570,3573,3576],{},[26,3565,3566],{},"Set a timer. Short limits stop you from polishing.",[26,3568,3569],{},"Use a thick pen. You physically can't add too much detail.",[26,3571,3572],{},"Keep every sheet. Old sketches are a surprisingly useful record of why an idea was dropped.",[26,3574,3575],{},"Take a photo and drop it into the Figma or FigJam file so the thinking stays next to the design.",[26,3577,3578],{},"Sketch the empty, error and loading states too. They're usually forgotten until QA.",[15,3580,235],{"id":234},[23,3582,3583,3593,3600],{},[26,3584,3585,3586,3588,3589],{},"UXmatters, book review of Bill Buxton's ",[3414,3587,3416],{},": ",[65,3590,3591],{"href":3591,"rel":3592},"https:\u002F\u002Fwww.uxmatters.com\u002Fmt\u002Farchives\u002F2007\u002F10\u002Fbook-review-sketching-user-experiences.php",[69],[26,3594,3595,3596],{},"Dow et al., \"Parallel Prototyping Leads to Better Design Results, More Divergence, and Increased Self-Efficacy\" (abstract): ",[65,3597,3598],{"href":3598,"rel":3599},"https:\u002F\u002Fideas.repec.org\u002Fh\u002Fspr\u002Fundchp\u002F978-3-642-21643-5_8.html",[69],[26,3601,3602,3603],{},"Nielsen Norman Group, \"Pencils vs. Pixels for UI Prototyping and Sketching\" (video): ",[65,3604,3605],{"href":3605,"rel":3606},"https:\u002F\u002Fwww.nngroup.com\u002Fvideos\u002Fpencils-vs-pixels\u002F",[69],{"title":269,"searchDepth":270,"depth":270,"links":3608},[3609,3610,3611,3612,3613,3614,3615,3616],{"id":3405,"depth":270,"text":3406},{"id":3428,"depth":270,"text":3429},{"id":3445,"depth":270,"text":3446},{"id":3489,"depth":270,"text":3490},{"id":3522,"depth":270,"text":3523},{"id":3532,"depth":270,"text":3533},{"id":3560,"depth":270,"text":3561},{"id":234,"depth":270,"text":235},"\u002Fcovers\u002Fsketching.webp",{},12,"\u002Fcase-studies\u002Fsketching",{"title":3394,"description":3399},"case-studies\u002Fsketching","Why I sketch before I open Figma, and how a few minutes with a pen saves hours of polishing the wrong idea.","9PuwNMkO7QWXVEL3bSoupKx_mWL_ZjWjxSjvrnhdo7o",{"id":3626,"title":3627,"body":3628,"cover":3957,"description":3632,"draft":287,"extension":288,"meta":3958,"navigation":287,"order":3959,"path":3960,"seo":3961,"seoDescription":269,"seoTitle":269,"shelf":3962,"stem":3963,"summary":3964,"__hash__":3965},"caseStudies\u002Fcase-studies\u002Fai-and-creatives.md","AI Is the Worst Thing That Happened to Creatives... Or Is It?",{"type":8,"value":3629,"toc":3948},[3630,3633,3640,3643,3647,3650,3684,3687,3691,3710,3715,3722,3737,3741,3744,3754,3763,3773,3776,3780,3783,3790,3801,3804,3808,3811,3844,3848,3851,3854,3892,3895,3897],[11,3631,3632],{},"Every few weeks someone in a design group chat posts a screenshot of a generated landing page with the caption \"it's over.\" And every few weeks I open Figma, Claude, ChatGPT and Gemini and keep working, because the job isn't over. It moved.",[11,3634,3635,3636,3639],{},"So here's my take, up front: ",[29,3637,3638],{},"AI is the worst thing that ever happened to one kind of creative work, and one of the best things to happen to the rest."," The kind it hurts is production done without judgment: resizing, filler copy, stock-looking visuals, the forty-variant banner set. The kind it helps is everything that needs taste, context and someone willing to put their name on a decision.",[11,3641,3642],{},"That isn't a vibe. Let's look at the receipts.",[15,3644,3646],{"id":3645},"everyone-is-already-using-it","Everyone is already using it",[11,3648,3649],{},"The \"should creatives use AI?\" debate is mostly settled by behaviour, not argument.",[23,3651,3652,3663,3677],{},[26,3653,3654,3655,3658,3659,3662],{},"Adobe's first Creators' Toolkit Report (Harris Poll, 16,000+ creators across eight countries, September 2025) found ",[29,3656,3657],{},"86%"," of creators actively using creative generative AI, and ",[29,3660,3661],{},"76%"," saying it helped grow their business or following.",[26,3664,3665,3666,3669,3670,3673,3674,71],{},"The top uses weren't \"make me a masterpiece.\" They were editing, upscaling and enhancement (",[29,3667,3668],{},"55%","), generating new assets (",[29,3671,3672],{},"52%",") and ideation (",[29,3675,3676],{},"48%",[26,3678,3679,3680,3683],{},"Figma's 2025 AI report, which surveyed 2,500 of its users, found ",[29,3681,3682],{},"78%"," agree AI significantly boosts their efficiency.",[11,3685,3686],{},"That matches how I actually work. AI is in my brainstorming, my first drafts of UX copy, my documentation, my research summaries, and the Claude Skills I build so the boring parts of a workflow run the same way every time. It's the most useful tool I've picked up in four years.",[15,3688,3690],{"id":3689},"but-look-at-the-gap","But look at the gap",[11,3692,3693,3694,3697,3698,3701,3702,3705,3706,3709],{},"Here's the number that should get more attention than any adoption stat. In that same Figma report, ",[29,3695,3696],{},"only 32%"," of respondents said they can rely on AI's output. Designers were also noticeably less impressed than developers: ",[29,3699,3700],{},"69%"," of designers reported being satisfied with AI tools versus ",[29,3703,3704],{},"82%"," of developers, and only ",[29,3707,3708],{},"54%"," of designers said it improves the quality of their work.",[103,3711,3712],{},[11,3713,3714],{},"Fast is not the same as good, and the gap between them is exactly where a designer earns their pay.",[11,3716,3717,3718,3721],{},"That gap is the whole story. AI gets you to ",[3414,3719,3720],{},"something"," very quickly. It doesn't know that the client's users are mostly on old Android phones, that the legal team will reject that headline, or that the \"clean\" layout it produced breaks the design system in three places. Somebody has to know that. That somebody is the job now.",[11,3723,3724,3725,3728,3729,3732,3733,3736],{},"Adobe's numbers say the same thing from the other side. Creators' top barriers were cost (",[29,3726,3727],{},"38%","), unreliable output quality (",[29,3730,3731],{},"34%",") and not knowing how the model was trained (",[29,3734,3735],{},"28%","). The tools are popular and still untrustworthy, both at once.",[15,3738,3740],{"id":3739},"the-case-that-it-really-is-the-worst","The case that it really is the worst",[11,3742,3743],{},"I don't want to wave the fear away, because some of it is earned.",[11,3745,3746,3749,3750,3753],{},[29,3747,3748],{},"Jobs are shifting, and not evenly."," The World Economic Forum's ",[3414,3751,3752],{},"Future of Jobs Report 2025",", built from a survey of 1,000 employers covering 14 million+ workers, put graphic designers as the 11th fastest-declining job category, a role it had called \"moderately growing\" in its previous edition. If your work is mostly turning a brief into assets, that's a real threat, not a hot take.",[11,3755,3756,3759,3760,3762],{},[29,3757,3758],{},"Consent is a real grievance."," Adobe found ",[29,3761,3700],{}," of creators worry their work will be used to train AI without permission. That isn't paranoia. It's a fair reaction to an industry that scraped first and asked later.",[11,3764,3765,3768,3769,3772],{},[29,3766,3767],{},"The legal ground is shaky for pure output."," The U.S. Copyright Office's January 2025 report on copyrightability concluded that prompts alone don't make you the author of what comes out. Protection needs a human who determined enough of the expressive elements. In March 2025 the D.C. Circuit agreed in ",[3414,3770,3771],{},"Thaler v. Perlmutter"," that a work made autonomously by AI can't be registered, and the Supreme Court declined to hear the appeal in March 2026.",[11,3774,3775],{},"So if your plan is \"prompt it, ship it, own it,\" the law is not on your side.",[15,3777,3779],{"id":3778},"why-i-still-land-on-or-is-it","Why I still land on \"or is it?\"",[11,3781,3782],{},"Read those same receipts again and a different picture shows up.",[11,3784,3785,3786,3789],{},"That WEF report that made designers panic? The same coverage notes it ranked ",[29,3787,3788],{},"UI and UX design as the eighth fastest-growing job category."," Demand didn't vanish. It moved toward people who design systems, flows and decisions instead of single artefacts.",[11,3791,3792,3793,3796,3797,3800],{},"The copyright rulings cut the same way. The Copyright Office explicitly said that ",[29,3794,3795],{},"using AI to assist the creative process doesn't block copyright",", and that human selection, arrangement and modification can be protected. The D.C. Circuit said the human-authorship rule still rewards people who make work ",[3414,3798,3799],{},"with the help of"," AI. The law isn't punishing creatives who use AI. It's punishing the absence of a creative.",[11,3802,3803],{},"And look at what creators actually use it for in Adobe's data: editing, enhancing, brainstorming. The people using these tools the most aren't asking to be replaced. They're asking for leverage.",[15,3805,3807],{"id":3806},"what-actually-changed-in-my-day","What actually changed in my day",[11,3809,3810],{},"No made-up productivity percentages here, just the honest shape of it:",[23,3812,3813,3819,3825,3838],{},[26,3814,3815,3818],{},[29,3816,3817],{},"Blank pages are gone."," I rarely start from nothing. I start from three rough directions and spend my energy choosing and fixing.",[26,3820,3821,3824],{},[29,3822,3823],{},"Documentation stopped being the thing nobody does."," Handover notes, component specs and QA checklists get drafted by AI and corrected by me.",[26,3826,3827,3830,3831,3834,3835,3837],{},[29,3828,3829],{},"Judgment got more expensive."," When anyone can generate ten options, the scarce skill is knowing which one is right for ",[3414,3832,3833],{},"this"," user and ",[3414,3836,3833],{}," brief, and explaining why to a client.",[26,3839,3840,3843],{},[29,3841,3842],{},"Junior work changed."," Mentoring now includes teaching people to distrust a confident output, not just how to use auto layout.",[15,3845,3847],{"id":3846},"my-verdict","My verdict",[11,3849,3850],{},"AI is the worst thing that happened to creatives who were only ever paid for output. For everyone else it's a strong, flawed assistant that makes taste, context and accountability worth more, not less.",[11,3852,3853],{},"If you want a practical checklist, this is mine:",[1979,3855,3856,3862,3868,3874,3880,3886],{},[26,3857,3858,3861],{},[29,3859,3860],{},"Use it for the first 60%, own the last 40%."," Generation is cheap. Editing, rejecting and refining is where you add value.",[26,3863,3864,3867],{},[29,3865,3866],{},"Keep a human hand you can point to."," Selection, arrangement, modification: that's where your craft and your copyright live.",[26,3869,3870,3873],{},[29,3871,3872],{},"Know your tool's training story."," If a client asks where a visual came from, \"the AI made it\" isn't an answer.",[26,3875,3876,3879],{},[29,3877,3878],{},"Never ship unread output."," Only 32% of builders say they can rely on it. Act like it.",[26,3881,3882,3885],{},[29,3883,3884],{},"Move up the stack."," Systems, research, flows and client conversations are where the growth is. Production alone is where the decline is.",[26,3887,3888,3891],{},[29,3889,3890],{},"Build your own workflows."," Prompts you reuse, skills you write, checklists you trust. The advantage isn't having AI. Everyone has it. It's having a process.",[11,3893,3894],{},"So, worst thing ever? Only if you let it make the decisions.",[15,3896,235],{"id":234},[23,3898,3899,3906,3913,3920,3927,3934,3941],{},[26,3900,3901,3902],{},"Adobe, Creators' Toolkit Report (MAX 2025): ",[65,3903,3904],{"href":3904,"rel":3905},"https:\u002F\u002Fnews.adobe.com\u002Fnews\u002F2025\u002F10\u002Fadobe-max-2025-creators-survey",[69],[26,3907,3908,3909],{},"Figma, 2025 AI Report perspectives: ",[65,3910,3911],{"href":3911,"rel":3912},"https:\u002F\u002Fwww.figma.com\u002Fblog\u002Ffigma-2025-ai-report-perspectives\u002F",[69],[26,3914,3915,3916],{},"Creative Boom on the WEF Future of Jobs Report 2025: ",[65,3917,3918],{"href":3918,"rel":3919},"https:\u002F\u002Fcreativeboom.com\u002Fnews\u002Fits-official-ai-is-coming-for-your-graphic-design-job",[69],[26,3921,3922,3923],{},"U.S. Copyright Office, Part 2 report announcement: ",[65,3924,3925],{"href":3925,"rel":3926},"https:\u002F\u002Fwww.copyright.gov\u002Fnewsnet\u002F2025\u002F1060.html",[69],[26,3928,3929,3930],{},"U.S. Copyright Office, Copyright and AI hub: ",[65,3931,3932],{"href":3932,"rel":3933},"https:\u002F\u002Fwww.copyright.gov\u002Fai\u002F",[69],[26,3935,3936,3937],{},"Skadden on Thaler v. Perlmutter (D.C. Cir., March 2025): ",[65,3938,3939],{"href":3939,"rel":3940},"https:\u002F\u002Fwww.skadden.com\u002Finsights\u002Fpublications\u002F2025\u002F03\u002Fappellate-court-affirms-human-authorship",[69],[26,3942,3943,3944],{},"Baker Donelson on the Supreme Court denying certiorari: ",[65,3945,3946],{"href":3946,"rel":3947},"https:\u002F\u002Fwww.bakerdonelson.com\u002Fsupreme-court-denies-certiorari-in-thaler-v-perlmutter-ai-cannot-be-an-author-under-the-copyright-act",[69],{"title":269,"searchDepth":270,"depth":270,"links":3949},[3950,3951,3952,3953,3954,3955,3956],{"id":3645,"depth":270,"text":3646},{"id":3689,"depth":270,"text":3690},{"id":3739,"depth":270,"text":3740},{"id":3778,"depth":270,"text":3779},{"id":3806,"depth":270,"text":3807},{"id":3846,"depth":270,"text":3847},{"id":234,"depth":270,"text":235},"\u002Fcovers\u002Fai-and-creatives.webp",{},13,"\u002Fcase-studies\u002Fai-and-creatives",{"title":3627,"description":3632},"opinion","case-studies\u002Fai-and-creatives","I design with AI every day. It isn't killing creative work, but it is killing the parts of the job that were never the point, and anyone who only did those parts should be worried.","flxzfBPwOztxTzt7zufILh2yPxfOEZo9MfUzT0SPk5A",{"id":3967,"title":3968,"body":3969,"cover":4249,"description":3973,"draft":287,"extension":288,"meta":4250,"navigation":287,"order":4251,"path":4252,"seo":4253,"seoDescription":269,"seoTitle":269,"shelf":3962,"stem":4254,"summary":4255,"__hash__":4256},"caseStudies\u002Fcase-studies\u002Fthree-fonts.md","Three Fonts Are Greedy, Two Is Too Much, One Maybe",{"type":8,"value":3970,"toc":4241},[3971,3974,3981,3984,3988,3995,4002,4005,4010,4014,4017,4055,4062,4065,4069,4072,4098,4101,4105,4108,4132,4135,4138,4141,4143,4146,4149,4203,4206,4208],[11,3972,3973],{},"Every design review has that moment. Someone opens the type styles panel and there are four families in it: a display serif for headings, a geometric sans for the body, a \"fun\" script for the hero, and a monospace that showed up for one pricing table and never left.",[11,3975,3976,3977,3980],{},"Nobody planned it. It just accumulated. And that's my whole argument: ",[29,3978,3979],{},"fonts are easy to add and expensive to keep."," Three is greedy. Two is usually more than the project needs. One, a good family used with discipline, is enough far more often than designers like to admit.",[11,3982,3983],{},"The title is a little dramatic on purpose. Here's the case with receipts.",[15,3985,3987],{"id":3986},"even-the-typography-people-say-stop-at-two","Even the typography people say stop at two",[11,3989,3990,3991,3994],{},"This isn't just minimalist taste. Matthew Butterick, whose ",[3414,3992,3993],{},"Practical Typography"," is one of the most practical references for working designers, puts it bluntly: \"Most documents can tolerate a second font. Few can tolerate a third. Almost none can tolerate four or more.\"",[11,3996,3997,3998,4001],{},"Notice the framing. A second font is something a document ",[3414,3999,4000],{},"tolerates",". It's not a requirement. Butterick also says mixing fonts is optional, that pairing doesn't need the serif-plus-sans formula, and that \"font mixing is most successful when each font has a consistent role in the document.\"",[11,4003,4004],{},"That last line is the test I use. If you can't say in one sentence what job the second font does that the first can't, it doesn't have a job.",[103,4006,4007],{},[11,4008,4009],{},"A second font is something a design tolerates. A third is something it survives.",[15,4011,4013],{"id":4012},"one-family-already-gives-you-a-whole-system","One family already gives you a whole system",[11,4015,4016],{},"The usual objection is \"but I need contrast.\" Fair. But a single well-built family gives you a lot of contrast:",[23,4018,4019,4025,4031,4037,4043,4049],{},[26,4020,4021,4024],{},[29,4022,4023],{},"Weight:"," light, regular, medium, semibold, bold, black",[26,4026,4027,4030],{},[29,4028,4029],{},"Size:"," a real type scale, with big jumps for display and tight steps for UI",[26,4032,4033,4036],{},[29,4034,4035],{},"Width and optical size,"," in families that support them",[26,4038,4039,4042],{},[29,4040,4041],{},"Case and tracking:"," uppercase labels, tighter headlines, looser captions",[26,4044,4045,4048],{},[29,4046,4047],{},"Italic"," for voice, emphasis and quotes",[26,4050,4051,4054],{},[29,4052,4053],{},"Colour and opacity"," for hierarchy without changing the face",[11,4056,4057,4058,4061],{},"Variable fonts make this even easier. The 2024 Web Almanac found about ",[29,4059,4060],{},"a third of sites (33–34%)"," already use them. One file, a whole range of weights and widths, and every step stays in the same visual voice.",[11,4063,4064],{},"In my design systems work, the strongest hierarchy almost never comes from adding a typeface. It comes from a disciplined scale and clear weight rules. When hierarchy feels weak, the fix is usually spacing and size, not a new font.",[15,4066,4068],{"id":4067},"every-font-is-a-performance-bill","Every font is a performance bill",[11,4070,4071],{},"Designers tend to treat fonts as free because they're free to pick in Figma. The browser doesn't agree.",[23,4073,4074,4085,4092,4095],{},[26,4075,4076,4077,4080,4081,4084],{},"The Web Almanac puts the ",[29,4078,4079],{},"median web font file at about 39 KB",", with the 90th percentile at roughly ",[29,4082,4083],{},"112–116 KB",". That's per file. Every weight and style you add is another file unless you're using a variable font.",[26,4086,4087,4088,4091],{},"Web fonts are on about ",[29,4089,4090],{},"87%"," of websites, so this is everyone's problem, not just enterprise sites.",[26,4093,4094],{},"web.dev's font guidance opens with the line I'd tattoo on every style guide: \"The fastest font to deliver is a font that isn't requested in the first place.\"",[26,4096,4097],{},"Fonts also affect Core Web Vitals. Browsers \"typically delay text rendering\" until a web font loads, which can hit FCP and LCP. When the web font swaps in for a fallback with different metrics, you get layout shift, which counts against CLS.",[11,4099,4100],{},"Three families at three weights each is nine files fighting for bandwidth on a phone, before your hero image even starts loading. Preloading all of them isn't a fix either, since web.dev warns preload competes with other resources.",[15,4102,4104],{"id":4103},"the-counter-argument-fairly","The counter-argument, fairly",[11,4106,4107],{},"\"One font is boring. Brands need personality.\" Sometimes true, and I'll defend a second font in a few cases:",[23,4109,4110,4120,4126],{},[26,4111,4112,4115,4116,4119],{},[29,4113,4114],{},"A distinctive display face for headlines"," paired with a quiet workhorse for body and UI. This is the classic, and it works when the display font is used ",[3414,4117,4118],{},"only"," for display.",[26,4121,4122,4125],{},[29,4123,4124],{},"Monospace for actual code or data,"," where alignment and character distinction matter.",[26,4127,4128,4131],{},[29,4129,4130],{},"Multi-script products."," If you support languages your main family doesn't cover, adding a matching family isn't greed, it's accessibility.",[11,4133,4134],{},"Butterick even gives a shortcut for pairing: fonts from the same designer tend to work together. Superfamilies with matched sans and serif versions are a clean way to get two \"fonts\" that behave like one system.",[11,4136,4137],{},"What doesn't count as a reason: \"the client liked it in a mood board,\" \"it was trending on a font site,\" or \"we needed something for the testimonial section.\"",[11,4139,4140],{},"And icon fonts? Font Awesome is still one of the most-used font families on the web, per the Web Almanac. I'd count it toward your budget, and these days I'd usually swap it for SVG icons.",[15,4142,3847],{"id":3846},[11,4144,4145],{},"Start with one. Earn the second. Treat the third as a design smell.",[11,4147,4148],{},"The checklist I'd hand any team:",[1979,4150,4151,4157,4163,4169,4175,4181,4187,4197],{},[26,4152,4153,4156],{},[29,4154,4155],{},"Pick one family with range,"," ideally a variable font with the weights and widths you need.",[26,4158,4159,4162],{},[29,4160,4161],{},"Build the hierarchy with scale, weight and spacing"," before you consider another face.",[26,4164,4165,4168],{},[29,4166,4167],{},"Give any second font one written job,"," for example \"headlines over 32px only,\" and enforce it in the design system.",[26,4170,4171,4174],{},[29,4172,4173],{},"Count weights, not just families."," Two families at five weights each is ten files.",[26,4176,4177,4180],{},[29,4178,4179],{},"Ship WOFF2."," web.dev notes it compresses about 30% better than WOFF.",[26,4182,4183,4186],{},[29,4184,4185],{},"Subset"," to the characters and languages you actually use.",[26,4188,4189,4192,4193,4196],{},[29,4190,4191],{},"Match your fallback metrics"," (web.dev recommends ",[1413,4194,4195],{},"size-adjust",") so the swap doesn't shift the layout.",[26,4198,4199,4202],{},[29,4200,4201],{},"Audit quarterly."," Fonts creep in through one-off sections. Delete the ones with no job.",[11,4204,4205],{},"One font, used well, reads as confidence. Four fonts, used everywhere, reads as a team that never agreed on anything.",[15,4207,235],{"id":234},[23,4209,4210,4220,4227,4234],{},[26,4211,4212,4213,4215,4216],{},"Matthew Butterick, ",[3414,4214,3993],{},", \"Mixing fonts\": ",[65,4217,4218],{"href":4218,"rel":4219},"https:\u002F\u002Fpracticaltypography.com\u002Fmixing-fonts.html",[69],[26,4221,4222,4223],{},"HTTP Archive, Web Almanac 2024, Fonts chapter: ",[65,4224,4225],{"href":4225,"rel":4226},"https:\u002F\u002Falmanac.httparchive.org\u002Fen\u002F2024\u002Ffonts",[69],[26,4228,4229,4230],{},"web.dev, Best practices for fonts: ",[65,4231,4232],{"href":4232,"rel":4233},"https:\u002F\u002Fweb.dev\u002Farticles\u002Ffont-best-practices",[69],[26,4235,4236,4237],{},"web.dev, Web Vitals: ",[65,4238,4239],{"href":4239,"rel":4240},"https:\u002F\u002Fweb.dev\u002Farticles\u002Fvitals",[69],{"title":269,"searchDepth":270,"depth":270,"links":4242},[4243,4244,4245,4246,4247,4248],{"id":3986,"depth":270,"text":3987},{"id":4012,"depth":270,"text":4013},{"id":4067,"depth":270,"text":4068},{"id":4103,"depth":270,"text":4104},{"id":3846,"depth":270,"text":3847},{"id":234,"depth":270,"text":235},"\u002Fcovers\u002Fthree-fonts.webp",{},14,"\u002Fcase-studies\u002Fthree-fonts",{"title":3968,"description":3973},"case-studies\u002Fthree-fonts","An argument for typographic restraint: start with one good family, make a second font earn its place, and treat a third as a red flag for both design and performance.","w6VyW0oYJhI93R_CrVEaSFUhol6BUiI-h5pnZnCdQLA",{"id":4258,"title":4259,"body":4260,"cover":4622,"description":4264,"draft":287,"extension":288,"meta":4623,"navigation":287,"order":4624,"path":4625,"seo":4626,"seoDescription":269,"seoTitle":269,"shelf":3962,"stem":4627,"summary":4628,"__hash__":4629},"caseStudies\u002Fcase-studies\u002Fis-webp-the-goat.md","Is WebP the GOAT?",{"type":8,"value":4261,"toc":4611},[4262,4265,4272,4276,4279,4321,4336,4341,4345,4348,4352,4359,4366,4369,4397,4408,4412,4419,4426,4430,4437,4440,4474,4477,4479,4486,4489,4491,4494,4497,4541,4544,4546],[11,4263,4264],{},"Every designer who has handed off a 4 MB hero PNG has been on the receiving end of the same dev message: \"can you export this as WebP?\" At some point WebP stopped being a format and became a personality. Convert everything, ship, feel fast.",[11,4266,4267,4268,4271],{},"So is it the GOAT? My take: ",[29,4269,4270],{},"WebP is the GOAT of defaults, not the GOAT of formats."," It's the one you can pick without thinking and almost never regret. But AVIF often beats it on photos, JPEG XL is finally back in the conversation, and honestly the biggest wins on most pages have nothing to do with which file extension you chose.",[15,4273,4275],{"id":4274},"the-case-for-the-crown","The case for the crown",[11,4277,4278],{},"WebP's résumé is genuinely strong.",[23,4280,4281,4291,4301,4311],{},[26,4282,4283,4286,4287,4290],{},[29,4284,4285],{},"Smaller than JPEG."," Google's own compression study found lossy WebP files are ",[29,4288,4289],{},"25–34% smaller"," than JPEGs at equivalent SSIM quality.",[26,4292,4293,4296,4297,4300],{},[29,4294,4295],{},"Smaller than PNG."," Google reports lossless WebP is ",[29,4298,4299],{},"26% smaller"," than PNG.",[26,4302,4303,4306,4307,4310],{},[29,4304,4305],{},"Transparency without the PNG tax."," Lossy WebP with an alpha channel is typically about ",[29,4308,4309],{},"3× smaller"," than the equivalent PNG, per Google's docs. For UI work, with product cutouts, shadows and soft-edged mockups, that's the killer feature.",[26,4312,4313,4316,4317,4320],{},[29,4314,4315],{},"It works basically everywhere."," caniuse puts WebP at about ",[29,4318,4319],{},"97%"," global support. Desktop Safari got full support in version 16, and iOS Safari in 14.",[11,4322,4323,4324,4327,4328,4331,4332,4335],{},"The real-world data backs it up. The HTTP Archive's 2024 Web Almanac measured median compression across the web and found WebP images at ",[29,4325,4326],{},"1.3 bits per pixel",", against ",[29,4329,4330],{},"2.0"," for JPEG and ",[29,4333,4334],{},"3.8"," for PNG. On the actual internet, not just in a lab, WebP is the most compact format in common use.",[103,4337,4338],{},[11,4339,4340],{},"WebP is the format you reach for when you don't have time to think. That's a compliment, and it's also the ceiling.",[15,4342,4344],{"id":4343},"the-challengers","The challengers",[11,4346,4347],{},"GOAT debates need rivals, and WebP has two good ones.",[116,4349,4351],{"id":4350},"avif-the-stronger-player-with-a-slower-warm-up","AVIF: the stronger player with a slower warm-up",[11,4353,4354,4355,4358],{},"Jake Archibald's well-known AVIF comparison is still the clearest demo I've seen. His F1 car photo at acceptable quality came out at ",[29,4356,4357],{},"74.4 kB as JPEG, 43 kB as WebP and 18.2 kB as AVIF."," On a gradient-heavy illustration, AVIF hit 12.1 kB where lossy WebP needed 26.8 kB.",[11,4360,4361,4362,4365],{},"Support isn't a blocker anymore either. caniuse lists AVIF at roughly ",[29,4363,4364],{},"96%"," global support.",[11,4367,4368],{},"So why isn't AVIF automatically the champion? Archibald lists the trade-offs himself:",[23,4370,4371,4377,4383],{},[26,4372,4373,4376],{},[29,4374,4375],{},"Encoding is slow."," At high effort settings it can take minutes per image in browser-based tools.",[26,4378,4379,4382],{},[29,4380,4381],{},"No progressive rendering."," AVIF arrives all at once. JPEG renders in passes and WebP renders top to bottom.",[26,4384,4385,4388,4389,4392,4393,4396],{},[29,4386,4387],{},"Lossless mode is weak."," In his flat illustration test, lossless AVIF was ",[29,4390,4391],{},"41.7 kB"," against ",[29,4394,4395],{},"12.9 kB"," for lossless WebP.",[11,4398,4399,4400,4403,4404,4407],{},"And here's the twist. That same Web Almanac data shows AVIF's real-world median at ",[29,4401,4402],{},"1.4 bits per pixel",", slightly ",[3414,4405,4406],{},"higher"," than WebP's 1.3, and up from about 1.0 two years earlier. Better codec on paper, not always better files in practice, because people encode it at whatever settings their pipeline defaults to.",[116,4409,4411],{"id":4410},"jpeg-xl-the-comeback-story","JPEG XL: the comeback story",[11,4413,4414,4415,4418],{},"JPEG XL got pulled from Chrome in 2022 and was written off. Then, in October 2026, the Chrome team announced that ",[29,4416,4417],{},"Chrome 155 decodes JPEG XL",", using a memory-safe Rust decoder (jxl-rs) and citing \"30–50% better compression than JPEG,\" lossless support and built-in HDR. They pointed to years of developer demand as the reason.",[11,4420,4421,4422,4425],{},"It's not a default yet. caniuse currently puts JPEG XL at roughly ",[29,4423,4424],{},"60%"," global support, with Safari still only partial. Watch it, but don't bet a launch on it.",[15,4427,4429],{"id":4428},"the-uncomfortable-truth-format-is-rarely-your-bottleneck","The uncomfortable truth: format is rarely your bottleneck",[11,4431,4432,4433,4436],{},"Here's where I get a little contrarian. Google's own guide to optimizing Largest Contentful Paint says switching to a better format such as AVIF or WebP reduces resource load time, but notes that ",[29,4434,4435],{},"load duration \"tends not to be a significant bottleneck for most sites.\""," The delay often just moves somewhere else.",[11,4438,4439],{},"What hurts more in practice:",[23,4441,4442,4452,4462,4468],{},[26,4443,4444,4447,4448,4451],{},[29,4445,4446],{},"Lazy-loading the hero."," web.dev is blunt: \"Never lazy-load your LCP image.\" Yet the 2024 Web Almanac found ",[29,4449,4450],{},"9.5%"," of mobile LCP images still use native lazy-loading.",[26,4453,4454,4457,4458,4461],{},[29,4455,4456],{},"Images being the LCP at all."," ",[29,4459,4460],{},"68%"," of mobile pages have an image as their LCP element, which makes that one image the most important file on the page.",[26,4463,4464,4467],{},[29,4465,4466],{},"Shipping one giant size to every screen."," A perfectly compressed WebP at 3000 px wide is still a 3000 px image on a phone.",[26,4469,4470,4473],{},[29,4471,4472],{},"Priority confusion."," web.dev warns that giving high fetch priority to more than one or two images makes it useless.",[11,4475,4476],{},"A 400 kB JPEG at the right size, loaded early, can beat a 150 kB WebP that's lazy-loaded behind three scripts.",[15,4478,4104],{"id":4103},[11,4480,4481,4482,4485],{},"\"Just use AVIF everywhere, it's 2026.\" Fair, and for photo-heavy sites like e-commerce, editorial or travel, a ",[1413,4483,4484],{},"picture"," element with AVIF first and WebP as the fallback is the right call. The savings on hero photography are real, and the support is there.",[11,4487,4488],{},"But a lot of teams don't control their pipeline. A CMS, an image CDN or a plugin decides the encoder settings, and the Web Almanac numbers show what happens when nobody tunes them. If your stack can do AVIF well, use it. If it can only do one thing reliably, WebP is the one I'd pick.",[15,4490,3847],{"id":3846},[11,4492,4493],{},"WebP isn't the GOAT. It's the dependable veteran who shows up every game: great support, strong compression, good transparency, decent lossless. AVIF is the more talented player who needs the right coach. JPEG XL is the comeback kid we're watching from the bench.",[11,4495,4496],{},"My checklist for handoff and builds:",[1979,4498,4499,4505,4511,4517,4523,4529,4535],{},[26,4500,4501,4504],{},[29,4502,4503],{},"Default to WebP"," for UI images, cutouts and anything with transparency.",[26,4506,4507,4510],{},[29,4508,4509],{},"Add AVIF first"," for large photographic heroes when the pipeline supports it, with WebP as fallback.",[26,4512,4513,4516],{},[29,4514,4515],{},"Keep SVG for icons and logos."," No raster format beats a clean vector for flat shapes.",[26,4518,4519,4522],{},[29,4520,4521],{},"Size before you compress."," Export the sizes the layout actually uses and serve them responsively.",[26,4524,4525,4528],{},[29,4526,4527],{},"Never lazy-load the LCP image,"," and give it priority. Only that one.",[26,4530,4531,4534],{},[29,4532,4533],{},"Check the output, not the extension."," Compare real file sizes and look at them zoomed in. A badly encoded AVIF is still a bad image.",[26,4536,4537,4540],{},[29,4538,4539],{},"Revisit JPEG XL"," once Safari and Edge catch up.",[11,4542,4543],{},"The GOAT isn't a file format. It's the habit of asking \"what does this image cost the page?\" before you export it.",[15,4545,235],{"id":234},[23,4547,4548,4555,4562,4569,4576,4583,4590,4597,4604],{},[26,4549,4550,4551],{},"Google, WebP overview: ",[65,4552,4553],{"href":4553,"rel":4554},"https:\u002F\u002Fdevelopers.google.com\u002Fspeed\u002Fwebp",[69],[26,4556,4557,4558],{},"Google, WebP compression study: ",[65,4559,4560],{"href":4560,"rel":4561},"https:\u002F\u002Fdevelopers.google.com\u002Fspeed\u002Fwebp\u002Fdocs\u002Fwebp_study",[69],[26,4563,4564,4565],{},"caniuse, WebP: ",[65,4566,4567],{"href":4567,"rel":4568},"https:\u002F\u002Fcaniuse.com\u002Fwebp",[69],[26,4570,4571,4572],{},"caniuse, AVIF: ",[65,4573,4574],{"href":4574,"rel":4575},"https:\u002F\u002Fcaniuse.com\u002Favif",[69],[26,4577,4578,4579],{},"caniuse, JPEG XL: ",[65,4580,4581],{"href":4581,"rel":4582},"https:\u002F\u002Fcaniuse.com\u002Fjpegxl",[69],[26,4584,4585,4586],{},"HTTP Archive, Web Almanac 2024, Media chapter: ",[65,4587,4588],{"href":4588,"rel":4589},"https:\u002F\u002Falmanac.httparchive.org\u002Fen\u002F2024\u002Fmedia",[69],[26,4591,4592,4593],{},"Jake Archibald, \"AVIF has landed\": ",[65,4594,4595],{"href":4595,"rel":4596},"https:\u002F\u002Fjakearchibald.com\u002F2020\u002Favif-has-landed\u002F",[69],[26,4598,4599,4600],{},"Chrome for Developers, JPEG XL in Chrome: ",[65,4601,4602],{"href":4602,"rel":4603},"https:\u002F\u002Fdeveloper.chrome.com\u002Fblog\u002Fjpeg-xl-in-chrome",[69],[26,4605,4606,4607],{},"web.dev, Optimize Largest Contentful Paint: ",[65,4608,4609],{"href":4609,"rel":4610},"https:\u002F\u002Fweb.dev\u002Farticles\u002Foptimize-lcp",[69],{"title":269,"searchDepth":270,"depth":270,"links":4612},[4613,4614,4618,4619,4620,4621],{"id":4274,"depth":270,"text":4275},{"id":4343,"depth":270,"text":4344,"children":4615},[4616,4617],{"id":4350,"depth":277,"text":4351},{"id":4410,"depth":277,"text":4411},{"id":4428,"depth":270,"text":4429},{"id":4103,"depth":270,"text":4104},{"id":3846,"depth":270,"text":3847},{"id":234,"depth":270,"text":235},"\u002Fcovers\u002Fis-webp-the-goat.webp",{},15,"\u002Fcase-studies\u002Fis-webp-the-goat",{"title":4259,"description":4264},"case-studies\u002Fis-webp-the-goat","WebP is the safest default image format on the web, but it isn't the greatest of all time, and the format matters less than the habits around it.","qrZ2Mz0MPFdXCs-DBuGL-BP4YYikjmrFqh1Ortyog80",{"id":4631,"title":4632,"body":4633,"cover":4931,"description":4637,"draft":287,"extension":288,"meta":4932,"navigation":287,"order":4933,"path":4934,"seo":4935,"seoDescription":269,"seoTitle":269,"shelf":3962,"stem":4936,"summary":4937,"__hash__":4938},"caseStudies\u002Fcase-studies\u002Fseo-maxxing.md","SEO Maxxing",{"type":8,"value":4634,"toc":4922},[4635,4638,4645,4648,4652,4655,4693,4696,4701,4705,4712,4732,4735,4738,4742,4745,4765,4772,4775,4778,4782,4785,4792,4795,4798,4800,4807,4810,4812,4815,4818,4868,4871,4873],[11,4636,4637],{},"There's a whole genre of SEO advice that reads like a gym routine for your website. Hit 2,000 words. Put the keyword in the URL, the H1, the first paragraph and the alt text. Add five kinds of schema. Get a perfect Lighthouse score. Write an llms.txt. Repeat daily.",[11,4639,4640,4641,4644],{},"That's SEO maxxing: optimizing every visible muscle and hoping the algorithm notices. My take, as a designer who builds and ships small sites: ",[29,4642,4643],{},"most of it is mewing for a robot."," On a small site, what actually moves results is boring and short: make pages worth finding, make them easy to crawl, make them not painful to use, then wait.",[11,4646,4647],{},"And I don't need to rely on my opinion here, because Google has written most of it down.",[15,4649,4651],{"id":4650},"the-myths-google-already-debunked","The myths Google already debunked",[11,4653,4654],{},"Google's own SEO Starter Guide has a list of things that sound important and mostly aren't. Straight from the docs:",[23,4656,4657,4663,4669,4675,4681,4687],{},[26,4658,4659,4662],{},[29,4660,4661],{},"Meta keywords:"," \"Google Search doesn't use the keywords meta tag.\"",[26,4664,4665,4668],{},[29,4666,4667],{},"Keywords in your domain or URL:"," they \"have hardly any effect\" beyond showing up in breadcrumbs.",[26,4670,4671,4674],{},[29,4672,4673],{},"Word count:"," \"The length of the content alone doesn't matter for ranking purposes.\"",[26,4676,4677,4680],{},[29,4678,4679],{},"Heading order:"," for Search, \"it doesn't matter if you're using them out of order.\" There's no ideal number of headings either.",[26,4682,4683,4686],{},[29,4684,4685],{},"Duplicate content penalty:"," inefficient, but \"not something that will cause a manual action.\"",[26,4688,4689,4692],{},[29,4690,4691],{},"E-E-A-T as a ranking factor:"," Google's answer to that question is literally \"No, it's not.\"",[11,4694,4695],{},"That last one surprises people. E-E-A-T (experience, expertise, authoritativeness, trust) is a framework for what good content looks like, not a dial you can turn up with an author bio widget.",[103,4697,4698],{},[11,4699,4700],{},"If your SEO plan is mostly things Google has publicly said it ignores, you don't have an SEO plan. You have a ritual.",[15,4702,4704],{"id":4703},"what-google-actually-asks-for","What Google actually asks for",[11,4706,4707,4708,4711],{},"The helpful content guidance is where the real signal is. It frames everything around ",[29,4709,4710],{},"Who, How and Why",":",[23,4713,4714,4720,4726],{},[26,4715,4716,4719],{},[29,4717,4718],{},"Who"," made this? Is authorship obvious, with bylines that lead somewhere real?",[26,4721,4722,4725],{},[29,4723,4724],{},"How"," was it made? Google even asks whether you explain how \"automation or AI-generation was used to create content.\"",[26,4727,4728,4731],{},[29,4729,4730],{},"Why"," does it exist? This is the one Google calls the most important. Is it there to help people, or \"primarily made to attract visits from search engines\"?",[11,4733,4734],{},"Their self-assessment questions are uncomfortably direct. Does the page provide \"original information, reporting, research, or analysis\"? Is it something you'd \"want to bookmark, share with a friend, or recommend\"? And my favourite: are you writing to a word count because you heard Google likes one?",[11,4736,4737],{},"For a portfolio or a small business site, this is great news. You have something big content farms don't: first-hand experience. A case study about a real project, written by the person who did it, is exactly what the guidance describes.",[15,4739,4741],{"id":4740},"speed-matters-just-not-the-way-people-think","Speed matters, just not the way people think",[11,4743,4744],{},"Here's where designers and devs over-correct. Core Web Vitals are real. Google says plainly that \"Core Web Vitals are used by our ranking systems.\" The targets, per web.dev, are:",[23,4746,4747,4753,4759],{},[26,4748,4749,4752],{},[29,4750,4751],{},"LCP"," (loading) at 2.5 seconds or less",[26,4754,4755,4758],{},[29,4756,4757],{},"INP"," (responsiveness) at 200 milliseconds or less",[26,4760,4761,4764],{},[29,4762,4763],{},"CLS"," (visual stability) at 0.1 or less",[11,4766,4767,4768,4771],{},"measured at the ",[29,4769,4770],{},"75th percentile"," of real visits, on mobile and desktop separately.",[11,4773,4774],{},"But read the next lines in the same doc. Good scores don't guarantee top rankings, and \"Google Search always seeks to show the most relevant content, even if the page experience is sub-par.\" Page experience mostly helps when lots of pages are equally helpful for a query. Google also advises against chasing perfect scores just for SEO.",[11,4776,4777],{},"So yes, fix a 6-second hero image. No, don't burn a week shaving your Lighthouse score from 94 to 100 on a site nobody can find yet.",[15,4779,4781],{"id":4780},"the-ai-era-temptation","The AI-era temptation",[11,4783,4784],{},"The newest flavour of maxxing is volume. Spin up fifty location pages, generate a blog post a day, let the model write the meta descriptions in bulk.",[11,4786,4787,4788,4791],{},"Google has a name for that: ",[29,4789,4790],{},"scaled content abuse",", \"when many pages are generated for the primary purpose of manipulating search rankings.\" Their spam policy literally uses \"using generative AI tools or other similar tools to generate many pages without adding value for users\" as an example.",[11,4793,4794],{},"The tool isn't the problem. I use AI every day to draft, outline and edit. The problem is pages that exist only because they were cheap to make.",[11,4796,4797],{},"What about optimizing for AI Overviews and AI Mode? Google's own answer is that there are \"no additional requirements to appear in AI Overviews or AI Mode, nor other special optimizations necessary.\" No special markup, no AI-specific text files. Just regular SEO fundamentals: crawlable, indexed, internally linked, content in actual text.",[15,4799,4104],{"id":4103},[11,4801,4802,4803,4806],{},"\"Technical SEO matters. Schema, sitemaps and metadata are real.\" Absolutely, and I'm not saying skip them. Structured data can make a page ",[3414,4804,4805],{},"eligible"," for rich results, and Google says it gives \"explicit clues\" about a page's meaning. A clear title and description affect whether people click. A broken robots.txt or a JavaScript-only page can make a site invisible.",[11,4808,4809],{},"But notice the wording: eligible, not guaranteed. Technical SEO is the floor that lets good content get found. It isn't a substitute for good content. Small sites tend to get the ratio backwards: twenty hours on plugins, two on the actual words.",[15,4811,3847],{"id":3846},[11,4813,4814],{},"SEO maxxing on a small site mostly means doing fewer, better things and waiting. Google itself says some changes take hours and others \"could take several months,\" and suggests waiting a few weeks before judging a change.",[11,4816,4817],{},"My checklist:",[1979,4819,4820,4826,4832,4838,4844,4850,4856,4862],{},[26,4821,4822,4825],{},[29,4823,4824],{},"Write pages only you could write."," Real projects, real process, real decisions. That's the \"original analysis\" Google asks for.",[26,4827,4828,4831],{},[29,4829,4830],{},"Make authorship obvious."," Name, role, an about page that's actually about you.",[26,4833,4834,4837],{},[29,4835,4836],{},"Nail the basics once."," Unique titles, honest descriptions, clean internal links, a sitemap, nothing important hidden behind JavaScript.",[26,4839,4840,4843],{},[29,4841,4842],{},"Fix the slow stuff that users feel."," Hero images, layout shift, laggy interactions. Aim for \"good\" at the 75th percentile, not 100.",[26,4845,4846,4849],{},[29,4847,4848],{},"Add structured data where it matches the page,"," and treat rich results as a bonus.",[26,4851,4852,4855],{},[29,4853,4854],{},"Don't scale with AI for the sake of scale."," Use it to make a page better, not to make more pages.",[26,4857,4858,4861],{},[29,4859,4860],{},"Skip the rituals."," Meta keywords, keyword-stuffed URLs, word-count targets, \"E-E-A-T scores.\"",[26,4863,4864,4867],{},[29,4865,4866],{},"Be patient."," Ship, measure in Search Console, wait weeks, then adjust.",[11,4869,4870],{},"The best SEO move I know is still the least exciting one: make something worth linking to and then don't get in its way.",[15,4872,235],{"id":234},[23,4874,4875,4882,4889,4896,4901,4908,4915],{},[26,4876,4877,4878],{},"Google Search Central, SEO Starter Guide: ",[65,4879,4880],{"href":4880,"rel":4881},"https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Ffundamentals\u002Fseo-starter-guide",[69],[26,4883,4884,4885],{},"Google Search Central, Creating helpful, reliable, people-first content: ",[65,4886,4887],{"href":4887,"rel":4888},"https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Ffundamentals\u002Fcreating-helpful-content",[69],[26,4890,4891,4892],{},"Google Search Central, Understanding page experience: ",[65,4893,4894],{"href":4894,"rel":4895},"https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fpage-experience",[69],[26,4897,4236,4898],{},[65,4899,4239],{"href":4239,"rel":4900},[69],[26,4902,4903,4904],{},"Google Search Central, Spam policies: ",[65,4905,4906],{"href":4906,"rel":4907},"https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fessentials\u002Fspam-policies",[69],[26,4909,4910,4911],{},"Google Search Central, AI features and your website: ",[65,4912,4913],{"href":4913,"rel":4914},"https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fai-features",[69],[26,4916,4917,4918],{},"Google Search Central, Intro to structured data: ",[65,4919,4920],{"href":4920,"rel":4921},"https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fstructured-data\u002Fintro-structured-data",[69],{"title":269,"searchDepth":270,"depth":270,"links":4923},[4924,4925,4926,4927,4928,4929,4930],{"id":4650,"depth":270,"text":4651},{"id":4703,"depth":270,"text":4704},{"id":4740,"depth":270,"text":4741},{"id":4780,"depth":270,"text":4781},{"id":4103,"depth":270,"text":4104},{"id":3846,"depth":270,"text":3847},{"id":234,"depth":270,"text":235},"\u002Fcovers\u002Fseo-maxxing.webp",{},16,"\u002Fcase-studies\u002Fseo-maxxing",{"title":4632,"description":4637},"case-studies\u002Fseo-maxxing","Most SEO maxxing on a small site is looksmaxxing for a robot. Google's own docs say what actually moves results, and it's mostly being useful, findable and fast enough.","n4WxP27EkeiPWO0FfXkIXoCmc9iTjJEpUMsmBabGn8I",{"id":3967,"title":3968,"body":4940,"cover":4249,"description":3973,"draft":287,"extension":288,"meta":5128,"navigation":287,"order":4251,"path":4252,"seo":5129,"seoDescription":269,"seoTitle":269,"shelf":3962,"stem":4254,"summary":4255,"__hash__":4256},{"type":8,"value":4941,"toc":5120},[4942,4944,4948,4950,4952,4956,4960,4962,4966,4968,4970,4996,5000,5002,5004,5006,5022,5024,5026,5028,5044,5046,5048,5050,5052,5054,5056,5092,5094,5096],[11,4943,3973],{},[11,4945,3976,4946,3980],{},[29,4947,3979],{},[11,4949,3983],{},[15,4951,3987],{"id":3986},[11,4953,3990,4954,3994],{},[3414,4955,3993],{},[11,4957,3997,4958,4001],{},[3414,4959,4000],{},[11,4961,4004],{},[103,4963,4964],{},[11,4965,4009],{},[15,4967,4013],{"id":4012},[11,4969,4016],{},[23,4971,4972,4976,4980,4984,4988,4992],{},[26,4973,4974,4024],{},[29,4975,4023],{},[26,4977,4978,4030],{},[29,4979,4029],{},[26,4981,4982,4036],{},[29,4983,4035],{},[26,4985,4986,4042],{},[29,4987,4041],{},[26,4989,4990,4048],{},[29,4991,4047],{},[26,4993,4994,4054],{},[29,4995,4053],{},[11,4997,4057,4998,4061],{},[29,4999,4060],{},[11,5001,4064],{},[15,5003,4068],{"id":4067},[11,5005,4071],{},[23,5007,5008,5014,5018,5020],{},[26,5009,4076,5010,4080,5012,4084],{},[29,5011,4079],{},[29,5013,4083],{},[26,5015,4087,5016,4091],{},[29,5017,4090],{},[26,5019,4094],{},[26,5021,4097],{},[11,5023,4100],{},[15,5025,4104],{"id":4103},[11,5027,4107],{},[23,5029,5030,5036,5040],{},[26,5031,5032,4115,5034,4119],{},[29,5033,4114],{},[3414,5035,4118],{},[26,5037,5038,4125],{},[29,5039,4124],{},[26,5041,5042,4131],{},[29,5043,4130],{},[11,5045,4134],{},[11,5047,4137],{},[11,5049,4140],{},[15,5051,3847],{"id":3846},[11,5053,4145],{},[11,5055,4148],{},[1979,5057,5058,5062,5066,5070,5074,5078,5082,5088],{},[26,5059,5060,4156],{},[29,5061,4155],{},[26,5063,5064,4162],{},[29,5065,4161],{},[26,5067,5068,4168],{},[29,5069,4167],{},[26,5071,5072,4174],{},[29,5073,4173],{},[26,5075,5076,4180],{},[29,5077,4179],{},[26,5079,5080,4186],{},[29,5081,4185],{},[26,5083,5084,4192,5086,4196],{},[29,5085,4191],{},[1413,5087,4195],{},[26,5089,5090,4202],{},[29,5091,4201],{},[11,5093,4205],{},[15,5095,235],{"id":234},[23,5097,5098,5105,5110,5115],{},[26,5099,4212,5100,4215,5102],{},[3414,5101,3993],{},[65,5103,4218],{"href":4218,"rel":5104},[69],[26,5106,4222,5107],{},[65,5108,4225],{"href":4225,"rel":5109},[69],[26,5111,4229,5112],{},[65,5113,4232],{"href":4232,"rel":5114},[69],[26,5116,4236,5117],{},[65,5118,4239],{"href":4239,"rel":5119},[69],{"title":269,"searchDepth":270,"depth":270,"links":5121},[5122,5123,5124,5125,5126,5127],{"id":3986,"depth":270,"text":3987},{"id":4012,"depth":270,"text":4013},{"id":4067,"depth":270,"text":4068},{"id":4103,"depth":270,"text":4104},{"id":3846,"depth":270,"text":3847},{"id":234,"depth":270,"text":235},{},{"title":3968,"description":3973},1793668321290]