[{"data":1,"prerenderedAt":4266},["ShallowReactive",2],{"all-pages":3,"articles":2869},[4,219,744,1421,2040,2487,2501,2542,2594,2649,2707,2769,2834,2843],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":6,"title":8,"description":9,"keywords":10,"slug":11,"pagetitle":12,"date":6,"tags":13,"canonicalUrl":14,"body":15,"_type":213,"_id":214,"_source":215,"_file":216,"_stem":217,"_extension":218},"/about","",false,"About UX/UI designer and developer - eveatwork.studio","Web product design and development portfolio of Eve S. Blakcori, United Kingdom.","product designer, UI developer, web designer, front-end developer, UX/UI designer","about","About",null,"https://www.eveatwork.studio/about",{"type":16,"children":17,"toc":208},"root",[18,26,31,58,65,196],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","Hi, I’m Eve – UI development lead, and design systems innovator.",{"type":19,"tag":20,"props":27,"children":28},{},[29],{"type":24,"value":30},"I help teams scale UI development, improve efficiency, and create pixel-perfect, consistent and accessible digital experiences.",{"type":19,"tag":20,"props":32,"children":33},{},[34,36,42,44,49,51,56],{"type":24,"value":35},"Currently, I work as a UI development team lead at Domino’s UK, where I lead ",{"type":19,"tag":37,"props":38,"children":39},"strong",{},[40],{"type":24,"value":41},"UI development strategy",{"type":24,"value":43},", drive ",{"type":19,"tag":37,"props":45,"children":46},{},[47],{"type":24,"value":48},"design system innovation",{"type":24,"value":50}," and manage a ",{"type":19,"tag":37,"props":52,"children":53},{},[54],{"type":24,"value":55},"scalable, high-performance",{"type":24,"value":57}," UI components library.",{"type":19,"tag":59,"props":60,"children":62},"h3",{"id":61},"what-i-do-best",[63],{"type":24,"value":64},"What I Do Best",{"type":19,"tag":66,"props":67,"children":68},"ul",{},[69,80,126,150,173],{"type":19,"tag":70,"props":71,"children":72},"li",{},[73,78],{"type":19,"tag":37,"props":74,"children":75},{},[76],{"type":24,"value":77},"UI Team Leadership",{"type":24,"value":79}," – Mentoring, setting goals, and ensuring smooth collaboration between design, product, and development teams.",{"type":19,"tag":70,"props":81,"children":82},{},[83,88,90,95,97,103,105,110,112,117,119,124],{"type":19,"tag":37,"props":84,"children":85},{},[86],{"type":24,"value":87},"Scalable UI Systems",{"type":24,"value":89}," – Managing ",{"type":19,"tag":37,"props":91,"children":92},{},[93],{"type":24,"value":94},"two 160+ component UI libraries",{"type":24,"value":96},", one for ",{"type":19,"tag":98,"props":99,"children":100},"em",{},[101],{"type":24,"value":102},"Vue 2",{"type":24,"value":104}," and one for ",{"type":19,"tag":98,"props":106,"children":107},{},[108],{"type":24,"value":109},"Vue 3",{"type":24,"value":111},", introducing ",{"type":19,"tag":37,"props":113,"children":114},{},[115],{"type":24,"value":116},"design tokens",{"type":24,"value":118},", and ",{"type":19,"tag":37,"props":120,"children":121},{},[122],{"type":24,"value":123},"improving developer experience",{"type":24,"value":125},".",{"type":19,"tag":70,"props":127,"children":128},{},[129,134,136,141,143,148],{"type":19,"tag":37,"props":130,"children":131},{},[132],{"type":24,"value":133},"Workflow Optimisation",{"type":24,"value":135}," – Implementing ",{"type":19,"tag":37,"props":137,"children":138},{},[139],{"type":24,"value":140},"Chromatic for visual testing",{"type":24,"value":142}," (saving 40+ hours/month) and ",{"type":19,"tag":37,"props":144,"children":145},{},[146],{"type":24,"value":147},"streamlining UI processes",{"type":24,"value":149}," with Notion and Azure DevOps dashboards.",{"type":19,"tag":70,"props":151,"children":152},{},[153,158,160,165,167,172],{"type":19,"tag":37,"props":154,"children":155},{},[156],{"type":24,"value":157},"Project Delivery & Management",{"type":24,"value":159}," – Leading ",{"type":19,"tag":37,"props":161,"children":162},{},[163],{"type":24,"value":164},"UI projects from planning to execution",{"type":24,"value":166},", ensuring on-time delivery while maintaining high-quality standards. Managing priorities and improving ",{"type":19,"tag":37,"props":168,"children":169},{},[170],{"type":24,"value":171},"cross-functional collaboration",{"type":24,"value":125},{"type":19,"tag":70,"props":174,"children":175},{},[176,181,183,188,190,195],{"type":19,"tag":37,"props":177,"children":178},{},[179],{"type":24,"value":180},"UI Consistency & Maintainability",{"type":24,"value":182}," – Establishing ",{"type":19,"tag":37,"props":184,"children":185},{},[186],{"type":24,"value":187},"design systems and shared UI libraries",{"type":24,"value":189}," to maintain consistency across multiple projects while ",{"type":19,"tag":37,"props":191,"children":192},{},[193],{"type":24,"value":194},"reducing technical debt and third-party dependencies",{"type":24,"value":125},{"type":19,"tag":20,"props":197,"children":198},{},[199,201,206],{"type":24,"value":200},"At the core of my work is a simple goal: I want to help teams ",{"type":19,"tag":37,"props":202,"children":203},{},[204],{"type":24,"value":205},"build better UIs",{"type":24,"value":207}," - faster, smarter, and more efficiently.",{"title":6,"searchDepth":209,"depth":209,"links":210},2,[211],{"id":61,"depth":212,"text":64},3,"markdown","content:about:index.md","content","about/index.md","about/index","md",{"_path":220,"_dir":221,"_draft":7,"_partial":7,"_locale":6,"title":222,"description":223,"keywords":224,"slug":225,"pagetitle":222,"longPageTitle":222,"date":226,"longDate":227,"serpDate":228,"tags":229,"category":233,"featured":234,"canonicalUrl":235,"projectCompany":236,"projectLink":13,"projectThumbnail":237,"projectMedia":238,"pageClassName":13,"nextProjectSlug":240,"schemaImage1x1":241,"schemaImage4x3":242,"schemaImage16x9":243,"ctaTitle":13,"ctaSubtitle":13,"ctaButtonText":13,"body":244,"_type":213,"_id":741,"_source":215,"_file":742,"_stem":743,"_extension":218},"/articles/10-things-business-leaders-need-to-know-about-website-reskinning","articles","10 Things Business Leaders Need to Know About Website Reskinning\n","Learn what website reskinning is, the benefits for your business, and how it compares to a full redesign. Discover the process, timeline, and tips for refreshing your website’s design without altering its core functionality.","Website reskinning, reskin website, website redesign vs reskin, business website reskin, website reskin benefits, reskin website process, refresh website design, website reskin guide, reskin website timeline, update website look, website design update, website reskin cost, improve website appearance, website reskin SEO impact, website reskin for small business, reskin vs redesign website, modernise website design, website UI reskin, website reskin planning, website reskin best practices","10-things-business-leaders-need-to-know-about-website-reskinning","2024-10-14","October 14th, 2024","14 Oct 2024",[230,231,232],"front-end","reskin","UI development","Questions & Answers",true,"https://www.eveatwork.studio/articles/10-things-business-leaders-need-to-know-about-website-reskinning","Eve At Work","/articles/website-reskin-101/website-reskin-101-for-business-leaders--thumbnail.png",[239],"/articles/website-reskin-101/website-reskin-101-for-business-leaders--page-hero.png","how-we-utilised-figma-variables-api-for-creating-design-tokens","/articles/website-reskin-101/website-reskin-101-for-business-leaders__1x1.png","/articles/website-reskin-101/website-reskin-101-for-business-leaders__4x3.png","/articles/website-reskin-101/website-reskin-101-for-business-leaders__16x9.png",{"type":16,"children":245,"toc":727},[246,258,263,268,275,280,303,309,314,337,343,348,354,359,412,418,423,456,461,467,472,495,501,506,512,517,550,556,568,574,579,602,608,613,618,624],{"type":19,"tag":20,"props":247,"children":248},{},[249,251,256],{"type":24,"value":250},"In today’s fast-paced digital landscape, keeping your website up-to-date is essential for maintaining a solid online presence. While a complete website redesign may seem like the go-to solution, it’s often time-consuming and costly. This is where ",{"type":19,"tag":37,"props":252,"children":253},{},[254],{"type":24,"value":255},"website reskinning",{"type":24,"value":257}," comes in—a quicker, more cost-effective way to refresh the look of your site without changing its core structure or functionality.",{"type":19,"tag":20,"props":259,"children":260},{},[261],{"type":24,"value":262},"A reskin involves updating the visual elements of your website, such as colours, fonts, and imagery, to give it a modern appearance and align it with current branding. A well-timed reskin can be a game-changer for businesses looking to enhance user experience and stay competitive.",{"type":19,"tag":20,"props":264,"children":265},{},[266],{"type":24,"value":267},"In this Q&A style post, I will answer the most commonly asked questions about website reskinning - what it is, what benefits it can provide to the business, and why it might be the perfect alternative to a complete redesign.",{"type":19,"tag":269,"props":270,"children":272},"h2",{"id":271},"_1-what-is-website-reskinning-and-how-is-it-different-from-a-redesign",[273],{"type":24,"value":274},"1. What is website reskinning, and how is it different from a redesign?",{"type":19,"tag":20,"props":276,"children":277},{},[278],{"type":24,"value":279},"Website reskinning focuses on changing a site’s appearance without altering its core structure or functionality. It’s a visual overhaul, often involving updates to colours, fonts, images, and layouts, while the site’s back-end code and content typically stay the same.",{"type":19,"tag":66,"props":281,"children":282},{},[283,293],{"type":19,"tag":70,"props":284,"children":285},{},[286,291],{"type":19,"tag":37,"props":287,"children":288},{},[289],{"type":24,"value":290},"Reskinning:",{"type":24,"value":292}," Involves aesthetic changes to give the site a fresh look.",{"type":19,"tag":70,"props":294,"children":295},{},[296,301],{"type":19,"tag":37,"props":297,"children":298},{},[299],{"type":24,"value":300},"Redesign:",{"type":24,"value":302}," Involves more profound changes to both the design and functionality, often requiring back-end adjustments, navigation reworks, and structural updates.",{"type":19,"tag":269,"props":304,"children":306},{"id":305},"_2-why-should-a-business-reskin-its-website-instead-of-redesigning-it",[307],{"type":24,"value":308},"2. Why should a business reskin its website instead of redesigning it?",{"type":19,"tag":20,"props":310,"children":311},{},[312],{"type":24,"value":313},"A website reskin is ideal when:",{"type":19,"tag":66,"props":315,"children":316},{},[317,322,327,332],{"type":19,"tag":70,"props":318,"children":319},{},[320],{"type":24,"value":321},"The site’s structure, functionality, and performance still meet business needs.",{"type":19,"tag":70,"props":323,"children":324},{},[325],{"type":24,"value":326},"The goal is to refresh the website’s appearance quickly and affordably without significant disruption.",{"type":19,"tag":70,"props":328,"children":329},{},[330],{"type":24,"value":331},"There’s a need to modernise the UI of a website while avoiding the costs and time investment of a full redesign.",{"type":19,"tag":70,"props":333,"children":334},{},[335],{"type":24,"value":336},"The focus is on improving user experience and aesthetics without rebuilding the core systems. A redesign, however, may be necessary if the site’s usability, content structure, or technology stack is outdated.",{"type":19,"tag":269,"props":338,"children":340},{"id":339},"_3-how-often-should-a-website-be-reskinned",[341],{"type":24,"value":342},"3. How often should a website be reskinned?",{"type":19,"tag":20,"props":344,"children":345},{},[346],{"type":24,"value":347},"Typically, a website should be reskinned every 3-4 years to stay current with design trends, align with evolving brand guidelines, and maintain a fresh user experience. Market changes, user feedback, and competition may also drive the need for a faster refresh.",{"type":19,"tag":269,"props":349,"children":351},{"id":350},"_4-what-elements-of-a-website-change-during-a-reskin",[352],{"type":24,"value":353},"4. What elements of a website change during a reskin?",{"type":19,"tag":20,"props":355,"children":356},{},[357],{"type":24,"value":358},"The following elements are usually updated during a reskin:",{"type":19,"tag":66,"props":360,"children":361},{},[362,372,382,392,402],{"type":19,"tag":70,"props":363,"children":364},{},[365,370],{"type":19,"tag":37,"props":366,"children":367},{},[368],{"type":24,"value":369},"Colours:",{"type":24,"value":371}," To reflect current branding or design trends.",{"type":19,"tag":70,"props":373,"children":374},{},[375,380],{"type":19,"tag":37,"props":376,"children":377},{},[378],{"type":24,"value":379},"Typography:",{"type":24,"value":381}," To improve readability or align with branding.",{"type":19,"tag":70,"props":383,"children":384},{},[385,390],{"type":19,"tag":37,"props":386,"children":387},{},[388],{"type":24,"value":389},"Images and Graphics:",{"type":24,"value":391}," Replaced or updated to match a new visual theme or style.",{"type":19,"tag":70,"props":393,"children":394},{},[395,400],{"type":19,"tag":37,"props":396,"children":397},{},[398],{"type":24,"value":399},"Website responsiveness:",{"type":24,"value":401}," To improve the usability of the website on smaller devices.",{"type":19,"tag":70,"props":403,"children":404},{},[405,410],{"type":19,"tag":37,"props":406,"children":407},{},[408],{"type":24,"value":409},"Layout:",{"type":24,"value":411}," To improve spacing, button styles, hover effects, and overall visual aesthetics without changing the website’s structure. Core elements like the content, navigation, and functionality usually remain the same.",{"type":19,"tag":269,"props":413,"children":415},{"id":414},"_5-how-long-does-a-website-reskin-typically-take",[416],{"type":24,"value":417},"5. How long does a website reskin typically take?",{"type":19,"tag":20,"props":419,"children":420},{},[421],{"type":24,"value":422},"The timeline for a website reskin depends a lot on its complexity and the project’s scope:",{"type":19,"tag":66,"props":424,"children":425},{},[426,436,446],{"type":19,"tag":70,"props":427,"children":428},{},[429,434],{"type":19,"tag":37,"props":430,"children":431},{},[432],{"type":24,"value":433},"Design Phase:",{"type":24,"value":435}," Creating and refining new visual designs typically takes 2-4 weeks, depending on the complexity of the website and the amount of stakeholder feedback required.",{"type":19,"tag":70,"props":437,"children":438},{},[439,444],{"type":19,"tag":37,"props":440,"children":441},{},[442],{"type":24,"value":443},"Development Phase:",{"type":24,"value":445}," Implementing the design changes highly depends not only on the website’s size but also on the state of the code (i.e. an existing technical debt). On average, the reskin’s development phase can take 4 to 8 weeks.",{"type":19,"tag":70,"props":447,"children":448},{},[449,454],{"type":19,"tag":37,"props":450,"children":451},{},[452],{"type":24,"value":453},"Testing Phase:",{"type":24,"value":455}," Allow 1-2 weeks for thorough testing across different browsers and devices. Larger sites or more complex branding changes will extend the timeline, while smaller sites can be tested more quickly.",{"type":19,"tag":20,"props":457,"children":458},{},[459],{"type":24,"value":460},"All of the above also depend on the overall reskin release plan. If you want to release all changes to production in one go, the timeline for the project will be shorter. However, if you want to introduce the changes gradually, this will take more time.",{"type":19,"tag":269,"props":462,"children":464},{"id":463},"_6-will-a-website-reskin-affect-seo",[465],{"type":24,"value":466},"6. Will a website reskin affect SEO?",{"type":19,"tag":20,"props":468,"children":469},{},[470],{"type":24,"value":471},"A reskin can impact SEO, both positively and negatively:",{"type":19,"tag":66,"props":473,"children":474},{},[475,485],{"type":19,"tag":70,"props":476,"children":477},{},[478,483],{"type":19,"tag":37,"props":479,"children":480},{},[481],{"type":24,"value":482},"Positive Impact:",{"type":24,"value":484}," A reskin that improves mobile responsiveness, page speed, or user experience can positively affect SEO rankings.",{"type":19,"tag":70,"props":486,"children":487},{},[488,493],{"type":19,"tag":37,"props":489,"children":490},{},[491],{"type":24,"value":492},"Negative Impact:",{"type":24,"value":494}," Any unintentional HTML structure, metadata, or site speed changes could harm rankings. SEO best practices should be followed throughout the reskinning process to mitigate the risks, and performance should be monitored post-launch.",{"type":19,"tag":269,"props":496,"children":498},{"id":497},"_7-can-a-website-reskin-be-done-without-changing-the-existing-back-end-or-cms",[499],{"type":24,"value":500},"7. Can a website reskin be done without changing the existing back-end or CMS?",{"type":19,"tag":20,"props":502,"children":503},{},[504],{"type":24,"value":505},"A reskin focuses on the front end (visual elements), leaving the back end and CMS functionality unchanged. This makes reskinning an efficient option for businesses that want to refresh their design while keeping their content management process intact.",{"type":19,"tag":269,"props":507,"children":509},{"id":508},"_8-what-are-the-costs-involved-in-reskinning-a-website",[510],{"type":24,"value":511},"8. What are the costs involved in reskinning a website?",{"type":19,"tag":20,"props":513,"children":514},{},[515],{"type":24,"value":516},"The cost of reskinning a website varies depending on factors like:",{"type":19,"tag":66,"props":518,"children":519},{},[520,530,540],{"type":19,"tag":70,"props":521,"children":522},{},[523,528],{"type":19,"tag":37,"props":524,"children":525},{},[526],{"type":24,"value":527},"Website Size:",{"type":24,"value":529}," Larger sites with more pages require more design and development work.",{"type":19,"tag":70,"props":531,"children":532},{},[533,538],{"type":19,"tag":37,"props":534,"children":535},{},[536],{"type":24,"value":537},"Custom Design Work:",{"type":24,"value":539}," Custom designs tailored to a company’s needs will be more expensive than off-the-shelf templates.",{"type":19,"tag":70,"props":541,"children":542},{},[543,548],{"type":19,"tag":37,"props":544,"children":545},{},[546],{"type":24,"value":547},"Hiring Professional Designers or Agencies:",{"type":24,"value":549}," Outsourcing the reskin to a professional team will incur higher costs but may result in better quality. On average, reskinning costs can range from a few thousand pounds for a small site to higher amounts for more complex projects with larger codebases and custom designs.",{"type":19,"tag":269,"props":551,"children":553},{"id":552},"_9-will-a-website-be-down-during-the-reskinning-deployment-process",[554],{"type":24,"value":555},"9. Will a website be down during the reskinning deployment process?",{"type":19,"tag":20,"props":557,"children":558},{},[559,561,566],{"type":24,"value":560},"In most cases, downtime can be minimised or even avoided during a reskin deployment to production. A ",{"type":19,"tag":37,"props":562,"children":563},{},[564],{"type":24,"value":565},"staging environment",{"type":24,"value":567}," allows the new design to be tested and refined without affecting the live site. Once the reskin is ready, the new design can be deployed with minimal disruption. Deploying changes during off-peak hours or using strategies like blue-green deployment can minimise downtime.",{"type":19,"tag":269,"props":569,"children":571},{"id":570},"_10-how-will-users-be-affected-by-a-website-reskin",[572],{"type":24,"value":573},"10. How will users be affected by a website reskin?",{"type":19,"tag":20,"props":575,"children":576},{},[577],{"type":24,"value":578},"A well-executed reskin should enhance the user experience by delivering a more visually appealing and modern interface without disrupting users’ interaction with the site. However, sudden or drastic design changes may confuse regular users, so it’s important to:",{"type":19,"tag":66,"props":580,"children":581},{},[582,587,592,597],{"type":19,"tag":70,"props":583,"children":584},{},[585],{"type":24,"value":586},"Introduce changes gradually, especially on sites with a larger number of visitors.",{"type":19,"tag":70,"props":588,"children":589},{},[590],{"type":24,"value":591},"Maintain consistency in key UI elements.",{"type":19,"tag":70,"props":593,"children":594},{},[595],{"type":24,"value":596},"Ensure usability testing is conducted to confirm that users can easily navigate the refreshed design.",{"type":19,"tag":70,"props":598,"children":599},{},[600],{"type":24,"value":601},"Communicate the changes to users beforehand to reduce confusion or resistance to the new look.",{"type":19,"tag":269,"props":603,"children":605},{"id":604},"summary",[606],{"type":24,"value":607},"Summary",{"type":19,"tag":20,"props":609,"children":610},{},[611],{"type":24,"value":612},"In this post, I answered business leaders’ or owners’ most commonly asked questions about website reskinning. To summarise, reskinning offers businesses a practical and efficient way to modernise their online presence without a complete redesign. By focusing on visual updates, reskinning can help improve user experience, align your site with current branding, and boost engagement while maintaining your website’s core structure and functionality.",{"type":19,"tag":20,"props":614,"children":615},{},[616],{"type":24,"value":617},"Whether you want to refresh your website’s look, improve performance, or stay competitive in a fast-evolving digital world, I hope this post helps you make informed decisions for your business.",{"type":19,"tag":269,"props":619,"children":621},{"id":620},"glossary-of-terms",[622],{"type":24,"value":623},"Glossary of Terms",{"type":19,"tag":66,"props":625,"children":626},{},[627,637,647,657,667,677,687,697,707,717],{"type":19,"tag":70,"props":628,"children":629},{},[630,635],{"type":19,"tag":37,"props":631,"children":632},{},[633],{"type":24,"value":634},"Website Reskinning:",{"type":24,"value":636}," The process of updating the visual design of a website, such as colours, fonts, images, and layout, without changing its core functionality or structure.",{"type":19,"tag":70,"props":638,"children":639},{},[640,645],{"type":19,"tag":37,"props":641,"children":642},{},[643],{"type":24,"value":644},"Website Redesign:",{"type":24,"value":646}," A comprehensive overhaul of a website’s design and functionality, often involving changes to the back end, structure, navigation, and user experience.",{"type":19,"tag":70,"props":648,"children":649},{},[650,655],{"type":19,"tag":37,"props":651,"children":652},{},[653],{"type":24,"value":654},"CMS (Content Management System):",{"type":24,"value":656}," A software platform used to manage, create, and modify digital content on a website without needing to write code. Examples include WordPress, Joomla, and Drupal.",{"type":19,"tag":70,"props":658,"children":659},{},[660,665],{"type":19,"tag":37,"props":661,"children":662},{},[663],{"type":24,"value":664},"User Experience (UX):",{"type":24,"value":666}," Refers to the overall experience a person has when interacting with a website or digital product, including ease of use, accessibility, and how intuitive the design is.",{"type":19,"tag":70,"props":668,"children":669},{},[670,675],{"type":19,"tag":37,"props":671,"children":672},{},[673],{"type":24,"value":674},"Visual Elements:",{"type":24,"value":676}," The components of a website’s design that are visible to users, such as colours, typography, images, buttons, and layout.",{"type":19,"tag":70,"props":678,"children":679},{},[680,685],{"type":19,"tag":37,"props":681,"children":682},{},[683],{"type":24,"value":684},"Responsive Design:",{"type":24,"value":686}," A design approach that ensures a website’s layout and content adapts to different screen sizes and devices, such as smartphones, tablets, and desktop computers.",{"type":19,"tag":70,"props":688,"children":689},{},[690,695],{"type":19,"tag":37,"props":691,"children":692},{},[693],{"type":24,"value":694},"Staging Environment:",{"type":24,"value":696}," A testing version of a website where changes can be made and reviewed before they go live. It mirrors the live website but is not publicly accessible.",{"type":19,"tag":70,"props":698,"children":699},{},[700,705],{"type":19,"tag":37,"props":701,"children":702},{},[703],{"type":24,"value":704},"Blue-Green Deployment:",{"type":24,"value":706}," A deployment strategy that maintains two identical environments (blue and green). The live site runs in one environment while changes are made in another. When the changes are ready, traffic is switched to the updated environment.",{"type":19,"tag":70,"props":708,"children":709},{},[710,715],{"type":19,"tag":37,"props":711,"children":712},{},[713],{"type":24,"value":714},"SEO (Search Engine Optimisation):",{"type":24,"value":716}," Improving a website’s visibility on search engines like Google. This involves optimising elements such as keywords, content, metadata, and website structure to improve search rankings.",{"type":19,"tag":70,"props":718,"children":719},{},[720,725],{"type":19,"tag":37,"props":721,"children":722},{},[723],{"type":24,"value":724},"Technical Debt:",{"type":24,"value":726}," Refers to the concept of taking shortcuts in the development process that may lead to future complications. It often results from outdated code or systems that require extra time and resources to address in future updates.",{"title":6,"searchDepth":209,"depth":209,"links":728},[729,730,731,732,733,734,735,736,737,738,739,740],{"id":271,"depth":209,"text":274},{"id":305,"depth":209,"text":308},{"id":339,"depth":209,"text":342},{"id":350,"depth":209,"text":353},{"id":414,"depth":209,"text":417},{"id":463,"depth":209,"text":466},{"id":497,"depth":209,"text":500},{"id":508,"depth":209,"text":511},{"id":552,"depth":209,"text":555},{"id":570,"depth":209,"text":573},{"id":604,"depth":209,"text":607},{"id":620,"depth":209,"text":623},"content:articles:10-things-business-leaders-need-to-know-about-website-reskinning:index.md","articles/10-things-business-leaders-need-to-know-about-website-reskinning/index.md","articles/10-things-business-leaders-need-to-know-about-website-reskinning/index",{"_path":745,"_dir":221,"_draft":7,"_partial":7,"_locale":6,"title":746,"description":747,"keywords":748,"slug":749,"pagetitle":746,"longPageTitle":746,"date":750,"longDate":751,"serpDate":752,"tags":753,"category":754,"featured":234,"canonicalUrl":755,"projectCompany":756,"projectLink":13,"projectThumbnail":757,"projectMedia":758,"pageClassName":13,"nextProjectSlug":760,"schemaImage1x1":759,"schemaImage4x3":759,"schemaImage16x9":759,"ctaTitle":761,"ctaSubtitle":762,"ctaButtonText":763,"ctaButtonURL":220,"body":764,"_type":213,"_id":1418,"_source":215,"_file":1419,"_stem":1420,"_extension":218},"/articles/how-do-you-reskin-a-website","From Outdated to Modern UI: How We Reskinned a Legacy Domino's Website\n","How do you reskin a website? A closer look at Domino's legacy website reskin project - the process, ups, downs and overall result","product design case study, UI development case study, web design case study, front end development case study","how-do-you-reskin-a-website","2022-04-20","April 20th, 2022","20 Apr 2022",[230,231,232],"Case study","https://www.eveatwork.studio/articles/how-do-you-reskin-a-website","Domino's","/articles/dominos-reskin.mp4",[759],"/articles/side-by-side.png","hult-international-svg-animations","Related article","10 Things Business Leaders Need to Know About Website Reskinning","Read the article",{"type":16,"children":765,"toc":1401},[766,771,782,787,805,810,815,821,826,849,861,867,872,884,902,908,914,919,924,937,943,948,953,976,981,993,999,1004,1009,1014,1026,1032,1037,1042,1055,1060,1072,1078,1083,1111,1116,1128,1134,1140,1145,1150,1155,1165,1171,1176,1181,1200,1205,1210,1220,1230,1234,1239,1244,1249,1254,1258],{"type":19,"tag":20,"props":767,"children":768},{},[769],{"type":24,"value":770},"Just before the pandemic shifted us all into remote work, our team began planning a reskin project for Domino’s UK website.",{"type":19,"tag":20,"props":772,"children":773},{},[774,776,780],{"type":24,"value":775},"A ",{"type":19,"tag":37,"props":777,"children":778},{},[779],{"type":24,"value":231},{"type":24,"value":781}," is essentially a user interface (UI) refresh of the customer-facing side of a website.",{"type":19,"tag":20,"props":783,"children":784},{},[785],{"type":24,"value":786},"The process looks something like this:",{"type":19,"tag":66,"props":788,"children":789},{},[790,795,800],{"type":19,"tag":70,"props":791,"children":792},{},[793],{"type":24,"value":794},"Start with an existing, well-established website (in our case, about 8 years old).",{"type":19,"tag":70,"props":796,"children":797},{},[798],{"type":24,"value":799},"Work from a polished design vision provided by the creative team.",{"type":19,"tag":70,"props":801,"children":802},{},[803],{"type":24,"value":804},"Transition from the current look to the new one as smoothly as possible, without disrupting the customer experience or business performance.",{"type":19,"tag":20,"props":806,"children":807},{},[808],{"type":24,"value":809},"This last point was especially important. Domino’s is one of the most popular pizza brands in the UK, and even subtle changes in the UI can influence customer behaviour. For example, something as simple as adjusting the style of a call-to-action button could reduce clicks. That’s why careful planning and incremental updates were crucial.",{"type":19,"tag":20,"props":811,"children":812},{},[813],{"type":24,"value":814},"Having spent months in both planning and implementation, I can say with confidence that reskinning a legacy website is a complex undertaking.",{"type":19,"tag":269,"props":816,"children":818},{"id":817},"key-considerations",[819],{"type":24,"value":820},"Key Considerations",{"type":19,"tag":20,"props":822,"children":823},{},[824],{"type":24,"value":825},"Several challenges shaped our approach:",{"type":19,"tag":66,"props":827,"children":828},{},[829,834,839,844],{"type":19,"tag":70,"props":830,"children":831},{},[832],{"type":24,"value":833},"The project was a live system, with multiple development teams continuously adding features, backend logic, and UI updates.",{"type":19,"tag":70,"props":835,"children":836},{},[837],{"type":24,"value":838},"Some of the new designs required significant structural HTML changes.",{"type":19,"tag":70,"props":840,"children":841},{},[842],{"type":24,"value":843},"The codebase was based on older technologies and practices - layouts built with CSS tables, floats, and absolute positioning, with many fixed-width elements. Even small updates could cascade into widespread adjustments.",{"type":19,"tag":70,"props":845,"children":846},{},[847],{"type":24,"value":848},"UI components weren’t standardised, so the same element often appeared hundreds of times across the codebase. This meant even small changes could turn into time-consuming tasks.",{"type":19,"tag":20,"props":850,"children":851},{},[852,854,859],{"type":24,"value":853},"One might ask: why not rebuild from scratch with modern technologies and practices? The answer lies in customer trust. For a brand with such a loyal customer base, dramatic visual changes can disrupt the user experience and even affect trust in the platform. The reskin served as a ",{"type":19,"tag":37,"props":855,"children":856},{},[857],{"type":24,"value":858},"bridge",{"type":24,"value":860}," between the old and the upcoming fully re-platformed website.",{"type":19,"tag":269,"props":862,"children":864},{"id":863},"our-approach",[865],{"type":24,"value":866},"Our Approach",{"type":19,"tag":20,"props":868,"children":869},{},[870],{"type":24,"value":871},"This was the first reskin of this scale for most of the team. Domino’s receives a very high volume of daily visitors, which made the work both challenging and rewarding.",{"type":19,"tag":20,"props":873,"children":874},{},[875,877,882],{"type":24,"value":876},"We adopted a ",{"type":19,"tag":37,"props":878,"children":879},{},[880],{"type":24,"value":881},"phased, incremental approach",{"type":24,"value":883},":",{"type":19,"tag":66,"props":885,"children":886},{},[887,892,897],{"type":19,"tag":70,"props":888,"children":889},{},[890],{"type":24,"value":891},"A small team of one product owner, one designer, and two developers started the project, with QA joining later.",{"type":19,"tag":70,"props":893,"children":894},{},[895],{"type":24,"value":896},"The work was divided into five phases, each focusing on specific UI updates - such as colours, spacing, icons, or button styles.",{"type":19,"tag":70,"props":898,"children":899},{},[900],{"type":24,"value":901},"Incremental releases allowed us to gradually introduce changes, minimising disruption for customers.",{"type":19,"tag":269,"props":903,"children":905},{"id":904},"project-phases",[906],{"type":24,"value":907},"Project Phases",{"type":19,"tag":59,"props":909,"children":911},{"id":910},"phase-1-testing-the-ground",[912],{"type":24,"value":913},"Phase 1 – Testing the Ground",{"type":19,"tag":20,"props":915,"children":916},{},[917],{"type":24,"value":918},"This phase focused on preparation and exploration. We checked the codebase, updated outdated NPM packages, and created a file structure for all upcoming phases.",{"type":19,"tag":20,"props":920,"children":921},{},[922],{"type":24,"value":923},"For the customer-facing side, we introduced one small change: updating the primary and secondary colours. The change was intentionally minimal and went completely unnoticed by most visitors. That was fine - the main objective was to understand the legacy system and identify what to look out for in future stages.",{"type":19,"tag":20,"props":925,"children":926},{},[927],{"type":19,"tag":98,"props":928,"children":929},{},[930,935],{"type":19,"tag":37,"props":931,"children":932},{},[933],{"type":24,"value":934},"Release date",{"type":24,"value":936}," – 10/2020",{"type":19,"tag":59,"props":938,"children":940},{"id":939},"phase-2-brightening-the-experience",[941],{"type":24,"value":942},"Phase 2 – Brightening the Experience",{"type":19,"tag":20,"props":944,"children":945},{},[946],{"type":24,"value":947},"Before this release, the website relied heavily on dark tones - grey navigation, black menu cards, and navy backgrounds.",{"type":19,"tag":20,"props":949,"children":950},{},[951],{"type":24,"value":952},"In this phase, we significantly brightened the site:",{"type":19,"tag":66,"props":954,"children":955},{},[956,961,966,971],{"type":19,"tag":70,"props":957,"children":958},{},[959],{"type":24,"value":960},"Navigation, cards, and backgrounds were lightened.",{"type":19,"tag":70,"props":962,"children":963},{},[964],{"type":24,"value":965},"Shadows were introduced for cards, helping them stand out from the background.",{"type":19,"tag":70,"props":967,"children":968},{},[969],{"type":24,"value":970},"Alignment and spacing issues were addressed across the site, giving elements more breathing space.",{"type":19,"tag":70,"props":972,"children":973},{},[974],{"type":24,"value":975},"Several PNG icons were replaced with vectors for sharper visuals.",{"type":19,"tag":20,"props":977,"children":978},{},[979],{"type":24,"value":980},"From a user perspective, the change felt subtle, but on closer inspection, pages were noticeably cleaner, brighter, and more consistent. For the team, this was a big milestone - our first visible transformation of the site.",{"type":19,"tag":20,"props":982,"children":983},{},[984],{"type":19,"tag":98,"props":985,"children":986},{},[987,991],{"type":19,"tag":37,"props":988,"children":989},{},[990],{"type":24,"value":934},{"type":24,"value":992}," – 02/2021",{"type":19,"tag":59,"props":994,"children":996},{"id":995},"phase-3-icon-overhaul",[997],{"type":24,"value":998},"Phase 3 – Icon Overhaul",{"type":19,"tag":20,"props":1000,"children":1001},{},[1002],{"type":24,"value":1003},"After Phase 2, we realised our planned phases were quite large. We discussed breaking them into smaller increments, but because many design elements were interdependent, it wasn’t practical.",{"type":19,"tag":20,"props":1005,"children":1006},{},[1007],{"type":24,"value":1008},"Phase 3 focused on icons. Previously, the site used a mix of PNG sprites and Font Awesome. We consolidated these into a modern SVG system, which allowed for scalability and consistent quality.",{"type":19,"tag":20,"props":1010,"children":1011},{},[1012],{"type":24,"value":1013},"We also introduced ribbon titles to certain pages, adding a touch of playfulness that tied nicely with printed marketing materials.",{"type":19,"tag":20,"props":1015,"children":1016},{},[1017],{"type":19,"tag":98,"props":1018,"children":1019},{},[1020,1024],{"type":19,"tag":37,"props":1021,"children":1022},{},[1023],{"type":24,"value":934},{"type":24,"value":1025}," – 03/2021",{"type":19,"tag":59,"props":1027,"children":1029},{"id":1028},"phase-4-completing-the-icon-work",[1030],{"type":24,"value":1031},"Phase 4 – Completing the Icon Work",{"type":19,"tag":20,"props":1033,"children":1034},{},[1035],{"type":24,"value":1036},"This phase turned out to be the most difficult. We continued migrating icons to the new SVG system but also updated several global elements.",{"type":19,"tag":20,"props":1038,"children":1039},{},[1040],{"type":24,"value":1041},"Key changes included:",{"type":19,"tag":66,"props":1043,"children":1044},{},[1045,1050],{"type":19,"tag":70,"props":1046,"children":1047},{},[1048],{"type":24,"value":1049},"Sub-navigation updates on the menu and checkout pages.",{"type":19,"tag":70,"props":1051,"children":1052},{},[1053],{"type":24,"value":1054},"A new, darker header style.",{"type":19,"tag":20,"props":1056,"children":1057},{},[1058],{"type":24,"value":1059},"Because these updates touched so many areas of the site, we encountered numerous unexpected issues. Still, the team stayed motivated, keeping spirits up with humour even as we worked through setbacks.",{"type":19,"tag":20,"props":1061,"children":1062},{},[1063],{"type":19,"tag":98,"props":1064,"children":1065},{},[1066,1070],{"type":19,"tag":37,"props":1067,"children":1068},{},[1069],{"type":24,"value":934},{"type":24,"value":1071}," – 04/2021",{"type":19,"tag":59,"props":1073,"children":1075},{"id":1074},"phase-5-final-refinements",[1076],{"type":24,"value":1077},"Phase 5 – Final Refinements",{"type":19,"tag":20,"props":1079,"children":1080},{},[1081],{"type":24,"value":1082},"The last phase was all about polishing and consistency:",{"type":19,"tag":66,"props":1084,"children":1085},{},[1086,1091,1096,1101,1106],{"type":19,"tag":70,"props":1087,"children":1088},{},[1089],{"type":24,"value":1090},"Rounded buttons for a modern look.",{"type":19,"tag":70,"props":1092,"children":1093},{},[1094],{"type":24,"value":1095},"Cleaned-up dialogues and modals.",{"type":19,"tag":70,"props":1097,"children":1098},{},[1099],{"type":24,"value":1100},"Layout refinements across pages.",{"type":19,"tag":70,"props":1102,"children":1103},{},[1104],{"type":24,"value":1105},"Final designs for promotional cards.",{"type":19,"tag":70,"props":1107,"children":1108},{},[1109],{"type":24,"value":1110},"Navigation updates with a white background and clearer fulfilment and cart CTAs.",{"type":19,"tag":20,"props":1112,"children":1113},{},[1114],{"type":24,"value":1115},"The knowledge that this was the final phase kept the team energised. That said, every time we spotted a missed UI element, we joked about an imaginary “Phase 6.”",{"type":19,"tag":20,"props":1117,"children":1118},{},[1119],{"type":19,"tag":98,"props":1120,"children":1121},{},[1122,1126],{"type":19,"tag":37,"props":1123,"children":1124},{},[1125],{"type":24,"value":934},{"type":24,"value":1127}," – 06/2021",{"type":19,"tag":269,"props":1129,"children":1131},{"id":1130},"challenges-and-lessons-learned",[1132],{"type":24,"value":1133},"Challenges and Lessons Learned",{"type":19,"tag":59,"props":1135,"children":1137},{"id":1136},"legacy-code-and-structure",[1138],{"type":24,"value":1139},"Legacy Code and Structure",{"type":19,"tag":20,"props":1141,"children":1142},{},[1143],{"type":24,"value":1144},"The CSS and HTML were organised in a way that made incremental updates more complex. For example, the same styles were sometimes applied to unrelated components, and we often found duplicate templates with only minor variations.",{"type":19,"tag":20,"props":1146,"children":1147},{},[1148],{"type":24,"value":1149},"To improve maintainability, we reorganised CSS using the BEM methodology, grouping component styles more logically. The project was already using SCSS, which made this transition smoother.",{"type":19,"tag":20,"props":1151,"children":1152},{},[1153],{"type":24,"value":1154},"Still, due to the scope and timeline, we couldn’t fully refactor the HTML. Updating the same copy-pasted code across different areas became repetitive and time-consuming.",{"type":19,"tag":20,"props":1156,"children":1157},{},[1158,1163],{"type":19,"tag":37,"props":1159,"children":1160},{},[1161],{"type":24,"value":1162},"Lesson:",{"type":24,"value":1164}," Code organisation is best addressed early in a project. Following best practices from the start ensures scalability and reduces technical debt.",{"type":19,"tag":59,"props":1166,"children":1168},{"id":1167},"source-control-and-qa-process",[1169],{"type":24,"value":1170},"Source Control and QA Process",{"type":19,"tag":20,"props":1172,"children":1173},{},[1174],{"type":24,"value":1175},"Initially, only two developers worked on the reskin, with QA joining later. By then, several phases were already underway, creating challenges with bug fixes overlapping active development.",{"type":19,"tag":20,"props":1177,"children":1178},{},[1179],{"type":24,"value":1180},"The process looked like this:",{"type":19,"tag":1182,"props":1183,"children":1184},"ol",{},[1185,1190,1195],{"type":19,"tag":70,"props":1186,"children":1187},{},[1188],{"type":24,"value":1189},"QA found a bug in Phase 2.",{"type":19,"tag":70,"props":1191,"children":1192},{},[1193],{"type":24,"value":1194},"We fixed it in Phase 2, then merged it into Phase 3 and Phase 4.",{"type":19,"tag":70,"props":1196,"children":1197},{},[1198],{"type":24,"value":1199},"Another bug was found, and the cycle repeated.",{"type":19,"tag":20,"props":1201,"children":1202},{},[1203],{"type":24,"value":1204},"Because fixes overlapped with in-progress work, regressions often crept in. We frequently found ourselves redoing work we thought was complete. Phase 4, in particular, was challenging due to regressions and rework.",{"type":19,"tag":20,"props":1206,"children":1207},{},[1208],{"type":24,"value":1209},"By contrast, Phase 5 - larger in scope - went much more smoothly, because QA was fully engaged alongside development. Bugs were caught early and resolved before becoming regressions.",{"type":19,"tag":20,"props":1211,"children":1212},{},[1213,1218],{"type":19,"tag":37,"props":1214,"children":1215},{},[1216],{"type":24,"value":1217},"Lesson 1:",{"type":24,"value":1219}," Engage the whole team - including QA - from day one. Parallel testing prevents regressions and saves significant time later.",{"type":19,"tag":20,"props":1221,"children":1222},{},[1223,1228],{"type":19,"tag":37,"props":1224,"children":1225},{},[1226],{"type":24,"value":1227},"Lesson 2:",{"type":24,"value":1229}," If resources are limited, structuring work into isolated sets of files or branches for each phase can help reduce conflicts.",{"type":19,"tag":269,"props":1231,"children":1232},{"id":604},[1233],{"type":24,"value":607},{"type":19,"tag":20,"props":1235,"children":1236},{},[1237],{"type":24,"value":1238},"Despite the challenges, the reskin project achieved its goal: creating a smoother bridge between the legacy Domino’s website and the upcoming re-platform.",{"type":19,"tag":20,"props":1240,"children":1241},{},[1242],{"type":24,"value":1243},"The updated UI aligned more closely with modern design expectations while maintaining customer trust and engagement. The project also gave the team valuable experience in phased rollouts, legacy code management, and collaboration under constraints.",{"type":19,"tag":20,"props":1245,"children":1246},{},[1247],{"type":24,"value":1248},"Most importantly, it set the stage for the next chapter: introducing Vue.js, Storybook, headless CMS, and microservices into the Domino’s platform.",{"type":19,"tag":20,"props":1250,"children":1251},{},[1252],{"type":24,"value":1253},"Thank you for reading, and I look forward to sharing more insights in future articles.",{"type":19,"tag":269,"props":1255,"children":1256},{"id":620},[1257],{"type":24,"value":623},{"type":19,"tag":66,"props":1259,"children":1260},{},[1261,1271,1281,1291,1301,1311,1321,1331,1341,1351,1361,1371,1381,1391],{"type":19,"tag":70,"props":1262,"children":1263},{},[1264,1269],{"type":19,"tag":37,"props":1265,"children":1266},{},[1267],{"type":24,"value":1268},"UI (User Interface):",{"type":24,"value":1270}," The visual and interactive elements of a website or application that users engage with.",{"type":19,"tag":70,"props":1272,"children":1273},{},[1274,1279],{"type":19,"tag":37,"props":1275,"children":1276},{},[1277],{"type":24,"value":1278},"CTA (Call-to-Action):",{"type":24,"value":1280}," A button or link designed to encourage a specific user action (e.g., “Order Now”).",{"type":19,"tag":70,"props":1282,"children":1283},{},[1284,1289],{"type":19,"tag":37,"props":1285,"children":1286},{},[1287],{"type":24,"value":1288},"HTML (Hypertext Markup Language):",{"type":24,"value":1290}," The standard language used to structure content on the web.",{"type":19,"tag":70,"props":1292,"children":1293},{},[1294,1299],{"type":19,"tag":37,"props":1295,"children":1296},{},[1297],{"type":24,"value":1298},"CSS (Cascading Style Sheets):",{"type":24,"value":1300}," A stylesheet language used to control the design, layout, and presentation of HTML elements.",{"type":19,"tag":70,"props":1302,"children":1303},{},[1304,1309],{"type":19,"tag":37,"props":1305,"children":1306},{},[1307],{"type":24,"value":1308},"SCSS (Sassy CSS):",{"type":24,"value":1310}," A CSS preprocessor that adds features like variables and nesting for easier stylesheet management.",{"type":19,"tag":70,"props":1312,"children":1313},{},[1314,1319],{"type":19,"tag":37,"props":1315,"children":1316},{},[1317],{"type":24,"value":1318},"BEM (Block, Element, Modifier):",{"type":24,"value":1320}," A methodology for naming and organising CSS classes in a consistent and scalable way.",{"type":19,"tag":70,"props":1322,"children":1323},{},[1324,1329],{"type":19,"tag":37,"props":1325,"children":1326},{},[1327],{"type":24,"value":1328},"NPM (Node Package Manager):",{"type":24,"value":1330}," A tool used to manage JavaScript libraries and dependencies in a project.",{"type":19,"tag":70,"props":1332,"children":1333},{},[1334,1339],{"type":19,"tag":37,"props":1335,"children":1336},{},[1337],{"type":24,"value":1338},"SVG (Scalable Vector Graphics):",{"type":24,"value":1340}," A file format for vector images that can scale to any size without losing quality.",{"type":19,"tag":70,"props":1342,"children":1343},{},[1344,1349],{"type":19,"tag":37,"props":1345,"children":1346},{},[1347],{"type":24,"value":1348},"PNG (Portable Network Graphics):",{"type":24,"value":1350}," A raster image format commonly used for web graphics.",{"type":19,"tag":70,"props":1352,"children":1353},{},[1354,1359],{"type":19,"tag":37,"props":1355,"children":1356},{},[1357],{"type":24,"value":1358},"Font Awesome:",{"type":24,"value":1360}," A popular library of pre-built icons.",{"type":19,"tag":70,"props":1362,"children":1363},{},[1364,1369],{"type":19,"tag":37,"props":1365,"children":1366},{},[1367],{"type":24,"value":1368},"QA (Quality Assurance):",{"type":24,"value":1370}," The process of testing software to ensure it works correctly and meets requirements.",{"type":19,"tag":70,"props":1372,"children":1373},{},[1374,1379],{"type":19,"tag":37,"props":1375,"children":1376},{},[1377],{"type":24,"value":1378},"Regression:",{"type":24,"value":1380}," A bug that reappears after previously being fixed, often caused by later changes in the codebase.",{"type":19,"tag":70,"props":1382,"children":1383},{},[1384,1389],{"type":19,"tag":37,"props":1385,"children":1386},{},[1387],{"type":24,"value":1388},"Source Control:",{"type":24,"value":1390}," A system for managing changes to code (e.g., Git).",{"type":19,"tag":70,"props":1392,"children":1393},{},[1394,1399],{"type":19,"tag":37,"props":1395,"children":1396},{},[1397],{"type":24,"value":1398},"Re-platforming:",{"type":24,"value":1400}," Rebuilding or migrating a website onto a modern technology stack while maintaining its functionality.",{"title":6,"searchDepth":209,"depth":209,"links":1402},[1403,1404,1405,1412,1416,1417],{"id":817,"depth":209,"text":820},{"id":863,"depth":209,"text":866},{"id":904,"depth":209,"text":907,"children":1406},[1407,1408,1409,1410,1411],{"id":910,"depth":212,"text":913},{"id":939,"depth":212,"text":942},{"id":995,"depth":212,"text":998},{"id":1028,"depth":212,"text":1031},{"id":1074,"depth":212,"text":1077},{"id":1130,"depth":209,"text":1133,"children":1413},[1414,1415],{"id":1136,"depth":212,"text":1139},{"id":1167,"depth":212,"text":1170},{"id":604,"depth":209,"text":607},{"id":620,"depth":209,"text":623},"content:articles:how-do-you-reskin-a-website:index.md","articles/how-do-you-reskin-a-website/index.md","articles/how-do-you-reskin-a-website/index",{"_path":1422,"_dir":221,"_draft":7,"_partial":7,"_locale":6,"title":1423,"description":1424,"keywords":1425,"slug":240,"pagetitle":1426,"longPageTitle":1426,"date":1427,"longDate":1428,"serpDate":1429,"tags":1430,"category":754,"featured":234,"canonicalUrl":1433,"projectCompany":756,"projectLink":13,"projectThumbnail":1434,"projectMedia":1435,"pageClassName":13,"nextProjectSlug":749,"schemaImage1x1":1437,"schemaImage4x3":1438,"schemaImage16x9":1439,"ctaTitle":13,"ctaSubtitle":13,"ctaButtonText":13,"body":1440,"_type":213,"_id":2037,"_source":215,"_file":2038,"_stem":2039,"_extension":218},"/articles/how-we-utilised-figma-variables-api-for-creating-design-tokens","How We Utilised Figma Variables API for UI Development at Domino's\n","Discover how Domino's streamlined UI consistency and design token generation by leveraging the Figma Variables API. Learn about automating theme support, integrating design tokens across projects, and simplifying light and dark mode implementation.","Figma Variables API, Design tokens, Figma API design tokens, UI consistency, Design token automation, Light and dark mode implementation, Figma theming, Scalable design systems, Domino's UI development, Figma for enterprise","How We Utilised Figma Variables API for Standardised UI Development at Domino's\n","2024-09-18","September 18th, 2024","18 Sep 2024",[232,1431,116,230,1432],"design system","process improvements","https://www.eveatwork.studio/articles/how-we-utilised-figma-variables-api-for-creating-design-tokens","/articles/design-tokens/how-we-utilised-figma-variables-api-for-creating-design-tokens--thumbnail.png",[1436],"/articles/design-tokens/how-we-utilised-figma-variables-api-for-creating-design-tokens--page-hero.png","/articles/design-tokens/how-we-utilised-figma-variables-api-for-creating-design-tokens__1x1.png","/articles/design-tokens/how-we-utilised-figma-variables-api-for-creating-design-tokens__4x3.png","/articles/design-tokens/how-we-utilised-figma-variables-api-for-creating-design-tokens__16x9.png",{"type":16,"children":1441,"toc":2027},[1442,1472,1477,1483,1488,1493,1498,1503,1508,1514,1532,1538,1543,1548,1553,1558,1563,1568,1573,1579,1584,1589,1594,1599,1604,1610,1615,1619,1624,1629,1655,1660,1696,1709,1721,1727,1732,1737,1750,1755,1798,1809,1822,1831,1836,1842,1847,1852,1857,1864,1877,1882,1887,1893,1898,1903,1909,1914,1923,1928,1934,1939,1945,1950,1955,1960,1964],{"type":19,"tag":20,"props":1443,"children":1444},{},[1445,1447,1452,1454,1459,1461,1470],{"type":24,"value":1446},"At Domino's, we ",{"type":19,"tag":98,"props":1448,"children":1449},{},[1450],{"type":24,"value":1451},"strive",{"type":24,"value":1453}," for consistency and scalability when building UIs across web and mobile platforms. While we have always aimed for a unified design and development process, maintaining ",{"type":19,"tag":98,"props":1455,"children":1456},{},[1457],{"type":24,"value":1458},"consistency",{"type":24,"value":1460}," in design variable names across projects has always been challenging. With the introduction of ",{"type":19,"tag":1462,"props":1463,"children":1467},"a",{"href":1464,"rel":1465},"https://www.figma.com/developers/api#variables",[1466],"nofollow",[1468],{"type":24,"value":1469},"Figma's Variables API",{"type":24,"value":1471},", we have addressed this issue by automating the fetching of Figma variables directly into our codebase, which enabled us to maintain consistency between design and UI implementation and, as a very nice bonus, support both light and dark modes seamlessly.",{"type":19,"tag":20,"props":1473,"children":1474},{},[1475],{"type":24,"value":1476},"In this post, I will walk you through how we used Figma's API to automatically generate design tokens, improving our workflow by aligning design and development more closely.",{"type":19,"tag":269,"props":1478,"children":1480},{"id":1479},"the-problem-we-had-to-solve",[1481],{"type":24,"value":1482},"The Problem We Had To Solve",{"type":19,"tag":20,"props":1484,"children":1485},{},[1486],{"type":24,"value":1487},"The engineering goals at Domino's are ambitious, and we often partner with other companies to reach them. Which means things are always very dynamic. Developers change, different teams build different parts of the website, email templates, mobile apps and so on.",{"type":19,"tag":20,"props":1489,"children":1490},{},[1491],{"type":24,"value":1492},"When developing UI, devs always ensure that no raw design values (like the HEX values of colours) are used across the code, following the “DRY” (Don't Repeat Yourself) principles to maintain clean code across all projects.",{"type":19,"tag":20,"props":1494,"children":1495},{},[1496],{"type":24,"value":1497},"Developers achieve this by converting reusable design values into variables. Then, those variables can be used anywhere in the code, ensuring consistency in the codebase and produced UI.",{"type":19,"tag":20,"props":1499,"children":1500},{},[1501],{"type":24,"value":1502},"Maintaining consistency between the naming conventions of those variables has been quite a challenge, though.",{"type":19,"tag":20,"props":1504,"children":1505},{},[1506],{"type":24,"value":1507},"For instance, here is an example of one colour which is named differently across different projects:",{"type":19,"tag":1509,"props":1510,"children":1513},"img",{"src":1511,"alt":1512},"https://res.cloudinary.com/dgurzqa9j/image/upload/v1726146403/one-colour-many-names_yzruwc.png","Example of a single color variable named differently across multiple projects",[],{"type":19,"tag":20,"props":1515,"children":1516},{},[1517,1519,1524,1526,1530],{"type":24,"value":1518},"As I am sure you can already see, this is quite inneficient. This scenario becomes particularly problematic when scaling up and adding new projects. Adding ",{"type":19,"tag":98,"props":1520,"children":1521},{},[1522],{"type":24,"value":1523},"new",{"type":24,"value":1525}," sets of design variables to ",{"type":19,"tag":98,"props":1527,"children":1528},{},[1529],{"type":24,"value":1523},{"type":24,"value":1531}," projects is neither ideal nor scalable.",{"type":19,"tag":269,"props":1533,"children":1535},{"id":1534},"introducing-design-tokens",[1536],{"type":24,"value":1537},"Introducing Design Tokens",{"type":19,"tag":20,"props":1539,"children":1540},{},[1541],{"type":24,"value":1542},"To address this issue, we decided to add Design Tokens as a Service to Domino's tech stack.",{"type":19,"tag":20,"props":1544,"children":1545},{},[1546],{"type":24,"value":1547},"Design tokens are a centralised set of design values like colours, fonts, and shadows that are common across all projects. These values can be packaged into a single resource and shared across the organisation.",{"type":19,"tag":20,"props":1549,"children":1550},{},[1551],{"type":24,"value":1552},"Essentially, design tokens allow you to go from this setup for multiple projects:",{"type":19,"tag":1509,"props":1554,"children":1557},{"src":1555,"alt":1556},"https://res.cloudinary.com/dgurzqa9j/image/upload/v1726145744/projects-setup-before_qnsmhd.png","Before adopting design tokens: multiple inconsistent design setups for colors, fonts, and shadows across various projects.",[],{"type":19,"tag":20,"props":1559,"children":1560},{},[1561],{"type":24,"value":1562},"To this:",{"type":19,"tag":1509,"props":1564,"children":1567},{"src":1565,"alt":1566},"https://res.cloudinary.com/dgurzqa9j/image/upload/v1726145808/projects-setup-after_h9nhbs.png","After adopting design tokens: centralized and consistent design system with shared values for colors, fonts, and shadows across all projects.",[],{"type":19,"tag":20,"props":1569,"children":1570},{},[1571],{"type":24,"value":1572},"With design tokens, we can ensure consistency across all projects and simplify the process of maintaining design values. Any updates made in the design tokens package can be instantly reflected in the individual projects, ensuring that design and development stay in sync.",{"type":19,"tag":269,"props":1574,"children":1576},{"id":1575},"leveraging-figmas-variables-api",[1577],{"type":24,"value":1578},"Leveraging Figma's Variables API",{"type":19,"tag":20,"props":1580,"children":1581},{},[1582],{"type":24,"value":1583},"Design tokens can be achieved in a couple of ways. For example, some teams maintain files containing all design tokens in an easy-to-access location, and then these files are used as a single source of truth by everyone - devs and designers.",{"type":19,"tag":20,"props":1585,"children":1586},{},[1587],{"type":24,"value":1588},"This approach is better than maintaining multiple sets of design values. However, it is still very manual - someone must update the files whenever changes are introduced.",{"type":19,"tag":20,"props":1590,"children":1591},{},[1592],{"type":24,"value":1593},"To support scalability, we created an automated process that generates design tokens by pulling variables directly from Figma using the new Variables REST API.",{"type":19,"tag":20,"props":1595,"children":1596},{},[1597],{"type":24,"value":1598},"Figma's Variables API provides direct access to the variables our designers create in Figma files, allowing us to automate the design token generation process.",{"type":19,"tag":20,"props":1600,"children":1601},{},[1602],{"type":24,"value":1603},"Once the design tokens are generated, we publish them as an installable npm package, which we then use across multiple projects, ensuring consistency in the developed UI and naming conventions.",{"type":19,"tag":269,"props":1605,"children":1607},{"id":1606},"how-figmas-variables-simplify-theme-support",[1608],{"type":24,"value":1609},"How Figma's Variables Simplify Theme Support",{"type":19,"tag":20,"props":1611,"children":1612},{},[1613],{"type":24,"value":1614},"One of the most powerful features of Figma variables is their ability to support multiple modes, such as light and dark themes. In Figma, you can define a single variable, such as background-color, and assign it multiple values depending on the mode. For example:",{"type":19,"tag":1509,"props":1616,"children":1618},{"src":1617,"alt":6},"https://res.cloudinary.com/dgurzqa9j/image/upload/v1745472332/Screenshot_2025-04-24_at_06.22.56_yxe8pq.png",[],{"type":19,"tag":20,"props":1620,"children":1621},{},[1622],{"type":24,"value":1623},"This view in Figma allows you to manage all variables in one location, ensuring that mode/theme-specific styles are consistent and easy to update.",{"type":19,"tag":20,"props":1625,"children":1626},{},[1627],{"type":24,"value":1628},"A setup like this also simplifies the front-end implementation of themes. When Figma variables are fetched and converted into CSS variables, switching between light and dark modes becomes as simple as toggling between different sets of predefined tokens:",{"type":19,"tag":66,"props":1630,"children":1631},{},[1632,1644],{"type":19,"tag":70,"props":1633,"children":1634},{},[1635,1642],{"type":19,"tag":1636,"props":1637,"children":1639},"code",{"className":1638},[],[1640],{"type":24,"value":1641},"--background-colour: #ffffff",{"type":24,"value":1643}," - for light theme",{"type":19,"tag":70,"props":1645,"children":1646},{},[1647,1653],{"type":19,"tag":1636,"props":1648,"children":1650},{"className":1649},[],[1651],{"type":24,"value":1652},"--background-colour: #000000",{"type":24,"value":1654}," - for dark theme",{"type":19,"tag":20,"props":1656,"children":1657},{},[1658],{"type":24,"value":1659},"Figma's modes magic does not end with colour themes. You can apply similar principles to the sizing units, like container paddings, for example, which are often different for different screen sizes:",{"type":19,"tag":66,"props":1661,"children":1662},{},[1663,1674,1685],{"type":19,"tag":70,"props":1664,"children":1665},{},[1666,1672],{"type":19,"tag":1636,"props":1667,"children":1669},{"className":1668},[],[1670],{"type":24,"value":1671},"--container-padding: 12px",{"type":24,"value":1673}," - for mobiles",{"type":19,"tag":70,"props":1675,"children":1676},{},[1677,1683],{"type":19,"tag":1636,"props":1678,"children":1680},{"className":1679},[],[1681],{"type":24,"value":1682},"--container-padding: 16px",{"type":24,"value":1684}," - for tablets",{"type":19,"tag":70,"props":1686,"children":1687},{},[1688,1694],{"type":19,"tag":1636,"props":1689,"children":1691},{"className":1690},[],[1692],{"type":24,"value":1693},"--container-padding: 24px",{"type":24,"value":1695}," - for desktops",{"type":19,"tag":20,"props":1697,"children":1698},{},[1699,1701,1707],{"type":24,"value":1700},"And instead of writing multiple media queries to apply different padding values to all affected elements, you can switch between CSS variables at the ",{"type":19,"tag":1636,"props":1702,"children":1704},{"className":1703},[],[1705],{"type":24,"value":1706},":root{}",{"type":24,"value":1708}," level:",{"type":19,"tag":1710,"props":1711,"children":1716},"pre",{"className":1712,"code":1714,"language":1715,"meta":6},[1713],"language-CSS",":root {\n  @media (max-width: 520px) {\n    --container-padding: 12px;\n  }\n\n  @media (max-width: 768px) {\n    --container-padding: 16px;\n  }\n\n  @media (min-width: 769px) {\n    --container-padding: 24px;\n  }\n}\n\n.container {\n  padding: var(--container-padding);\n}\n","CSS",[1717],{"type":19,"tag":1636,"props":1718,"children":1719},{"__ignoreMap":6},[1720],{"type":24,"value":1714},{"type":19,"tag":269,"props":1722,"children":1724},{"id":1723},"automating-the-fetching-of-design-tokens",[1725],{"type":24,"value":1726},"Automating the Fetching of Design Tokens",{"type":19,"tag":20,"props":1728,"children":1729},{},[1730],{"type":24,"value":1731},"Considering all the benefits this system could provide us with, convincing people to work on adopting the Design Tokens approach was not a difficult sell. All we needed was to actually do the work.",{"type":19,"tag":20,"props":1733,"children":1734},{},[1735],{"type":24,"value":1736},"The approach we took consisted of two parts:",{"type":19,"tag":66,"props":1738,"children":1739},{},[1740,1745],{"type":19,"tag":70,"props":1741,"children":1742},{},[1743],{"type":24,"value":1744},"Part 1 - UX designers had to create variables in Figma.",{"type":19,"tag":70,"props":1746,"children":1747},{},[1748],{"type":24,"value":1749},"Part 2 - The UI team had to find a way to fetch those variables from Figma and convert them to design tokens in the format needed.",{"type":19,"tag":20,"props":1751,"children":1752},{},[1753],{"type":24,"value":1754},"For the UI part, we built a Node.js application. I'm not going to get into specific details of this application here (there will be a follow-up article with code examples), but here's how it works:",{"type":19,"tag":1182,"props":1756,"children":1757},{},[1758,1768,1778,1788],{"type":19,"tag":70,"props":1759,"children":1760},{},[1761,1766],{"type":19,"tag":37,"props":1762,"children":1763},{},[1764],{"type":24,"value":1765},"Authentication and Setup",{"type":24,"value":1767},": First, we set up Figma API access by generating a personal access token and obtaining the ID of the Figma file containing all variables.",{"type":19,"tag":70,"props":1769,"children":1770},{},[1771,1776],{"type":19,"tag":37,"props":1772,"children":1773},{},[1774],{"type":24,"value":1775},"Fetching Data",{"type":24,"value":1777},": Once authenticated, our Node.js script fetches the published variables data from Figma.",{"type":19,"tag":70,"props":1779,"children":1780},{},[1781,1786],{"type":19,"tag":37,"props":1782,"children":1783},{},[1784],{"type":24,"value":1785},"Processing Data",{"type":24,"value":1787},": The data is then processed, and we generate separate files for different token collections (e.g., Core colour tokens and Light/Dark mode tokens).",{"type":19,"tag":70,"props":1789,"children":1790},{},[1791,1796],{"type":19,"tag":37,"props":1792,"children":1793},{},[1794],{"type":24,"value":1795},"Generating CSS Variables",{"type":24,"value":1797},": Finally, we generate design tokens as CSS variables for our web projects and group them into SCSS mixins for easier imports. For example, we might generate tokens like this:",{"type":19,"tag":1710,"props":1799,"children":1804},{"className":1800,"code":1802,"language":1803,"meta":6},[1801],"language-SCSS","/* Tokens for light mode - CSS variables */\n@mixin modes--light--css-vars {\n  --text-primary: rgba(57, 51, 54, 1); \n  --text-secondary: rgba(84, 84, 84, 1); \n  --text-black: rgba(57, 51, 54, 1); \n  --text-brand-blue-default: rgba(0, 100, 145, 1); \n  --text-brand-blue-bold: rgba(0, 100, 145, 1); \n  --text-brand-blue-bolder: rgba(0, 100, 145, 1); \n  --text-white: rgba(255, 255, 255, 1); \n  ...\n}\n\n/* Tokens for dark mode - CSS variables */\n@mixin modes--dark--css-vars {\n  --text-primary: rgba(245, 245, 245, 1); \n  --text-secondary: rgba(245, 245, 245, 1); \n  --text-black: rgba(57, 51, 54, 1); \n  --text-brand-blue-default: rgba(0, 100, 145, 1); \n  --text-brand-blue-bold: rgba(24, 147, 204, 1); \n  --text-brand-blue-bolder: rgba(245, 245, 245, 1); \n  --text-white: rgba(255, 255, 255, 1); \n  ...\n}\n","SCSS",[1805],{"type":19,"tag":1636,"props":1806,"children":1807},{"__ignoreMap":6},[1808],{"type":24,"value":1802},{"type":19,"tag":20,"props":1810,"children":1811},{},[1812,1814,1820],{"type":24,"value":1813},"And add them to the ",{"type":19,"tag":1636,"props":1815,"children":1817},{"className":1816},[],[1818],{"type":24,"value":1819},":root {}",{"type":24,"value":1821}," like this:",{"type":19,"tag":1710,"props":1823,"children":1826},{"className":1824,"code":1825,"language":1803,"meta":6},[1801],"@import \"design-tokens/collection-modes--light--css-vars.scss\";\n@import \"design-tokens/collection-modes--dark--css-vars.scss\";\n\n:root {\n  @include modes--light--css-vars;\n\n  @media (prefers-color-scheme: dark) {\n    @include modes--dark--css-vars;\n  }\n}\n",[1827],{"type":19,"tag":1636,"props":1828,"children":1829},{"__ignoreMap":6},[1830],{"type":24,"value":1825},{"type":19,"tag":20,"props":1832,"children":1833},{},[1834],{"type":24,"value":1835},"This makes the CSS variables accessible across all pages of our application. They can be easily integrated into the front-end code, enabling smooth toggling between light and dark modes based on user preferences.",{"type":19,"tag":269,"props":1837,"children":1839},{"id":1838},"showcase-adding-light-and-dark-themes-to-our-button-component",[1840],{"type":24,"value":1841},"Showcase: Adding Light and Dark Themes To Our Button Component",{"type":19,"tag":20,"props":1843,"children":1844},{},[1845],{"type":24,"value":1846},"To illustrate the impact of our new system, let's look at how it improved our button component.",{"type":19,"tag":20,"props":1848,"children":1849},{},[1850],{"type":24,"value":1851},"Before implementing design tokens, our UI library only supported the light theme, and adding a dark one was going to be a time-consuming process, mainly because of how our variables were named.",{"type":19,"tag":20,"props":1853,"children":1854},{},[1855],{"type":24,"value":1856},"For all the colour variables in our system, we used generic naming conventions which were not specific enough to allow for easy theme switching.",{"type":19,"tag":1509,"props":1858,"children":1863},{"src":1859,"className":1860,"alt":1862},"https://res.cloudinary.com/dgurzqa9j/image/upload/v1726677034/button-variables-before_my06jl.png",[1861],"no-padding","UI library before design tokens: limited to a light theme, with generic color variable names like $base-utility-primary, making theme switching and dark theme integration difficult.",[],{"type":19,"tag":20,"props":1865,"children":1866},{},[1867,1869,1875],{"type":24,"value":1868},"For example, ",{"type":19,"tag":1636,"props":1870,"children":1872},{"className":1871},[],[1873],{"type":24,"value":1874},"$base-utility-primary",{"type":24,"value":1876}," was used in all the components that needed that shade of green colour, and changing the value of this variable would have affected many elements in our UI library.",{"type":19,"tag":20,"props":1878,"children":1879},{},[1880],{"type":24,"value":1881},"This was neither right nor wrong; it was just the way things were done when designs were initially created for our UI components library.",{"type":19,"tag":20,"props":1883,"children":1884},{},[1885],{"type":24,"value":1886},"With Figma variables in place, UX designers are much more specific when defining colour names. Here, you can see variables created specifically for the button component:",{"type":19,"tag":1509,"props":1888,"children":1892},{"src":1889,"className":1890,"alt":1891},"https://res.cloudinary.com/dgurzqa9j/image/upload/v1726677064/figma-variables-for-button_mwr8ct.png",[1861],"Figma variables for the button component, showing specific color names defined for light and dark themes to enable easier theme management.",[],{"type":19,"tag":20,"props":1894,"children":1895},{},[1896],{"type":24,"value":1897},"These variable names are much easier to read and understand, and the use intent is very obvious to anyone.",{"type":19,"tag":20,"props":1899,"children":1900},{},[1901],{"type":24,"value":1902},"When we fetch these same variables from Figma into our Design Tokens system, they look like this:",{"type":19,"tag":1509,"props":1904,"children":1908},{"src":1905,"className":1906,"alt":1907},"https://res.cloudinary.com/dgurzqa9j/image/upload/v1726677089/design-tokens-for-button_tjeq38.png",[1861],"CSS variables automatically generated from Figma design tokens, streamlining the process of converting design values into code for consistent UI implementation.",[],{"type":19,"tag":20,"props":1910,"children":1911},{},[1912],{"type":24,"value":1913},"As you can see, the variables are grouped into light and dark mode SCSS mixins, which, when imported gloablly, really simplifies the CSS code for the actual buttons:",{"type":19,"tag":1710,"props":1915,"children":1918},{"className":1916,"code":1917,"language":1803,"meta":6},[1801],".button-primary {\n  background-color: var(--button-surface-primary);\n\n  &:hover {\n    background-color: var(--button-surface-primary-hover);\n  }\n\n  &:active {\n    background-color: var(--button-surface-primary-active);\n  }\n}\n",[1919],{"type":19,"tag":1636,"props":1920,"children":1921},{"__ignoreMap":6},[1922],{"type":24,"value":1917},{"type":19,"tag":20,"props":1924,"children":1925},{},[1926],{"type":24,"value":1927},"And this way we can easily support light and dark themes in our UI components:",{"type":19,"tag":1509,"props":1929,"children":1933},{"src":1930,"className":1931,"alt":1932},"https://res.cloudinary.com/dgurzqa9j/image/upload/v1726677111/light-and-dark-teme-of-button_fuj0lm.png",[1861],"Button component design tokens in action, showcasing neatly styled buttons that support both light and dark modes for a consistent UI experience.",[],{"type":19,"tag":20,"props":1935,"children":1936},{},[1937],{"type":24,"value":1938},"When the design team updates the button colours in Figma, the changes are reflected in our UI library by just simply running the Node.js script. And once design tokens have been added to the remaining projects, this process will significantly reduce development time and ensure consistency.",{"type":19,"tag":269,"props":1940,"children":1942},{"id":1941},"the-road-ahead-for-design-tokens-at-dominos",[1943],{"type":24,"value":1944},"The Road Ahead for Design Tokens at Domino's",{"type":19,"tag":20,"props":1946,"children":1947},{},[1948],{"type":24,"value":1949},"We have made significant progress in integrating Figma's Variables into our development workflow; however, the project is still in progress.",{"type":19,"tag":20,"props":1951,"children":1952},{},[1953],{"type":24,"value":1954},"Our goal is to fully implement design tokens across all projects, ensuring a unified, scalable approach to UI development. As we continue to refine our implementation, I am excited to see how this approach evolves and how it will shape the future of UI development at Domino's.",{"type":19,"tag":20,"props":1956,"children":1957},{},[1958],{"type":24,"value":1959},"By staying focused on this ongoing work, I am confident our efforts will result in a more cohesive, efficient, and scalable design system for all of Domino's digital experiences.",{"type":19,"tag":269,"props":1961,"children":1962},{"id":620},[1963],{"type":24,"value":623},{"type":19,"tag":66,"props":1965,"children":1966},{},[1967,1977,1987,1997,2007,2017],{"type":19,"tag":70,"props":1968,"children":1969},{},[1970,1975],{"type":19,"tag":37,"props":1971,"children":1972},{},[1973],{"type":24,"value":1974},"Design Tokens:",{"type":24,"value":1976}," Centralised design values (like colours, fonts, sizes) that can be shared across projects.",{"type":19,"tag":70,"props":1978,"children":1979},{},[1980,1985],{"type":19,"tag":37,"props":1981,"children":1982},{},[1983],{"type":24,"value":1984},"Figma:",{"type":24,"value":1986}," A collaborative interface design tool.",{"type":19,"tag":70,"props":1988,"children":1989},{},[1990,1995],{"type":19,"tag":37,"props":1991,"children":1992},{},[1993],{"type":24,"value":1994},"Variables API:",{"type":24,"value":1996}," An API provided by Figma that allows access to design variables defined in Figma files.",{"type":19,"tag":70,"props":1998,"children":1999},{},[2000,2005],{"type":19,"tag":37,"props":2001,"children":2002},{},[2003],{"type":24,"value":2004},"CSS Variables:",{"type":24,"value":2006}," Also known as CSS custom properties, these entities contain specific values to be reused throughout a document.",{"type":19,"tag":70,"props":2008,"children":2009},{},[2010,2015],{"type":19,"tag":37,"props":2011,"children":2012},{},[2013],{"type":24,"value":2014},"SCSS:",{"type":24,"value":2016}," A preprocessor scripting language interpreted or compiled into Cascading Style Sheets (CSS).",{"type":19,"tag":70,"props":2018,"children":2019},{},[2020,2025],{"type":19,"tag":37,"props":2021,"children":2022},{},[2023],{"type":24,"value":2024},"Node.js:",{"type":24,"value":2026}," An open-source, cross-platform JavaScript runtime environment.",{"title":6,"searchDepth":209,"depth":209,"links":2028},[2029,2030,2031,2032,2033,2034,2035,2036],{"id":1479,"depth":209,"text":1482},{"id":1534,"depth":209,"text":1537},{"id":1575,"depth":209,"text":1578},{"id":1606,"depth":209,"text":1609},{"id":1723,"depth":209,"text":1726},{"id":1838,"depth":209,"text":1841},{"id":1941,"depth":209,"text":1944},{"id":620,"depth":209,"text":623},"content:articles:how-we-utilised-figma-variables-api-for-creating-design-tokens:index.md","articles/how-we-utilised-figma-variables-api-for-creating-design-tokens/index.md","articles/how-we-utilised-figma-variables-api-for-creating-design-tokens/index",{"_path":2041,"_dir":221,"_draft":7,"_partial":7,"_locale":6,"title":2042,"description":2043,"keywords":748,"slug":760,"pagetitle":2042,"longPageTitle":2044,"date":2045,"longDate":2046,"serpDate":2047,"tags":2048,"category":754,"featured":234,"canonicalUrl":2051,"projectCompany":2052,"projectLink":13,"projectThumbnail":2053,"projectMedia":2054,"pageClassName":13,"nextProjectSlug":225,"schemaImage1x1":13,"schemaImage4x3":13,"schemaImage16x9":13,"ctaTitle":13,"ctaSubtitle":13,"ctaButtonText":13,"body":2060,"_type":213,"_id":2484,"_source":215,"_file":2485,"_stem":2486,"_extension":218},"/articles/hult-international-svg-animations","SVG Animations for HULT International","UI/UX case study for SVG Animations for HULT International.","How do you animate 78 SVG shapes in less than 10 days?","2019-12-30","December 30th, 2019","30 Dec 2019",[2049,230,2050],"CSS3 Animations","SVG Animations","https://www.eveatwork.studio/articles/hult-international-svg-animations","HULT International","/articles/MBA-hero-min.mp4",[2055,2053,2056,2057,2058,2059],"/articles/UNDERGRADUATE-hero-min.mp4","/articles/MASTERS-hero-min.mp4","/articles/EMBA-hero-min.mp4","/articles/EMBA_v2-hero-min.mp4","/articles/ASHRIDGE-hero-min.mp4",{"type":16,"children":2061,"toc":2474},[2062,2068,2080,2123,2134,2184,2210,2215,2221,2232,2238,2281,2287,2339,2345,2358,2364,2425,2437,2443,2461],{"type":19,"tag":269,"props":2063,"children":2065},{"id":2064},"the-client-the-challenge",[2066],{"type":24,"value":2067},"The Client & The Challenge",{"type":19,"tag":20,"props":2069,"children":2070},{},[2071,2073,2078],{"type":24,"value":2072},"HULT International Business School, with branches across North America, Europe, and Asia, approached me during their website redesign. They needed ",{"type":19,"tag":37,"props":2074,"children":2075},{},[2076],{"type":24,"value":2077},"five custom SVG animations",{"type":24,"value":2079}," that would be:",{"type":19,"tag":66,"props":2081,"children":2082},{},[2083,2093,2103,2113],{"type":19,"tag":70,"props":2084,"children":2085},{},[2086,2091],{"type":19,"tag":37,"props":2087,"children":2088},{},[2089],{"type":24,"value":2090},"Lightweight",{"type":24,"value":2092}," – Minimal file size to maintain fast page loads.",{"type":19,"tag":70,"props":2094,"children":2095},{},[2096,2101],{"type":19,"tag":37,"props":2097,"children":2098},{},[2099],{"type":24,"value":2100},"Reusable",{"type":24,"value":2102}," – One animation framework supporting multiple use cases.",{"type":19,"tag":70,"props":2104,"children":2105},{},[2106,2111],{"type":19,"tag":37,"props":2107,"children":2108},{},[2109],{"type":24,"value":2110},"CSS-Only",{"type":24,"value":2112}," – No JavaScript libraries allowed.",{"type":19,"tag":70,"props":2114,"children":2115},{},[2116,2121],{"type":19,"tag":37,"props":2117,"children":2118},{},[2119],{"type":24,"value":2120},"Time-Sensitive",{"type":24,"value":2122}," – Completed within 10 days.",{"type":19,"tag":20,"props":2124,"children":2125},{},[2126,2128,2133],{"type":24,"value":2127},"The animations had to work in ",{"type":19,"tag":37,"props":2129,"children":2130},{},[2131],{"type":24,"value":2132},"two scenarios",{"type":24,"value":883},{"type":19,"tag":1182,"props":2135,"children":2136},{},[2137,2161],{"type":19,"tag":70,"props":2138,"children":2139},{},[2140,2145,2147,2152,2154,2159],{"type":19,"tag":37,"props":2141,"children":2142},{},[2143],{"type":24,"value":2144},"On Page Load (Hero Section)",{"type":24,"value":2146}," – Shapes should ",{"type":19,"tag":37,"props":2148,"children":2149},{},[2150],{"type":24,"value":2151},"fade in",{"type":24,"value":2153},", ",{"type":19,"tag":37,"props":2155,"children":2156},{},[2157],{"type":24,"value":2158},"transform naturally",{"type":24,"value":2160},", and settle into a final position.",{"type":19,"tag":70,"props":2162,"children":2163},{},[2164,2169,2170,2175,2177,2182],{"type":19,"tag":37,"props":2165,"children":2166},{},[2167],{"type":24,"value":2168},"On Hover (Programme Cards)",{"type":24,"value":2146},{"type":19,"tag":37,"props":2171,"children":2172},{},[2173],{"type":24,"value":2174},"animate continuously",{"type":24,"value":2176}," while hovered and",{"type":19,"tag":37,"props":2178,"children":2179},{},[2180],{"type":24,"value":2181},"return to their original state",{"type":24,"value":2183}," when the mouse leaves.",{"type":19,"tag":20,"props":2185,"children":2186},{},[2187,2189,2194,2196,2201,2203,2208],{"type":24,"value":2188},"With ",{"type":19,"tag":37,"props":2190,"children":2191},{},[2192],{"type":24,"value":2193},"78 shapes",{"type":24,"value":2195}," across five illustrations and each requiring ",{"type":19,"tag":37,"props":2197,"children":2198},{},[2199],{"type":24,"value":2200},"two animation variations",{"type":24,"value":2202},", I was effectively building ",{"type":19,"tag":37,"props":2204,"children":2205},{},[2206],{"type":24,"value":2207},"10 separate animations",{"type":24,"value":2209}," under a tight deadline.",{"type":19,"tag":20,"props":2211,"children":2212},{},[2213],{"type":24,"value":2214},"I loved the challenge!",{"type":19,"tag":269,"props":2216,"children":2218},{"id":2217},"my-approach-precision-scalability",[2219],{"type":24,"value":2220},"My Approach: Precision & Scalability",{"type":19,"tag":20,"props":2222,"children":2223},{},[2224,2226,2231],{"type":24,"value":2225},"To meet the requirements efficiently, I structured the project into ",{"type":19,"tag":37,"props":2227,"children":2228},{},[2229],{"type":24,"value":2230},"three key phases",{"type":24,"value":883},{"type":19,"tag":59,"props":2233,"children":2235},{"id":2234},"_1-restructuring-preparation",[2236],{"type":24,"value":2237},"1. Restructuring & Preparation",{"type":19,"tag":66,"props":2239,"children":2240},{},[2241,2252,2262],{"type":19,"tag":70,"props":2242,"children":2243},{},[2244,2246,2251],{"type":24,"value":2245},"I cleaned and restructured each SVG to ensure ",{"type":19,"tag":37,"props":2247,"children":2248},{},[2249],{"type":24,"value":2250},"scalability",{"type":24,"value":125},{"type":19,"tag":70,"props":2253,"children":2254},{},[2255,2260],{"type":19,"tag":37,"props":2256,"children":2257},{},[2258],{"type":24,"value":2259},"Class names",{"type":24,"value":2261}," were assigned to all shapes for easy targeting.",{"type":19,"tag":70,"props":2263,"children":2264},{},[2265,2267,2272,2274,2279],{"type":24,"value":2266},"I wrote ",{"type":19,"tag":37,"props":2268,"children":2269},{},[2270],{"type":24,"value":2271},"SCSS mixins",{"type":24,"value":2273}," and ",{"type":19,"tag":37,"props":2275,"children":2276},{},[2277],{"type":24,"value":2278},"functions",{"type":24,"value":2280}," to keep animations modular and reusable.",{"type":19,"tag":59,"props":2282,"children":2284},{"id":2283},"_2-developing-optimised-animations",[2285],{"type":24,"value":2286},"2. Developing Optimised Animations",{"type":19,"tag":66,"props":2288,"children":2289},{},[2290,2315,2327],{"type":19,"tag":70,"props":2291,"children":2292},{},[2293,2295,2300,2302,2307,2308,2313],{"type":24,"value":2294},"Using ",{"type":19,"tag":37,"props":2296,"children":2297},{},[2298],{"type":24,"value":2299},"CSS3 animations",{"type":24,"value":2301},", I kept files ",{"type":19,"tag":37,"props":2303,"children":2304},{},[2305],{"type":24,"value":2306},"lightweight",{"type":24,"value":2273},{"type":19,"tag":37,"props":2309,"children":2310},{},[2311],{"type":24,"value":2312},"self-contained",{"type":24,"value":2314},", eliminating the need for external scripts.",{"type":19,"tag":70,"props":2316,"children":2317},{},[2318,2320,2325],{"type":24,"value":2319},"Shared ",{"type":19,"tag":37,"props":2321,"children":2322},{},[2323],{"type":24,"value":2324},"timing and transformation rules",{"type":24,"value":2326}," ensured natural movement while keeping the code manageable.",{"type":19,"tag":70,"props":2328,"children":2329},{},[2330,2332,2337],{"type":24,"value":2331},"SCSS and node.js were leveraged to output ",{"type":19,"tag":37,"props":2333,"children":2334},{},[2335],{"type":24,"value":2336},"two sets of CSS",{"type":24,"value":2338}," - one for hero animations and another for card hover animations.",{"type":19,"tag":59,"props":2340,"children":2342},{"id":2341},"_3-testing-fine-tuning",[2343],{"type":24,"value":2344},"3. Testing & Fine-Tuning",{"type":19,"tag":66,"props":2346,"children":2347},{},[2348,2353],{"type":19,"tag":70,"props":2349,"children":2350},{},[2351],{"type":24,"value":2352},"I rigorously tested each animation to ensure smooth performance across devices.",{"type":19,"tag":70,"props":2354,"children":2355},{},[2356],{"type":24,"value":2357},"Adjustments were made to individual animations while maintaining a consistent, high-quality motion experience.",{"type":19,"tag":269,"props":2359,"children":2361},{"id":2360},"the-outcome-lightweight-scalable-cost-effective",[2362],{"type":24,"value":2363},"The Outcome: Lightweight, Scalable, & Cost-Effective",{"type":19,"tag":66,"props":2365,"children":2366},{},[2367,2376,2387,2399],{"type":19,"tag":70,"props":2368,"children":2369},{},[2370,2375],{"type":19,"tag":37,"props":2371,"children":2372},{},[2373],{"type":24,"value":2374},"All SVG animations were delivered within the 10-day deadline",{"type":24,"value":125},{"type":19,"tag":70,"props":2377,"children":2378},{},[2379,2381,2386],{"type":24,"value":2380},"File sizes remained tiny, with the largest animation at just ",{"type":19,"tag":37,"props":2382,"children":2383},{},[2384],{"type":24,"value":2385},"68 KB",{"type":24,"value":125},{"type":19,"tag":70,"props":2388,"children":2389},{},[2390,2392,2397],{"type":24,"value":2391},"Animations were ",{"type":19,"tag":37,"props":2393,"children":2394},{},[2395],{"type":24,"value":2396},"fully scalable",{"type":24,"value":2398}," without loss of quality.",{"type":19,"tag":70,"props":2400,"children":2401},{},[2402,2404,2409,2411,2416,2418,2423],{"type":24,"value":2403},"The project’s ",{"type":19,"tag":37,"props":2405,"children":2406},{},[2407],{"type":24,"value":2408},"structured setup",{"type":24,"value":2410}," allowed me to create ",{"type":19,"tag":37,"props":2412,"children":2413},{},[2414],{"type":24,"value":2415},"another set of animations",{"type":24,"value":2417}," a month later in ",{"type":19,"tag":37,"props":2419,"children":2420},{},[2421],{"type":24,"value":2422},"half the time",{"type":24,"value":2424},", reducing costs for HULT.",{"type":19,"tag":20,"props":2426,"children":2427},{},[2428,2430,2435],{"type":24,"value":2429},"By prioritising ",{"type":19,"tag":37,"props":2431,"children":2432},{},[2433],{"type":24,"value":2434},"organisation, efficiency, and scalability",{"type":24,"value":2436},", I ensured that HULT’s animations not only enhanced their website but also provided long-term value.",{"type":19,"tag":269,"props":2438,"children":2440},{"id":2439},"key-takeaways",[2441],{"type":24,"value":2442},"Key Takeaways",{"type":19,"tag":66,"props":2444,"children":2445},{},[2446,2451,2456],{"type":19,"tag":70,"props":2447,"children":2448},{},[2449],{"type":24,"value":2450},"Well-structured code save time & cost.",{"type":19,"tag":70,"props":2452,"children":2453},{},[2454],{"type":24,"value":2455},"CSS-only solutions keep animations lightweight & performant.",{"type":19,"tag":70,"props":2457,"children":2458},{},[2459],{"type":24,"value":2460},"Reusable frameworks allow easy expansion for future needs.",{"type":19,"tag":20,"props":2462,"children":2463},{},[2464,2466,2472],{"type":24,"value":2465},"Need custom SVG animations for your project? ",{"type":19,"tag":1462,"props":2467,"children":2469},{"href":2468},"mailto:eve@eveatwork.studio",[2470],{"type":24,"value":2471},"Let’s talk!",{"type":24,"value":2473}," 🚀",{"title":6,"searchDepth":209,"depth":209,"links":2475},[2476,2477,2482,2483],{"id":2064,"depth":209,"text":2067},{"id":2217,"depth":209,"text":2220,"children":2478},[2479,2480,2481],{"id":2234,"depth":212,"text":2237},{"id":2283,"depth":212,"text":2286},{"id":2341,"depth":212,"text":2344},{"id":2360,"depth":209,"text":2363},{"id":2439,"depth":209,"text":2442},"content:articles:hult-international-svg-animations:index.md","articles/hult-international-svg-animations/index.md","articles/hult-international-svg-animations/index",{"_path":2488,"_dir":6,"_draft":7,"_partial":7,"_locale":6,"title":2489,"description":2490,"keywords":2491,"slug":221,"pagetitle":2492,"date":6,"tags":13,"canonicalUrl":2493,"exclude":234,"body":2494,"_type":213,"_id":2498,"_source":215,"_file":2499,"_stem":2500,"_extension":218},"/articles","UI/UX design and development articles - eveatwork.studio","Articles of eveatwork.studio - web product design and development portfolio of Eve S. Blakcori, United Kingdom.","product designer, UI developer, web designer, front end developer, UX/UI designer, UI developer","Articles","https://www.eveatwork.studio/articles",{"type":16,"children":2495,"toc":2496},[],{"title":6,"searchDepth":209,"depth":209,"links":2497},[],"content:articles:index.md","articles/index.md","articles/index",{"_path":2502,"_dir":6,"_draft":7,"_partial":7,"_locale":6,"title":2503,"description":2504,"keywords":2505,"slug":2506,"pagetitle":2507,"date":6,"tags":13,"canonicalUrl":2508,"body":2509,"_type":213,"_id":2539,"_source":215,"_file":2540,"_stem":2541,"_extension":218},"/contact","Contact UX/UI designer and developer - eveatwork.studio","Contact details of eveatwork.studio - web product designer and front end developer Eve S. Blakcori.","product designer, UI developer, web designer, front end developer, UX/UI designer from United Kingdom, UI developer from United Kingdom","contact","Contact","https://www.eveatwork.studio/contact",{"type":16,"children":2510,"toc":2537},[2511,2516,2521,2526],{"type":19,"tag":20,"props":2512,"children":2513},{},[2514],{"type":24,"value":2515},"Hi there, and thank you for your interest in working together.",{"type":19,"tag":20,"props":2517,"children":2518},{},[2519],{"type":24,"value":2520},"I help teams and businesses create clearer, more consistent digital experiences through UI design, front-end development, design systems, and accessibility.",{"type":19,"tag":20,"props":2522,"children":2523},{},[2524],{"type":24,"value":2525},"Whether you need support with a website, product interface, shared UI library, or accessibility improvements, I'd love to hear what you're working on.",{"type":19,"tag":20,"props":2527,"children":2528},{},[2529,2531,2536],{"type":24,"value":2530},"If there is any other reason you want to speak to me, drop me a line at ",{"type":19,"tag":1462,"props":2532,"children":2533},{"href":2468},[2534],{"type":24,"value":2535},"eve@eveatwork.studio",{"type":24,"value":125},{"title":6,"searchDepth":209,"depth":209,"links":2538},[],"content:contact:index.md","contact/index.md","contact/index",{"_path":2543,"_dir":2544,"_draft":7,"_partial":7,"_locale":6,"title":2545,"description":6,"sort":2546,"date":2547,"position":2548,"company":2549,"techStack":2550,"body":2551,"_type":213,"_id":2591,"_source":215,"_file":2592,"_stem":2593,"_extension":218},"/experience/2014-icentric","experience","2014 Icentric","e","July 2014 - September 2016","Front-end developer","iCentric Agency","LESS, CSS, JS & HTML",{"type":16,"children":2552,"toc":2589},[2553,2566,2576],{"type":19,"tag":66,"props":2554,"children":2555},{},[2556,2561],{"type":19,"tag":70,"props":2557,"children":2558},{},[2559],{"type":24,"value":2560},"Converting designs to code using LESS, CSS, HTML & JS",{"type":19,"tag":70,"props":2562,"children":2563},{},[2564],{"type":24,"value":2565},"Integrating CMS to the front-end",{"type":19,"tag":2567,"props":2568,"children":2570},"h5",{"id":2569},"featured-projects",[2571],{"type":19,"tag":37,"props":2572,"children":2573},{},[2574],{"type":24,"value":2575},"Featured projects:",{"type":19,"tag":66,"props":2577,"children":2578},{},[2579,2584],{"type":19,"tag":70,"props":2580,"children":2581},{},[2582],{"type":24,"value":2583},"Mottmac website - UI & front-end development, CMS integration",{"type":19,"tag":70,"props":2585,"children":2586},{},[2587],{"type":24,"value":2588},"iCentric website - UI & creative development, CMS integration",{"title":6,"searchDepth":209,"depth":209,"links":2590},[],"content:experience:2014-icentric.md","experience/2014-icentric.md","experience/2014-icentric",{"_path":2595,"_dir":2544,"_draft":7,"_partial":7,"_locale":6,"title":2596,"description":6,"sort":2597,"date":2598,"position":2599,"company":2600,"techStack":2601,"body":2602,"_type":213,"_id":2646,"_source":215,"_file":2647,"_stem":2648,"_extension":218},"/experience/2016-connells","2016 Connells","d","October 2016 - April 2017","Senior front-end developer","Connells Group","HTML5, CSS3, SASS, JS",{"type":16,"children":2603,"toc":2644},[2604,2627,2636],{"type":19,"tag":66,"props":2605,"children":2606},{},[2607,2612,2617,2622],{"type":19,"tag":70,"props":2608,"children":2609},{},[2610],{"type":24,"value":2611},"UX/UI design - I created user-centred designs for various Connells Group websites and portals using Figma and Adobe XD.",{"type":19,"tag":70,"props":2613,"children":2614},{},[2615],{"type":24,"value":2616},"Front-end and UI development - I wrote semantic, modular front end code using HTML5, CSS3, W3C coding practices, SASS, JS, Vue.js and other technologies.",{"type":19,"tag":70,"props":2618,"children":2619},{},[2620],{"type":24,"value":2621},"Creating prototypes for various POCs.",{"type":19,"tag":70,"props":2623,"children":2624},{},[2625],{"type":24,"value":2626},"Also, I created and maintained UI libraries for various projects.",{"type":19,"tag":2567,"props":2628,"children":2629},{"id":2569},[2630,2634],{"type":19,"tag":37,"props":2631,"children":2632},{},[2633],{"type":24,"value":2575},{"type":24,"value":2635}," ",{"type":19,"tag":66,"props":2637,"children":2638},{},[2639],{"type":19,"tag":70,"props":2640,"children":2641},{},[2642],{"type":24,"value":2643},"Sequence Home website - UI development, CMS integration",{"title":6,"searchDepth":209,"depth":209,"links":2645},[],"content:experience:2016-connells.md","experience/2016-connells.md","experience/2016-connells",{"_path":2650,"_dir":2544,"_draft":7,"_partial":7,"_locale":6,"title":2651,"description":6,"sort":2652,"date":2653,"position":2654,"company":2600,"techStack":2655,"body":2656,"_type":213,"_id":2704,"_source":215,"_file":2705,"_stem":2706,"_extension":218},"/experience/2017-connells","2017 Connells","c","April 2017 - August 2019","Lead front-end developer","Figma, Vue.js, CSS3, SCSS, HTML5, Umbraco, BEM",{"type":16,"children":2657,"toc":2702},[2658,2676,2684],{"type":19,"tag":66,"props":2659,"children":2660},{},[2661,2666,2671],{"type":19,"tag":70,"props":2662,"children":2663},{},[2664],{"type":24,"value":2665},"When I was promoted to the front-end lead position at Connells, I was made in charge of all front-end projects, which meant I set standards in front-end code and tool choices and took responsibility for the visual appearances of our web projects. Also, I helped less experienced colleagues with their day-to-day tasks.",{"type":19,"tag":70,"props":2667,"children":2668},{},[2669],{"type":24,"value":2670},"Another part of my job was maintaining a high awareness of industry issues and trends, particularly regarding accessibility, usability, and emerging technologies.",{"type":19,"tag":70,"props":2672,"children":2673},{},[2674],{"type":24,"value":2675},"On top of that, I kept all responsibilities from my previous role at Connells.",{"type":19,"tag":2567,"props":2677,"children":2678},{"id":2569},[2679,2683],{"type":19,"tag":37,"props":2680,"children":2681},{},[2682],{"type":24,"value":2575},{"type":24,"value":2635},{"type":19,"tag":66,"props":2685,"children":2686},{},[2687,2692,2697],{"type":19,"tag":70,"props":2688,"children":2689},{},[2690],{"type":24,"value":2691},"Connells Group corporate website design and build - Last project done at Connells (95% completion). UI design and implementation, CMS integration",{"type":19,"tag":70,"props":2693,"children":2694},{},[2695],{"type":24,"value":2696},"Connells Surveyors website design and build - UI design and implementation, CMS integration",{"type":19,"tag":70,"props":2698,"children":2699},{},[2700],{"type":24,"value":2701},"Figma API design tokens system - Figma API, NPM, JavaScript, Node.js",{"title":6,"searchDepth":209,"depth":209,"links":2703},[],"content:experience:2017-connells.md","experience/2017-connells.md","experience/2017-connells",{"_path":2708,"_dir":2544,"_draft":7,"_partial":7,"_locale":6,"title":2709,"description":6,"sort":2710,"date":2711,"position":2712,"company":2713,"techStack":2714,"body":2715,"_type":213,"_id":2766,"_source":215,"_file":2767,"_stem":2768,"_extension":218},"/experience/2019-dominos","2019 Dominos","b","September 2019 - May 2021","Senior front-end developer / UI library","Domino’s Pizza UK & Ireland Ltd","Vue.js, Nuxt, TypeScript, SCSS, HTML5, Storybook, Mocha & Chai",{"type":16,"children":2716,"toc":2764},[2717,2745,2752],{"type":19,"tag":66,"props":2718,"children":2719},{},[2720,2725,2730,2735,2740],{"type":19,"tag":70,"props":2721,"children":2722},{},[2723],{"type":24,"value":2724},"At Domino's, I am responsible for the UI side of the front-end projects. ",{"type":19,"tag":70,"props":2726,"children":2727},{},[2728],{"type":24,"value":2729},"I mainly work on Domino's design system / UI library. I build reusable components in Storybook and help less experienced developers produce high-quality results.",{"type":19,"tag":70,"props":2731,"children":2732},{},[2733],{"type":24,"value":2734},"I write unit tests and documentation for the code and make sure our code supports various browsers. ",{"type":19,"tag":70,"props":2736,"children":2737},{},[2738],{"type":24,"value":2739},"Besides writing code, I organise and prioritise the work for our team and set the standards in the tools and methods we choose.",{"type":19,"tag":70,"props":2741,"children":2742},{},[2743],{"type":24,"value":2744},"Also, I take accountability for the quality of the visual appearance and make sure the state of code is up to the standards.",{"type":19,"tag":2567,"props":2746,"children":2747},{"id":2569},[2748],{"type":19,"tag":37,"props":2749,"children":2750},{},[2751],{"type":24,"value":2575},{"type":19,"tag":20,"props":2753,"children":2754},{},[2755,2762],{"type":19,"tag":1462,"props":2756,"children":2759},{"href":2757,"rel":2758},"https://www.dominos.co.uk/",[1466],[2760],{"type":24,"value":2761},"Domino's website re-skin",{"type":24,"value":2763}," - I recently lead a successful Domino's UK eCommerce website re-skin in preparation for the new platform and design.",{"title":6,"searchDepth":209,"depth":209,"links":2765},[],"content:experience:2019-dominos.md","experience/2019-dominos.md","experience/2019-dominos",{"_path":2770,"_dir":2544,"_draft":7,"_partial":7,"_locale":6,"title":2771,"description":6,"sort":1462,"date":2772,"position":2773,"company":2713,"techStack":2714,"body":2774,"_type":213,"_id":2831,"_source":215,"_file":2832,"_stem":2833,"_extension":218},"/experience/2021-dominos","2021 Dominos","May 2021 - present","Development team lead / UI library",{"type":16,"children":2775,"toc":2829},[2776,2804,2811],{"type":19,"tag":66,"props":2777,"children":2778},{},[2779,2784,2789,2794,2799],{"type":19,"tag":70,"props":2780,"children":2781},{},[2782],{"type":24,"value":2783},"All of the responsibilities from the previous role at Domino’s.",{"type":19,"tag":70,"props":2785,"children":2786},{},[2787],{"type":24,"value":2788},"Also, as a Development team lead, I am now responsible for leading and managing the team of developers. This involves providing feedback, addressing any issues, having regular 1 to 1s, half-year and yearly performance reviews.",{"type":19,"tag":70,"props":2790,"children":2791},{},[2792],{"type":24,"value":2793},"I recruit and onboard new colleagues, lead daily standups and any other planned or ad-hoc meetings.",{"type":19,"tag":70,"props":2795,"children":2796},{},[2797],{"type":24,"value":2798},"I work closely with UX/UI designers, Product Owners and other dev teams.",{"type":19,"tag":70,"props":2800,"children":2801},{},[2802],{"type":24,"value":2803},"At Domino's, I am the main point of contact for UI & the front end. ",{"type":19,"tag":2567,"props":2805,"children":2806},{"id":2569},[2807],{"type":19,"tag":37,"props":2808,"children":2809},{},[2810],{"type":24,"value":2575},{"type":19,"tag":66,"props":2812,"children":2813},{},[2814,2819,2824],{"type":19,"tag":70,"props":2815,"children":2816},{},[2817],{"type":24,"value":2818},"Domino's design system/UI library - UI development, unit testing, documentation",{"type":19,"tag":70,"props":2820,"children":2821},{},[2822],{"type":24,"value":2823},"Azure B2C templates development - UI development, team lead",{"type":19,"tag":70,"props":2825,"children":2826},{},[2827],{"type":24,"value":2828},"Fesign Tokens system - Development",{"title":6,"searchDepth":209,"depth":209,"links":2830},[],"content:experience:2021-dominos.md","experience/2021-dominos.md","experience/2021-dominos",{"_path":2835,"_dir":6,"_draft":7,"_partial":7,"_locale":6,"title":6,"description":6,"body":2836,"_type":213,"_id":2840,"_source":215,"_file":2841,"_stem":2842,"_extension":218},"/",{"type":16,"children":2837,"toc":2838},[],{"title":6,"searchDepth":209,"depth":209,"links":2839},[],"content:index.md","index.md","index",{"_path":2844,"_dir":6,"_draft":7,"_partial":7,"_locale":6,"title":2845,"description":2846,"keywords":10,"slug":2847,"pagetitle":2845,"date":6,"tags":13,"canonicalUrl":2848,"body":2849,"_type":213,"_id":2866,"_source":215,"_file":2867,"_stem":2868,"_extension":218},"/thank-you","Thank you","Thank you for getting in touch","thank-you","https://www.eveatwork.studio/thank-you",{"type":16,"children":2850,"toc":2864},[2851,2856],{"type":19,"tag":20,"props":2852,"children":2853},{},[2854],{"type":24,"value":2855},"Your message was sent! You are about to be taken back to the homepage. If that does not happen, please click the link below.",{"type":19,"tag":20,"props":2857,"children":2858},{},[2859],{"type":19,"tag":1462,"props":2860,"children":2861},{"href":2835},[2862],{"type":24,"value":2863},"back to the website",{"title":6,"searchDepth":209,"depth":209,"links":2865},[],"content:thank-you:index.md","thank-you/index.md","thank-you/index",[2870,3267,3734],{"_path":220,"_dir":221,"_draft":7,"_partial":7,"_locale":6,"title":222,"description":223,"keywords":224,"slug":225,"pagetitle":222,"longPageTitle":222,"date":226,"longDate":227,"serpDate":228,"tags":2871,"category":233,"featured":234,"canonicalUrl":235,"projectCompany":236,"projectLink":13,"projectThumbnail":237,"projectMedia":2872,"pageClassName":13,"nextProjectSlug":240,"schemaImage1x1":241,"schemaImage4x3":242,"schemaImage16x9":243,"ctaTitle":13,"ctaSubtitle":13,"ctaButtonText":13,"body":2873,"_type":213,"_id":741,"_source":215,"_file":742,"_stem":743,"_extension":218},[230,231,232],[239],{"type":16,"children":2874,"toc":3253},[2875,2884,2888,2892,2896,2900,2919,2923,2927,2946,2950,2954,2958,2962,3005,3009,3013,3040,3044,3048,3052,3071,3075,3079,3083,3087,3114,3118,3127,3131,3135,3154,3158,3162,3166,3170],{"type":19,"tag":20,"props":2876,"children":2877},{},[2878,2879,2883],{"type":24,"value":250},{"type":19,"tag":37,"props":2880,"children":2881},{},[2882],{"type":24,"value":255},{"type":24,"value":257},{"type":19,"tag":20,"props":2885,"children":2886},{},[2887],{"type":24,"value":262},{"type":19,"tag":20,"props":2889,"children":2890},{},[2891],{"type":24,"value":267},{"type":19,"tag":269,"props":2893,"children":2894},{"id":271},[2895],{"type":24,"value":274},{"type":19,"tag":20,"props":2897,"children":2898},{},[2899],{"type":24,"value":279},{"type":19,"tag":66,"props":2901,"children":2902},{},[2903,2911],{"type":19,"tag":70,"props":2904,"children":2905},{},[2906,2910],{"type":19,"tag":37,"props":2907,"children":2908},{},[2909],{"type":24,"value":290},{"type":24,"value":292},{"type":19,"tag":70,"props":2912,"children":2913},{},[2914,2918],{"type":19,"tag":37,"props":2915,"children":2916},{},[2917],{"type":24,"value":300},{"type":24,"value":302},{"type":19,"tag":269,"props":2920,"children":2921},{"id":305},[2922],{"type":24,"value":308},{"type":19,"tag":20,"props":2924,"children":2925},{},[2926],{"type":24,"value":313},{"type":19,"tag":66,"props":2928,"children":2929},{},[2930,2934,2938,2942],{"type":19,"tag":70,"props":2931,"children":2932},{},[2933],{"type":24,"value":321},{"type":19,"tag":70,"props":2935,"children":2936},{},[2937],{"type":24,"value":326},{"type":19,"tag":70,"props":2939,"children":2940},{},[2941],{"type":24,"value":331},{"type":19,"tag":70,"props":2943,"children":2944},{},[2945],{"type":24,"value":336},{"type":19,"tag":269,"props":2947,"children":2948},{"id":339},[2949],{"type":24,"value":342},{"type":19,"tag":20,"props":2951,"children":2952},{},[2953],{"type":24,"value":347},{"type":19,"tag":269,"props":2955,"children":2956},{"id":350},[2957],{"type":24,"value":353},{"type":19,"tag":20,"props":2959,"children":2960},{},[2961],{"type":24,"value":358},{"type":19,"tag":66,"props":2963,"children":2964},{},[2965,2973,2981,2989,2997],{"type":19,"tag":70,"props":2966,"children":2967},{},[2968,2972],{"type":19,"tag":37,"props":2969,"children":2970},{},[2971],{"type":24,"value":369},{"type":24,"value":371},{"type":19,"tag":70,"props":2974,"children":2975},{},[2976,2980],{"type":19,"tag":37,"props":2977,"children":2978},{},[2979],{"type":24,"value":379},{"type":24,"value":381},{"type":19,"tag":70,"props":2982,"children":2983},{},[2984,2988],{"type":19,"tag":37,"props":2985,"children":2986},{},[2987],{"type":24,"value":389},{"type":24,"value":391},{"type":19,"tag":70,"props":2990,"children":2991},{},[2992,2996],{"type":19,"tag":37,"props":2993,"children":2994},{},[2995],{"type":24,"value":399},{"type":24,"value":401},{"type":19,"tag":70,"props":2998,"children":2999},{},[3000,3004],{"type":19,"tag":37,"props":3001,"children":3002},{},[3003],{"type":24,"value":409},{"type":24,"value":411},{"type":19,"tag":269,"props":3006,"children":3007},{"id":414},[3008],{"type":24,"value":417},{"type":19,"tag":20,"props":3010,"children":3011},{},[3012],{"type":24,"value":422},{"type":19,"tag":66,"props":3014,"children":3015},{},[3016,3024,3032],{"type":19,"tag":70,"props":3017,"children":3018},{},[3019,3023],{"type":19,"tag":37,"props":3020,"children":3021},{},[3022],{"type":24,"value":433},{"type":24,"value":435},{"type":19,"tag":70,"props":3025,"children":3026},{},[3027,3031],{"type":19,"tag":37,"props":3028,"children":3029},{},[3030],{"type":24,"value":443},{"type":24,"value":445},{"type":19,"tag":70,"props":3033,"children":3034},{},[3035,3039],{"type":19,"tag":37,"props":3036,"children":3037},{},[3038],{"type":24,"value":453},{"type":24,"value":455},{"type":19,"tag":20,"props":3041,"children":3042},{},[3043],{"type":24,"value":460},{"type":19,"tag":269,"props":3045,"children":3046},{"id":463},[3047],{"type":24,"value":466},{"type":19,"tag":20,"props":3049,"children":3050},{},[3051],{"type":24,"value":471},{"type":19,"tag":66,"props":3053,"children":3054},{},[3055,3063],{"type":19,"tag":70,"props":3056,"children":3057},{},[3058,3062],{"type":19,"tag":37,"props":3059,"children":3060},{},[3061],{"type":24,"value":482},{"type":24,"value":484},{"type":19,"tag":70,"props":3064,"children":3065},{},[3066,3070],{"type":19,"tag":37,"props":3067,"children":3068},{},[3069],{"type":24,"value":492},{"type":24,"value":494},{"type":19,"tag":269,"props":3072,"children":3073},{"id":497},[3074],{"type":24,"value":500},{"type":19,"tag":20,"props":3076,"children":3077},{},[3078],{"type":24,"value":505},{"type":19,"tag":269,"props":3080,"children":3081},{"id":508},[3082],{"type":24,"value":511},{"type":19,"tag":20,"props":3084,"children":3085},{},[3086],{"type":24,"value":516},{"type":19,"tag":66,"props":3088,"children":3089},{},[3090,3098,3106],{"type":19,"tag":70,"props":3091,"children":3092},{},[3093,3097],{"type":19,"tag":37,"props":3094,"children":3095},{},[3096],{"type":24,"value":527},{"type":24,"value":529},{"type":19,"tag":70,"props":3099,"children":3100},{},[3101,3105],{"type":19,"tag":37,"props":3102,"children":3103},{},[3104],{"type":24,"value":537},{"type":24,"value":539},{"type":19,"tag":70,"props":3107,"children":3108},{},[3109,3113],{"type":19,"tag":37,"props":3110,"children":3111},{},[3112],{"type":24,"value":547},{"type":24,"value":549},{"type":19,"tag":269,"props":3115,"children":3116},{"id":552},[3117],{"type":24,"value":555},{"type":19,"tag":20,"props":3119,"children":3120},{},[3121,3122,3126],{"type":24,"value":560},{"type":19,"tag":37,"props":3123,"children":3124},{},[3125],{"type":24,"value":565},{"type":24,"value":567},{"type":19,"tag":269,"props":3128,"children":3129},{"id":570},[3130],{"type":24,"value":573},{"type":19,"tag":20,"props":3132,"children":3133},{},[3134],{"type":24,"value":578},{"type":19,"tag":66,"props":3136,"children":3137},{},[3138,3142,3146,3150],{"type":19,"tag":70,"props":3139,"children":3140},{},[3141],{"type":24,"value":586},{"type":19,"tag":70,"props":3143,"children":3144},{},[3145],{"type":24,"value":591},{"type":19,"tag":70,"props":3147,"children":3148},{},[3149],{"type":24,"value":596},{"type":19,"tag":70,"props":3151,"children":3152},{},[3153],{"type":24,"value":601},{"type":19,"tag":269,"props":3155,"children":3156},{"id":604},[3157],{"type":24,"value":607},{"type":19,"tag":20,"props":3159,"children":3160},{},[3161],{"type":24,"value":612},{"type":19,"tag":20,"props":3163,"children":3164},{},[3165],{"type":24,"value":617},{"type":19,"tag":269,"props":3167,"children":3168},{"id":620},[3169],{"type":24,"value":623},{"type":19,"tag":66,"props":3171,"children":3172},{},[3173,3181,3189,3197,3205,3213,3221,3229,3237,3245],{"type":19,"tag":70,"props":3174,"children":3175},{},[3176,3180],{"type":19,"tag":37,"props":3177,"children":3178},{},[3179],{"type":24,"value":634},{"type":24,"value":636},{"type":19,"tag":70,"props":3182,"children":3183},{},[3184,3188],{"type":19,"tag":37,"props":3185,"children":3186},{},[3187],{"type":24,"value":644},{"type":24,"value":646},{"type":19,"tag":70,"props":3190,"children":3191},{},[3192,3196],{"type":19,"tag":37,"props":3193,"children":3194},{},[3195],{"type":24,"value":654},{"type":24,"value":656},{"type":19,"tag":70,"props":3198,"children":3199},{},[3200,3204],{"type":19,"tag":37,"props":3201,"children":3202},{},[3203],{"type":24,"value":664},{"type":24,"value":666},{"type":19,"tag":70,"props":3206,"children":3207},{},[3208,3212],{"type":19,"tag":37,"props":3209,"children":3210},{},[3211],{"type":24,"value":674},{"type":24,"value":676},{"type":19,"tag":70,"props":3214,"children":3215},{},[3216,3220],{"type":19,"tag":37,"props":3217,"children":3218},{},[3219],{"type":24,"value":684},{"type":24,"value":686},{"type":19,"tag":70,"props":3222,"children":3223},{},[3224,3228],{"type":19,"tag":37,"props":3225,"children":3226},{},[3227],{"type":24,"value":694},{"type":24,"value":696},{"type":19,"tag":70,"props":3230,"children":3231},{},[3232,3236],{"type":19,"tag":37,"props":3233,"children":3234},{},[3235],{"type":24,"value":704},{"type":24,"value":706},{"type":19,"tag":70,"props":3238,"children":3239},{},[3240,3244],{"type":19,"tag":37,"props":3241,"children":3242},{},[3243],{"type":24,"value":714},{"type":24,"value":716},{"type":19,"tag":70,"props":3246,"children":3247},{},[3248,3252],{"type":19,"tag":37,"props":3249,"children":3250},{},[3251],{"type":24,"value":724},{"type":24,"value":726},{"title":6,"searchDepth":209,"depth":209,"links":3254},[3255,3256,3257,3258,3259,3260,3261,3262,3263,3264,3265,3266],{"id":271,"depth":209,"text":274},{"id":305,"depth":209,"text":308},{"id":339,"depth":209,"text":342},{"id":350,"depth":209,"text":353},{"id":414,"depth":209,"text":417},{"id":463,"depth":209,"text":466},{"id":497,"depth":209,"text":500},{"id":508,"depth":209,"text":511},{"id":552,"depth":209,"text":555},{"id":570,"depth":209,"text":573},{"id":604,"depth":209,"text":607},{"id":620,"depth":209,"text":623},{"_path":1422,"_dir":221,"_draft":7,"_partial":7,"_locale":6,"title":1423,"description":1424,"keywords":1425,"slug":240,"pagetitle":1426,"longPageTitle":1426,"date":1427,"longDate":1428,"serpDate":1429,"tags":3268,"category":754,"featured":234,"canonicalUrl":1433,"projectCompany":756,"projectLink":13,"projectThumbnail":1434,"projectMedia":3269,"pageClassName":13,"nextProjectSlug":749,"schemaImage1x1":1437,"schemaImage4x3":1438,"schemaImage16x9":1439,"ctaTitle":13,"ctaSubtitle":13,"ctaButtonText":13,"body":3270,"_type":213,"_id":2037,"_source":215,"_file":2038,"_stem":2039,"_extension":218},[232,1431,116,230,1432],[1436],{"type":16,"children":3271,"toc":3724},[3272,3292,3296,3300,3304,3308,3312,3316,3320,3323,3337,3341,3345,3349,3353,3356,3360,3363,3367,3371,3375,3379,3383,3387,3391,3395,3399,3402,3406,3410,3431,3435,3465,3475,3483,3487,3491,3495,3506,3510,3545,3553,3563,3571,3575,3579,3583,3587,3591,3595,3605,3609,3613,3617,3621,3625,3629,3633,3641,3645,3649,3653,3657,3661,3665,3669,3673],{"type":19,"tag":20,"props":3273,"children":3274},{},[3275,3276,3280,3281,3285,3286,3291],{"type":24,"value":1446},{"type":19,"tag":98,"props":3277,"children":3278},{},[3279],{"type":24,"value":1451},{"type":24,"value":1453},{"type":19,"tag":98,"props":3282,"children":3283},{},[3284],{"type":24,"value":1458},{"type":24,"value":1460},{"type":19,"tag":1462,"props":3287,"children":3289},{"href":1464,"rel":3288},[1466],[3290],{"type":24,"value":1469},{"type":24,"value":1471},{"type":19,"tag":20,"props":3293,"children":3294},{},[3295],{"type":24,"value":1476},{"type":19,"tag":269,"props":3297,"children":3298},{"id":1479},[3299],{"type":24,"value":1482},{"type":19,"tag":20,"props":3301,"children":3302},{},[3303],{"type":24,"value":1487},{"type":19,"tag":20,"props":3305,"children":3306},{},[3307],{"type":24,"value":1492},{"type":19,"tag":20,"props":3309,"children":3310},{},[3311],{"type":24,"value":1497},{"type":19,"tag":20,"props":3313,"children":3314},{},[3315],{"type":24,"value":1502},{"type":19,"tag":20,"props":3317,"children":3318},{},[3319],{"type":24,"value":1507},{"type":19,"tag":1509,"props":3321,"children":3322},{"src":1511,"alt":1512},[],{"type":19,"tag":20,"props":3324,"children":3325},{},[3326,3327,3331,3332,3336],{"type":24,"value":1518},{"type":19,"tag":98,"props":3328,"children":3329},{},[3330],{"type":24,"value":1523},{"type":24,"value":1525},{"type":19,"tag":98,"props":3333,"children":3334},{},[3335],{"type":24,"value":1523},{"type":24,"value":1531},{"type":19,"tag":269,"props":3338,"children":3339},{"id":1534},[3340],{"type":24,"value":1537},{"type":19,"tag":20,"props":3342,"children":3343},{},[3344],{"type":24,"value":1542},{"type":19,"tag":20,"props":3346,"children":3347},{},[3348],{"type":24,"value":1547},{"type":19,"tag":20,"props":3350,"children":3351},{},[3352],{"type":24,"value":1552},{"type":19,"tag":1509,"props":3354,"children":3355},{"src":1555,"alt":1556},[],{"type":19,"tag":20,"props":3357,"children":3358},{},[3359],{"type":24,"value":1562},{"type":19,"tag":1509,"props":3361,"children":3362},{"src":1565,"alt":1566},[],{"type":19,"tag":20,"props":3364,"children":3365},{},[3366],{"type":24,"value":1572},{"type":19,"tag":269,"props":3368,"children":3369},{"id":1575},[3370],{"type":24,"value":1578},{"type":19,"tag":20,"props":3372,"children":3373},{},[3374],{"type":24,"value":1583},{"type":19,"tag":20,"props":3376,"children":3377},{},[3378],{"type":24,"value":1588},{"type":19,"tag":20,"props":3380,"children":3381},{},[3382],{"type":24,"value":1593},{"type":19,"tag":20,"props":3384,"children":3385},{},[3386],{"type":24,"value":1598},{"type":19,"tag":20,"props":3388,"children":3389},{},[3390],{"type":24,"value":1603},{"type":19,"tag":269,"props":3392,"children":3393},{"id":1606},[3394],{"type":24,"value":1609},{"type":19,"tag":20,"props":3396,"children":3397},{},[3398],{"type":24,"value":1614},{"type":19,"tag":1509,"props":3400,"children":3401},{"src":1617,"alt":6},[],{"type":19,"tag":20,"props":3403,"children":3404},{},[3405],{"type":24,"value":1623},{"type":19,"tag":20,"props":3407,"children":3408},{},[3409],{"type":24,"value":1628},{"type":19,"tag":66,"props":3411,"children":3412},{},[3413,3422],{"type":19,"tag":70,"props":3414,"children":3415},{},[3416,3421],{"type":19,"tag":1636,"props":3417,"children":3419},{"className":3418},[],[3420],{"type":24,"value":1641},{"type":24,"value":1643},{"type":19,"tag":70,"props":3423,"children":3424},{},[3425,3430],{"type":19,"tag":1636,"props":3426,"children":3428},{"className":3427},[],[3429],{"type":24,"value":1652},{"type":24,"value":1654},{"type":19,"tag":20,"props":3432,"children":3433},{},[3434],{"type":24,"value":1659},{"type":19,"tag":66,"props":3436,"children":3437},{},[3438,3447,3456],{"type":19,"tag":70,"props":3439,"children":3440},{},[3441,3446],{"type":19,"tag":1636,"props":3442,"children":3444},{"className":3443},[],[3445],{"type":24,"value":1671},{"type":24,"value":1673},{"type":19,"tag":70,"props":3448,"children":3449},{},[3450,3455],{"type":19,"tag":1636,"props":3451,"children":3453},{"className":3452},[],[3454],{"type":24,"value":1682},{"type":24,"value":1684},{"type":19,"tag":70,"props":3457,"children":3458},{},[3459,3464],{"type":19,"tag":1636,"props":3460,"children":3462},{"className":3461},[],[3463],{"type":24,"value":1693},{"type":24,"value":1695},{"type":19,"tag":20,"props":3466,"children":3467},{},[3468,3469,3474],{"type":24,"value":1700},{"type":19,"tag":1636,"props":3470,"children":3472},{"className":3471},[],[3473],{"type":24,"value":1706},{"type":24,"value":1708},{"type":19,"tag":1710,"props":3476,"children":3478},{"className":3477,"code":1714,"language":1715,"meta":6},[1713],[3479],{"type":19,"tag":1636,"props":3480,"children":3481},{"__ignoreMap":6},[3482],{"type":24,"value":1714},{"type":19,"tag":269,"props":3484,"children":3485},{"id":1723},[3486],{"type":24,"value":1726},{"type":19,"tag":20,"props":3488,"children":3489},{},[3490],{"type":24,"value":1731},{"type":19,"tag":20,"props":3492,"children":3493},{},[3494],{"type":24,"value":1736},{"type":19,"tag":66,"props":3496,"children":3497},{},[3498,3502],{"type":19,"tag":70,"props":3499,"children":3500},{},[3501],{"type":24,"value":1744},{"type":19,"tag":70,"props":3503,"children":3504},{},[3505],{"type":24,"value":1749},{"type":19,"tag":20,"props":3507,"children":3508},{},[3509],{"type":24,"value":1754},{"type":19,"tag":1182,"props":3511,"children":3512},{},[3513,3521,3529,3537],{"type":19,"tag":70,"props":3514,"children":3515},{},[3516,3520],{"type":19,"tag":37,"props":3517,"children":3518},{},[3519],{"type":24,"value":1765},{"type":24,"value":1767},{"type":19,"tag":70,"props":3522,"children":3523},{},[3524,3528],{"type":19,"tag":37,"props":3525,"children":3526},{},[3527],{"type":24,"value":1775},{"type":24,"value":1777},{"type":19,"tag":70,"props":3530,"children":3531},{},[3532,3536],{"type":19,"tag":37,"props":3533,"children":3534},{},[3535],{"type":24,"value":1785},{"type":24,"value":1787},{"type":19,"tag":70,"props":3538,"children":3539},{},[3540,3544],{"type":19,"tag":37,"props":3541,"children":3542},{},[3543],{"type":24,"value":1795},{"type":24,"value":1797},{"type":19,"tag":1710,"props":3546,"children":3548},{"className":3547,"code":1802,"language":1803,"meta":6},[1801],[3549],{"type":19,"tag":1636,"props":3550,"children":3551},{"__ignoreMap":6},[3552],{"type":24,"value":1802},{"type":19,"tag":20,"props":3554,"children":3555},{},[3556,3557,3562],{"type":24,"value":1813},{"type":19,"tag":1636,"props":3558,"children":3560},{"className":3559},[],[3561],{"type":24,"value":1819},{"type":24,"value":1821},{"type":19,"tag":1710,"props":3564,"children":3566},{"className":3565,"code":1825,"language":1803,"meta":6},[1801],[3567],{"type":19,"tag":1636,"props":3568,"children":3569},{"__ignoreMap":6},[3570],{"type":24,"value":1825},{"type":19,"tag":20,"props":3572,"children":3573},{},[3574],{"type":24,"value":1835},{"type":19,"tag":269,"props":3576,"children":3577},{"id":1838},[3578],{"type":24,"value":1841},{"type":19,"tag":20,"props":3580,"children":3581},{},[3582],{"type":24,"value":1846},{"type":19,"tag":20,"props":3584,"children":3585},{},[3586],{"type":24,"value":1851},{"type":19,"tag":20,"props":3588,"children":3589},{},[3590],{"type":24,"value":1856},{"type":19,"tag":1509,"props":3592,"children":3594},{"src":1859,"className":3593,"alt":1862},[1861],[],{"type":19,"tag":20,"props":3596,"children":3597},{},[3598,3599,3604],{"type":24,"value":1868},{"type":19,"tag":1636,"props":3600,"children":3602},{"className":3601},[],[3603],{"type":24,"value":1874},{"type":24,"value":1876},{"type":19,"tag":20,"props":3606,"children":3607},{},[3608],{"type":24,"value":1881},{"type":19,"tag":20,"props":3610,"children":3611},{},[3612],{"type":24,"value":1886},{"type":19,"tag":1509,"props":3614,"children":3616},{"src":1889,"className":3615,"alt":1891},[1861],[],{"type":19,"tag":20,"props":3618,"children":3619},{},[3620],{"type":24,"value":1897},{"type":19,"tag":20,"props":3622,"children":3623},{},[3624],{"type":24,"value":1902},{"type":19,"tag":1509,"props":3626,"children":3628},{"src":1905,"className":3627,"alt":1907},[1861],[],{"type":19,"tag":20,"props":3630,"children":3631},{},[3632],{"type":24,"value":1913},{"type":19,"tag":1710,"props":3634,"children":3636},{"className":3635,"code":1917,"language":1803,"meta":6},[1801],[3637],{"type":19,"tag":1636,"props":3638,"children":3639},{"__ignoreMap":6},[3640],{"type":24,"value":1917},{"type":19,"tag":20,"props":3642,"children":3643},{},[3644],{"type":24,"value":1927},{"type":19,"tag":1509,"props":3646,"children":3648},{"src":1930,"className":3647,"alt":1932},[1861],[],{"type":19,"tag":20,"props":3650,"children":3651},{},[3652],{"type":24,"value":1938},{"type":19,"tag":269,"props":3654,"children":3655},{"id":1941},[3656],{"type":24,"value":1944},{"type":19,"tag":20,"props":3658,"children":3659},{},[3660],{"type":24,"value":1949},{"type":19,"tag":20,"props":3662,"children":3663},{},[3664],{"type":24,"value":1954},{"type":19,"tag":20,"props":3666,"children":3667},{},[3668],{"type":24,"value":1959},{"type":19,"tag":269,"props":3670,"children":3671},{"id":620},[3672],{"type":24,"value":623},{"type":19,"tag":66,"props":3674,"children":3675},{},[3676,3684,3692,3700,3708,3716],{"type":19,"tag":70,"props":3677,"children":3678},{},[3679,3683],{"type":19,"tag":37,"props":3680,"children":3681},{},[3682],{"type":24,"value":1974},{"type":24,"value":1976},{"type":19,"tag":70,"props":3685,"children":3686},{},[3687,3691],{"type":19,"tag":37,"props":3688,"children":3689},{},[3690],{"type":24,"value":1984},{"type":24,"value":1986},{"type":19,"tag":70,"props":3693,"children":3694},{},[3695,3699],{"type":19,"tag":37,"props":3696,"children":3697},{},[3698],{"type":24,"value":1994},{"type":24,"value":1996},{"type":19,"tag":70,"props":3701,"children":3702},{},[3703,3707],{"type":19,"tag":37,"props":3704,"children":3705},{},[3706],{"type":24,"value":2004},{"type":24,"value":2006},{"type":19,"tag":70,"props":3709,"children":3710},{},[3711,3715],{"type":19,"tag":37,"props":3712,"children":3713},{},[3714],{"type":24,"value":2014},{"type":24,"value":2016},{"type":19,"tag":70,"props":3717,"children":3718},{},[3719,3723],{"type":19,"tag":37,"props":3720,"children":3721},{},[3722],{"type":24,"value":2024},{"type":24,"value":2026},{"title":6,"searchDepth":209,"depth":209,"links":3725},[3726,3727,3728,3729,3730,3731,3732,3733],{"id":1479,"depth":209,"text":1482},{"id":1534,"depth":209,"text":1537},{"id":1575,"depth":209,"text":1578},{"id":1606,"depth":209,"text":1609},{"id":1723,"depth":209,"text":1726},{"id":1838,"depth":209,"text":1841},{"id":1941,"depth":209,"text":1944},{"id":620,"depth":209,"text":623},{"_path":745,"_dir":221,"_draft":7,"_partial":7,"_locale":6,"title":746,"description":747,"keywords":748,"slug":749,"pagetitle":746,"longPageTitle":746,"date":750,"longDate":751,"serpDate":752,"tags":3735,"category":754,"featured":234,"canonicalUrl":755,"projectCompany":756,"projectLink":13,"projectThumbnail":757,"projectMedia":3736,"pageClassName":13,"nextProjectSlug":760,"schemaImage1x1":759,"schemaImage4x3":759,"schemaImage16x9":759,"ctaTitle":761,"ctaSubtitle":762,"ctaButtonText":763,"ctaButtonURL":220,"body":3737,"_type":213,"_id":1418,"_source":215,"_file":1419,"_stem":1420,"_extension":218},[230,231,232],[759],{"type":16,"children":3738,"toc":4249},[3739,3743,3752,3756,3771,3775,3779,3783,3787,3806,3815,3819,3823,3832,3847,3851,3855,3859,3863,3874,3878,3882,3886,3905,3909,3920,3924,3928,3932,3936,3947,3951,3955,3959,3970,3974,3985,3989,3993,4016,4020,4031,4035,4039,4043,4047,4051,4059,4063,4067,4071,4086,4090,4094,4102,4110,4114,4118,4122,4126,4130,4134],{"type":19,"tag":20,"props":3740,"children":3741},{},[3742],{"type":24,"value":770},{"type":19,"tag":20,"props":3744,"children":3745},{},[3746,3747,3751],{"type":24,"value":775},{"type":19,"tag":37,"props":3748,"children":3749},{},[3750],{"type":24,"value":231},{"type":24,"value":781},{"type":19,"tag":20,"props":3753,"children":3754},{},[3755],{"type":24,"value":786},{"type":19,"tag":66,"props":3757,"children":3758},{},[3759,3763,3767],{"type":19,"tag":70,"props":3760,"children":3761},{},[3762],{"type":24,"value":794},{"type":19,"tag":70,"props":3764,"children":3765},{},[3766],{"type":24,"value":799},{"type":19,"tag":70,"props":3768,"children":3769},{},[3770],{"type":24,"value":804},{"type":19,"tag":20,"props":3772,"children":3773},{},[3774],{"type":24,"value":809},{"type":19,"tag":20,"props":3776,"children":3777},{},[3778],{"type":24,"value":814},{"type":19,"tag":269,"props":3780,"children":3781},{"id":817},[3782],{"type":24,"value":820},{"type":19,"tag":20,"props":3784,"children":3785},{},[3786],{"type":24,"value":825},{"type":19,"tag":66,"props":3788,"children":3789},{},[3790,3794,3798,3802],{"type":19,"tag":70,"props":3791,"children":3792},{},[3793],{"type":24,"value":833},{"type":19,"tag":70,"props":3795,"children":3796},{},[3797],{"type":24,"value":838},{"type":19,"tag":70,"props":3799,"children":3800},{},[3801],{"type":24,"value":843},{"type":19,"tag":70,"props":3803,"children":3804},{},[3805],{"type":24,"value":848},{"type":19,"tag":20,"props":3807,"children":3808},{},[3809,3810,3814],{"type":24,"value":853},{"type":19,"tag":37,"props":3811,"children":3812},{},[3813],{"type":24,"value":858},{"type":24,"value":860},{"type":19,"tag":269,"props":3816,"children":3817},{"id":863},[3818],{"type":24,"value":866},{"type":19,"tag":20,"props":3820,"children":3821},{},[3822],{"type":24,"value":871},{"type":19,"tag":20,"props":3824,"children":3825},{},[3826,3827,3831],{"type":24,"value":876},{"type":19,"tag":37,"props":3828,"children":3829},{},[3830],{"type":24,"value":881},{"type":24,"value":883},{"type":19,"tag":66,"props":3833,"children":3834},{},[3835,3839,3843],{"type":19,"tag":70,"props":3836,"children":3837},{},[3838],{"type":24,"value":891},{"type":19,"tag":70,"props":3840,"children":3841},{},[3842],{"type":24,"value":896},{"type":19,"tag":70,"props":3844,"children":3845},{},[3846],{"type":24,"value":901},{"type":19,"tag":269,"props":3848,"children":3849},{"id":904},[3850],{"type":24,"value":907},{"type":19,"tag":59,"props":3852,"children":3853},{"id":910},[3854],{"type":24,"value":913},{"type":19,"tag":20,"props":3856,"children":3857},{},[3858],{"type":24,"value":918},{"type":19,"tag":20,"props":3860,"children":3861},{},[3862],{"type":24,"value":923},{"type":19,"tag":20,"props":3864,"children":3865},{},[3866],{"type":19,"tag":98,"props":3867,"children":3868},{},[3869,3873],{"type":19,"tag":37,"props":3870,"children":3871},{},[3872],{"type":24,"value":934},{"type":24,"value":936},{"type":19,"tag":59,"props":3875,"children":3876},{"id":939},[3877],{"type":24,"value":942},{"type":19,"tag":20,"props":3879,"children":3880},{},[3881],{"type":24,"value":947},{"type":19,"tag":20,"props":3883,"children":3884},{},[3885],{"type":24,"value":952},{"type":19,"tag":66,"props":3887,"children":3888},{},[3889,3893,3897,3901],{"type":19,"tag":70,"props":3890,"children":3891},{},[3892],{"type":24,"value":960},{"type":19,"tag":70,"props":3894,"children":3895},{},[3896],{"type":24,"value":965},{"type":19,"tag":70,"props":3898,"children":3899},{},[3900],{"type":24,"value":970},{"type":19,"tag":70,"props":3902,"children":3903},{},[3904],{"type":24,"value":975},{"type":19,"tag":20,"props":3906,"children":3907},{},[3908],{"type":24,"value":980},{"type":19,"tag":20,"props":3910,"children":3911},{},[3912],{"type":19,"tag":98,"props":3913,"children":3914},{},[3915,3919],{"type":19,"tag":37,"props":3916,"children":3917},{},[3918],{"type":24,"value":934},{"type":24,"value":992},{"type":19,"tag":59,"props":3921,"children":3922},{"id":995},[3923],{"type":24,"value":998},{"type":19,"tag":20,"props":3925,"children":3926},{},[3927],{"type":24,"value":1003},{"type":19,"tag":20,"props":3929,"children":3930},{},[3931],{"type":24,"value":1008},{"type":19,"tag":20,"props":3933,"children":3934},{},[3935],{"type":24,"value":1013},{"type":19,"tag":20,"props":3937,"children":3938},{},[3939],{"type":19,"tag":98,"props":3940,"children":3941},{},[3942,3946],{"type":19,"tag":37,"props":3943,"children":3944},{},[3945],{"type":24,"value":934},{"type":24,"value":1025},{"type":19,"tag":59,"props":3948,"children":3949},{"id":1028},[3950],{"type":24,"value":1031},{"type":19,"tag":20,"props":3952,"children":3953},{},[3954],{"type":24,"value":1036},{"type":19,"tag":20,"props":3956,"children":3957},{},[3958],{"type":24,"value":1041},{"type":19,"tag":66,"props":3960,"children":3961},{},[3962,3966],{"type":19,"tag":70,"props":3963,"children":3964},{},[3965],{"type":24,"value":1049},{"type":19,"tag":70,"props":3967,"children":3968},{},[3969],{"type":24,"value":1054},{"type":19,"tag":20,"props":3971,"children":3972},{},[3973],{"type":24,"value":1059},{"type":19,"tag":20,"props":3975,"children":3976},{},[3977],{"type":19,"tag":98,"props":3978,"children":3979},{},[3980,3984],{"type":19,"tag":37,"props":3981,"children":3982},{},[3983],{"type":24,"value":934},{"type":24,"value":1071},{"type":19,"tag":59,"props":3986,"children":3987},{"id":1074},[3988],{"type":24,"value":1077},{"type":19,"tag":20,"props":3990,"children":3991},{},[3992],{"type":24,"value":1082},{"type":19,"tag":66,"props":3994,"children":3995},{},[3996,4000,4004,4008,4012],{"type":19,"tag":70,"props":3997,"children":3998},{},[3999],{"type":24,"value":1090},{"type":19,"tag":70,"props":4001,"children":4002},{},[4003],{"type":24,"value":1095},{"type":19,"tag":70,"props":4005,"children":4006},{},[4007],{"type":24,"value":1100},{"type":19,"tag":70,"props":4009,"children":4010},{},[4011],{"type":24,"value":1105},{"type":19,"tag":70,"props":4013,"children":4014},{},[4015],{"type":24,"value":1110},{"type":19,"tag":20,"props":4017,"children":4018},{},[4019],{"type":24,"value":1115},{"type":19,"tag":20,"props":4021,"children":4022},{},[4023],{"type":19,"tag":98,"props":4024,"children":4025},{},[4026,4030],{"type":19,"tag":37,"props":4027,"children":4028},{},[4029],{"type":24,"value":934},{"type":24,"value":1127},{"type":19,"tag":269,"props":4032,"children":4033},{"id":1130},[4034],{"type":24,"value":1133},{"type":19,"tag":59,"props":4036,"children":4037},{"id":1136},[4038],{"type":24,"value":1139},{"type":19,"tag":20,"props":4040,"children":4041},{},[4042],{"type":24,"value":1144},{"type":19,"tag":20,"props":4044,"children":4045},{},[4046],{"type":24,"value":1149},{"type":19,"tag":20,"props":4048,"children":4049},{},[4050],{"type":24,"value":1154},{"type":19,"tag":20,"props":4052,"children":4053},{},[4054,4058],{"type":19,"tag":37,"props":4055,"children":4056},{},[4057],{"type":24,"value":1162},{"type":24,"value":1164},{"type":19,"tag":59,"props":4060,"children":4061},{"id":1167},[4062],{"type":24,"value":1170},{"type":19,"tag":20,"props":4064,"children":4065},{},[4066],{"type":24,"value":1175},{"type":19,"tag":20,"props":4068,"children":4069},{},[4070],{"type":24,"value":1180},{"type":19,"tag":1182,"props":4072,"children":4073},{},[4074,4078,4082],{"type":19,"tag":70,"props":4075,"children":4076},{},[4077],{"type":24,"value":1189},{"type":19,"tag":70,"props":4079,"children":4080},{},[4081],{"type":24,"value":1194},{"type":19,"tag":70,"props":4083,"children":4084},{},[4085],{"type":24,"value":1199},{"type":19,"tag":20,"props":4087,"children":4088},{},[4089],{"type":24,"value":1204},{"type":19,"tag":20,"props":4091,"children":4092},{},[4093],{"type":24,"value":1209},{"type":19,"tag":20,"props":4095,"children":4096},{},[4097,4101],{"type":19,"tag":37,"props":4098,"children":4099},{},[4100],{"type":24,"value":1217},{"type":24,"value":1219},{"type":19,"tag":20,"props":4103,"children":4104},{},[4105,4109],{"type":19,"tag":37,"props":4106,"children":4107},{},[4108],{"type":24,"value":1227},{"type":24,"value":1229},{"type":19,"tag":269,"props":4111,"children":4112},{"id":604},[4113],{"type":24,"value":607},{"type":19,"tag":20,"props":4115,"children":4116},{},[4117],{"type":24,"value":1238},{"type":19,"tag":20,"props":4119,"children":4120},{},[4121],{"type":24,"value":1243},{"type":19,"tag":20,"props":4123,"children":4124},{},[4125],{"type":24,"value":1248},{"type":19,"tag":20,"props":4127,"children":4128},{},[4129],{"type":24,"value":1253},{"type":19,"tag":269,"props":4131,"children":4132},{"id":620},[4133],{"type":24,"value":623},{"type":19,"tag":66,"props":4135,"children":4136},{},[4137,4145,4153,4161,4169,4177,4185,4193,4201,4209,4217,4225,4233,4241],{"type":19,"tag":70,"props":4138,"children":4139},{},[4140,4144],{"type":19,"tag":37,"props":4141,"children":4142},{},[4143],{"type":24,"value":1268},{"type":24,"value":1270},{"type":19,"tag":70,"props":4146,"children":4147},{},[4148,4152],{"type":19,"tag":37,"props":4149,"children":4150},{},[4151],{"type":24,"value":1278},{"type":24,"value":1280},{"type":19,"tag":70,"props":4154,"children":4155},{},[4156,4160],{"type":19,"tag":37,"props":4157,"children":4158},{},[4159],{"type":24,"value":1288},{"type":24,"value":1290},{"type":19,"tag":70,"props":4162,"children":4163},{},[4164,4168],{"type":19,"tag":37,"props":4165,"children":4166},{},[4167],{"type":24,"value":1298},{"type":24,"value":1300},{"type":19,"tag":70,"props":4170,"children":4171},{},[4172,4176],{"type":19,"tag":37,"props":4173,"children":4174},{},[4175],{"type":24,"value":1308},{"type":24,"value":1310},{"type":19,"tag":70,"props":4178,"children":4179},{},[4180,4184],{"type":19,"tag":37,"props":4181,"children":4182},{},[4183],{"type":24,"value":1318},{"type":24,"value":1320},{"type":19,"tag":70,"props":4186,"children":4187},{},[4188,4192],{"type":19,"tag":37,"props":4189,"children":4190},{},[4191],{"type":24,"value":1328},{"type":24,"value":1330},{"type":19,"tag":70,"props":4194,"children":4195},{},[4196,4200],{"type":19,"tag":37,"props":4197,"children":4198},{},[4199],{"type":24,"value":1338},{"type":24,"value":1340},{"type":19,"tag":70,"props":4202,"children":4203},{},[4204,4208],{"type":19,"tag":37,"props":4205,"children":4206},{},[4207],{"type":24,"value":1348},{"type":24,"value":1350},{"type":19,"tag":70,"props":4210,"children":4211},{},[4212,4216],{"type":19,"tag":37,"props":4213,"children":4214},{},[4215],{"type":24,"value":1358},{"type":24,"value":1360},{"type":19,"tag":70,"props":4218,"children":4219},{},[4220,4224],{"type":19,"tag":37,"props":4221,"children":4222},{},[4223],{"type":24,"value":1368},{"type":24,"value":1370},{"type":19,"tag":70,"props":4226,"children":4227},{},[4228,4232],{"type":19,"tag":37,"props":4229,"children":4230},{},[4231],{"type":24,"value":1378},{"type":24,"value":1380},{"type":19,"tag":70,"props":4234,"children":4235},{},[4236,4240],{"type":19,"tag":37,"props":4237,"children":4238},{},[4239],{"type":24,"value":1388},{"type":24,"value":1390},{"type":19,"tag":70,"props":4242,"children":4243},{},[4244,4248],{"type":19,"tag":37,"props":4245,"children":4246},{},[4247],{"type":24,"value":1398},{"type":24,"value":1400},{"title":6,"searchDepth":209,"depth":209,"links":4250},[4251,4252,4253,4260,4264,4265],{"id":817,"depth":209,"text":820},{"id":863,"depth":209,"text":866},{"id":904,"depth":209,"text":907,"children":4254},[4255,4256,4257,4258,4259],{"id":910,"depth":212,"text":913},{"id":939,"depth":212,"text":942},{"id":995,"depth":212,"text":998},{"id":1028,"depth":212,"text":1031},{"id":1074,"depth":212,"text":1077},{"id":1130,"depth":209,"text":1133,"children":4261},[4262,4263],{"id":1136,"depth":212,"text":1139},{"id":1167,"depth":212,"text":1170},{"id":604,"depth":209,"text":607},{"id":620,"depth":209,"text":623},1777371992815]