[{"data":1,"prerenderedAt":781},["ShallowReactive",2],{"projects-query":3},[4,49,166,287,382,463,612,735],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"client":11,"year":12,"services":13,"casestudy":17,"introduction":18,"stats":19,"cover":20,"isProtected":17,"hash":22,"slug":23,"body":24,"_type":42,"_id":43,"_source":44,"_file":45,"_stem":46,"_extension":47,"sitemap":48},"/projects/vodafone-my-vodafone-online-repair-journey","projects",false,"","Vodafone My Vodafone Online Repair Journey","No, really, I can't show you. Don't get me wrong - I'd *really* like to, but people might get annoyed and that'd just break my heart.","Vodafone",2024,[14,15,16],"Team Lead","UX/UI Design","Service Design",true,"To be honest, it might be broken already. After all, you've gone through all this effort in debugging the page and hiding/removing the password prompt, and all you've gotten to show for it is this condescending message. And you know what? I feel bad for that.\n    \nI could have put anything here. I could have just put [REDACTED]. Or like an inspirational quote or Rupi Kaur poem. That would have made your day, I bet. Like walking by a claw machine in an arcade and finding a cuddly toy behind that little door where you collect the prize.",[],{"src":21},"/img/projects/vodafone/cover.webp","$2b$10$r.1bqitQTCXoiIV3FV3FR.7oNGHpMvWEEVL8bobgNCLn9Wi1JS9IS","vodafone-my-vodafone-online-repair-journey",{"type":25,"children":26,"toc":39},"root",[27],{"type":28,"tag":29,"props":30,"children":32},"element","text",{"heading":31},"Lorem ipsum dolor sit amet consectetur.",[33],{"type":28,"tag":34,"props":35,"children":36},"p",{},[37],{"type":29,"value":38},"Lorem ipsum dolor sit amet consectetur. Sollicitudin amet eget rhoncus pulvinar non et arcu mauris felis. Fringilla tempor pretium rutrum amet posuere. Euismod augue iaculis sed urna. Viverra adipiscing pulvinar semper quam neque tempus. Eget etiam tincidunt dignissim arcu. Nibh ultrices sed purus lectus ante nulla blandit vestibulum.",{"title":8,"searchDepth":40,"depth":40,"links":41},2,[],"markdown","content:projects:vodafone-my-vodafone-online-repair-journey.md","content","projects/vodafone-my-vodafone-online-repair-journey.md","projects/vodafone-my-vodafone-online-repair-journey","md",{"loc":5},{"_path":50,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":51,"description":52,"client":53,"year":54,"services":55,"live_url":58,"casestudy":17,"password":7,"introduction":59,"stats":60,"cover":69,"header":76,"body":78,"_type":42,"_id":162,"_source":44,"_file":163,"_stem":164,"_extension":47,"sitemap":165},"/projects/ottoconi-luxury-villa-brochure-site","Ottoconi Luxury Villa Brochure Site","Celebrating a centuries-old restored trullo in a modern digital experience.","OttoConi",2023,[15,56,57],"Front-end Development","Brand Design","https://www.ottoconi.com","OttoConi is a luxury trullo - a traditional Apulian stone dwelling dating back to 1867 - lovingly restored by a group of entrepreneurs into a countryside retreat for the discerning traveller.\n\nWhile the property had already been successfully listed through an established rental operator, the owners recognised an opportunity to establish their own digital presence, their own brand; the ability to tell the trullo's story on their own terms. Working with the owners, I helped develop a unique brand identity & immersive digital experience for the property, complementing the operators' own marketing and sending additional leads their way.\n",[61,65],{"figure":62,"label":63,"description":64},"34%","year-on-year visitor growth","Organic traffic grew from 376 unique visitors in 2024 to 504 in 2025, with no paid marketing.",{"figure":66,"label":67,"description":68},"47%","year-on-year increase in referrals","Click-throughs to the booking operator rose from 83 in 2024 to 122 in 2025.",[70,73],{"src":71,"type":72},"/img/projects/ottoconi/cover.webm","video/webm",{"src":74,"type":75},"/img/projects/ottoconi/cover.mp4","video/mp4",{"src":77},"/img/projects/ottoconi/header.webp",{"type":25,"children":79,"toc":160},[80,94,101,110,116,121,140,146,155],{"type":28,"tag":29,"props":81,"children":83},{"heading":82},"Building a brand",[84,89],{"type":28,"tag":34,"props":85,"children":86},{},[87],{"type":29,"value":88},"While the property was listed through an established rental operator, it was but one property among the hundreds in their portfolio. The owners desired their own platform with which to tell their story - not to compete with the operator as a booking channel - but to do justice to the trullo's storied history and establish a brand independent from that of the operator.",{"type":28,"tag":34,"props":90,"children":91},{},[92],{"type":29,"value":93},"With the name already decided - meaning 'eight cones' in Italian - but little else in terms of visual identity, I started by designing a logomark that spoke to both the trullo's heritage and its distinctive architectural form. Three interlocking arched shapes rise within a containing circle, evoking the silhouette of the trullo's conical roof cast in front of the Mediterranean sunset. This understated geometric form is accompanied by a generously spaced wordmark set in bold, grotesk capitals, a nod to the contemporary twist on a classic style.",{"type":28,"tag":95,"props":96,"children":100},"media",{":items":97,"caption":98,":inset":99},"[{\"src\":\"/img/projects/ottoconi/ottoconi-logomark.webp\"}]","The OttoConi logomark and wordmark.","false",[],{"type":28,"tag":29,"props":102,"children":104},{"heading":103},"Designing the experience",[105],{"type":28,"tag":34,"props":106,"children":107},{},[108],{"type":29,"value":109},"One of the biggest opportunities in creating a bespoke experience was the ability to present the trullo in far greater detail than the operator's standardised property listing page would allow. Rather than attempting to show all of the features & photographs within the confines of a single page, I decided to present the property room-by-room in a virtual 'Tour', each with its own gallery of images and list of features.",{"type":28,"tag":95,"props":111,"children":115},{":items":112,"caption":113,"background":114},"[{\"src\":\"/img/projects/ottoconi/tour-wireframe-1.webp\"},{\"src\":\"/img/projects/ottoconi/tour-wireframe-2.webp\"}]","Early wireframes exploring the room-by-room Tour concept.","static",[],{"type":28,"tag":95,"props":117,"children":120},{":items":118,"caption":119},"[{\"src\":\"/img/projects/ottoconi/tour.webm\",\"type\":\"video/webm\"},{\"src\":\"/img/projects/ottoconi/tour.mp4\",\"type\":\"video/mp4\"}]","The Tour feature as built, allowing visitors to explore each room in detail.",[],{"type":28,"tag":29,"props":122,"children":124},{"heading":123},"Building for independence",[125,130,135],{"type":28,"tag":34,"props":126,"children":127},{},[128],{"type":29,"value":129},"Having researched the industry and what prospective clients responded to, I realised it was crucial that the owners had the infrastructure and the knowledge to make content updates themselves. I learned that the trullo's presentation and features would evolve with the seasons; furniture gets upgraded, décor can change - all of which necessitates new copy and/or photography coming in.",{"type":28,"tag":34,"props":131,"children":132},{},[133],{"type":29,"value":134},"I settled on Strapi as a CMS solution; as an open-source headless CMS, it gave me the ability to define the custom content models required - not just for pages, but also rooms & amenities - while giving the owners the ability to make structured edits through a clean, easy-to-understand admin interface & without the need to touch any code.",{"type":28,"tag":34,"props":136,"children":137},{},[138],{"type":29,"value":139},"For the front-end, I built the site using Nuxt, which provided server-side rendering for better SEO performance. I used GraphQL to fetch precisely the data needed for each view, keeping the site lean and fast, while TailwindCSS handled the styling throughout.",{"type":28,"tag":95,"props":141,"children":145},{":items":142,"caption":143,"background":144},"[{\"src\":\"/img/projects/ottoconi/strapi_all_rooms.webp\"},{\"src\":\"/img/projects/ottoconi/strapi_editing_room.webp\"}]","Custom content models in Strapi for pages, rooms, and amenities.","dynamic",[],{"type":28,"tag":29,"props":147,"children":149},{"heading":148},"Quiet growth",[150],{"type":28,"tag":34,"props":151,"children":152},{},[153],{"type":29,"value":154},"Since launching towards the end of 2023, the site has grown steadily through purely organic traffic. In 2024 - its first full year - it attracted 376 unique visitors, a figure which increased to 504 in 2025. Crucially, clickthroughs to the operator's site increased by a substantial 47% over the same period, rising from 83 to 122.",{"type":28,"tag":95,"props":156,"children":159},{":items":157,"caption":158,"background":114},"[{\"src\":\"/img/projects/ottoconi/feature.webm\",\"type\":\"video/webm\"},{\"src\":\"/img/projects/ottoconi/feature.mp4\",\"type\":\"video/mp4\"}]","The live site at ottoconi.com.",[],{"title":8,"searchDepth":40,"depth":40,"links":161},[],"content:projects:ottoconi-luxury-villa-brochure-site.md","projects/ottoconi-luxury-villa-brochure-site.md","projects/ottoconi-luxury-villa-brochure-site",{"loc":50},{"_path":167,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":168,"description":169,"client":170,"collaborators":171,"year":176,"services":177,"casestudy":17,"draft":7,"password":7,"introduction":179,"cover":180,"header":182,"body":183,"_type":42,"_id":283,"_source":44,"_file":284,"_stem":285,"_extension":47,"sitemap":286},"/projects/city-fibre-website-design-and-replatform","City Fibre Website Design And Replatform","Communicating the value of true full fibre broadband.","CityFibre",[172],{"name":173,"logo":174,"site":175},"Dawson Andrews","/img/collaborators/DA.png","https://www.dawsonandrews.com",2022,[15,57,178],"Design System","CityFibre is a leading provider of full fibre broadband infrastructure, empowering various UK network operators to deliver high-speed connectivity to homes and businesses.\n\nDuring a six-month engagement with agency Dawson Andrews, I was tasked with designing & developing their marketing site to elevate the brand within a crowded market and effectively articulate the benefits of full fibre technology.\n",{"src":181},"/img/projects/cityfibre/cover.jpg",{"src":181},{"type":25,"children":184,"toc":281},[185,189,203,208,213,232,238,252,257,276],{"type":28,"tag":95,"props":186,"children":188},{":items":187,":inset":99,"background":144},"[{\"src\":\"/img/projects/cityfibre/homepage_mock.webp\"}]",[],{"type":28,"tag":29,"props":190,"children":192},{"heading":191},"Not all fibre is created equal",[193,198],{"type":28,"tag":34,"props":194,"children":195},{},[196],{"type":29,"value":197},"Though it has increased in popularity & availability by today's standards, the notion of 'full fibre' in 2022 was relatively unheard of. Most consumer-grade broadband packages marketed as 'fibre' broadband at the time would often only utilise fibre optic cables to carry data from the exchange to the street cabinet - with the final stretch relying on decades-old copper wiring, creating a bottleneck and significantly limiting the speed & reliability of the connection for the customer.",{"type":28,"tag":34,"props":199,"children":200},{},[201],{"type":29,"value":202},"True full fibre, on the other hand, utilises advanced fibre optic cables across the complete connection, from the exchange, all the way to the customer's premises. The key challenge faced in distinguishing CityFibre's offering from other 'part-fibre' solutions lay in effectively communicating this difference - and resulting benefits - to customers with varying degrees of technical knowledge.",{"type":28,"tag":95,"props":204,"children":207},{":items":205,"caption":206,":inset":99},"[{\"src\":\"/img/projects/cityfibre/wiff-1.mp4\",\"type\":\"video/mp4\"}]","An early idea for an interactive homepage section highlighting the differences between different broadband technologies.",[],{"type":28,"tag":95,"props":209,"children":212},{":items":210,"caption":211,":inset":99},"[{\"src\":\"/img/projects/cityfibre/wiff-2-desktop.mp4\",\"type\":\"video/mp4\"}]","An alternative interactive section emphasizing differences in the infrastructure. Testing indicated that this variation was most effective at communicating 'the full-fibre difference'.",[],{"type":28,"tag":29,"props":214,"children":216},{"heading":215},"Designing for everyone",[217,222,227],{"type":28,"tag":34,"props":218,"children":219},{},[220],{"type":29,"value":221},"At the outset of the project, we developed a diverse set of user personas to guide our design decisions. These personas represented a broad spectrum of socioeconomic backgrounds and varying levels of technical confidence, ensuring that any solutions would be approachable and relevant to all audiences.",{"type":28,"tag":34,"props":223,"children":224},{},[225],{"type":29,"value":226},"Special attention was given to those with limited understanding of technology, highlighting the importance of using simple, non-exclusionary language throughout the experience.",{"type":28,"tag":34,"props":228,"children":229},{},[230],{"type":29,"value":231},"By defining these archetypes early on in the process and referring back to them at each stage, we kept the user experience grounded in the real-world needs and perspectives of our diverse customer base.",{"type":28,"tag":95,"props":233,"children":237},{":items":234,"caption":235,":shadow":236,"background":144},"[{\"src\":\"/img/projects/cityfibre/personas.webp\"}]","Developing a range of personas at the project outset ensured decisions stayed user-focused.","true",[],{"type":28,"tag":29,"props":239,"children":241},{"heading":240},"Checking availability, building anticipation",[242,247],{"type":28,"tag":34,"props":243,"children":244},{},[245],{"type":29,"value":246},"One standout feature of the site was the postcode availability checker, allowing prospective customers to quickly find out whether CityFibre services were currently available in their area - and if not, to register their interest that they might receive future updates.",{"type":28,"tag":34,"props":248,"children":249},{},[250],{"type":29,"value":251},"The availability checker tool was particularly important owing to CityFibre still being in a relatively early growth phase with ambitions plans to scale nationwide. By capturing e-mail subscribers in areas not yet served, the company could build word-of-mouth awareness and keep potential customers engaged, ready to convert as soon as service became available.",{"type":28,"tag":95,"props":253,"children":256},{":items":254,"caption":255,":shadow":236},"[{\"src\":\"/img/projects/cityfibre/availability-checker.mp4\",\"type\":\"video/mp4\"}]","The availability checker was a vital feature for both directing eligible customers towards partner channels as well as capturing leads for prospective customers in areas not yet serviced.",[],{"type":28,"tag":29,"props":258,"children":260},{"heading":259},"Consistency by design",[261,266,271],{"type":28,"tag":34,"props":262,"children":263},{},[264],{"type":29,"value":265},"With an expansive sitemap comprising hundreds of pages to build for the first delivery phases alone, establishing a robust design system was a priority from the outset. To ensure visual and functional consistency across every page, we created a dedicated Figma library housing reusable UI patterns, typography styles, key artwork, the brand colour palette and even guidelines around tone of voice.",{"type":28,"tag":34,"props":267,"children":268},{},[269],{"type":29,"value":270},"This shared resource was configured to be available within all design files - whether spun up to explore early concepts or to handoff production-ready screens to developers - facilitating a 'define once, use everywhere' approach.",{"type":28,"tag":34,"props":272,"children":273},{},[274],{"type":29,"value":275},"By maintaining a single source of truth for these vital patterns, we empowered multiple workstreams to stay aligned and deliver a cohesive user experience, regardless of project phase or contributor.",{"type":28,"tag":95,"props":277,"children":280},{":items":278,"caption":279,":shadow":236,"background":144},"[{\"src\":\"/img/projects/cityfibre/cf_design_system.webp\"}]","Shared UI patterns created at the outset ensured a consistent rhythm across the product.",[],{"title":8,"searchDepth":40,"depth":40,"links":282},[],"content:projects:city-fibre-website-design-and-replatform.md","projects/city-fibre-website-design-and-replatform.md","projects/city-fibre-website-design-and-replatform",{"loc":167},{"_path":288,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":289,"description":290,"client":291,"collaborators":292,"year":176,"services":294,"casestudy":17,"password":7,"introduction":295,"cover":296,"header":298,"body":299,"_type":42,"_id":378,"_source":44,"_file":379,"_stem":380,"_extension":47,"sitemap":381},"/projects/murmur-luxury-bedding-ecommerce-site","Murmur Luxury Bedding Ecommerce Site","Building a premium e-commerce platform and design system for luxury bedding.","Murmur",[293],{"name":173,"logo":174,"site":175},[15,178],"When Bedeck of Belfast launched their new luxury line Murmur, I set out to craft an immersive e-commerce experience as refined and inviting as the linens themselves.\n\nTasked with showcasing both standalone pieces and curated bundles, I designed a chic, intuitive storefront reflecting the brand's unique sense of discreet and approachable opulence.\n\nThe result - a seamless blend of refined visuals and intuitive navigation, establishing a welcoming digital home for Murmur's discerning clientele.\n",{"src":297},"/img/projects/murmur/cover.jpg",{"src":297},{"type":25,"children":300,"toc":376},[301,315,320,334,338,352,357,371],{"type":28,"tag":29,"props":302,"children":304},{"heading":303},"A quiet kind of luxury.",[305,310],{"type":28,"tag":34,"props":306,"children":307},{},[308],{"type":29,"value":309},"Rather than compete with the immaculate composition of Murmur's product photography, the site's visual language was deliberately intended to get out of the way and allow the products themselves to shine.",{"type":28,"tag":34,"props":311,"children":312},{},[313],{"type":29,"value":314},"The site embraces a minimalist aesthetic with generous whitespace, subdued colour palette and a simple yet intuitive layout which gently nudges visitors towards the product category they seek without coming across as too aggressive, or overbearing.",{"type":28,"tag":95,"props":316,"children":319},{":items":317,":shadow":236,"background":144,"caption":318},"[{\"provider\":\"\",\"src\":\"/img/projects/murmur/desktop-homepage.png\"}]","A large hero image using a simple product composition anchors the homepage, with a convenient reference to the featured product and its configuration.",[],{"type":28,"tag":29,"props":321,"children":323},{"heading":322},"More ways to make a bed.",[324,329],{"type":28,"tag":34,"props":325,"children":326},{},[327],{"type":29,"value":328},"One of the most pivotal design challenges to overcome lay in the definition and presentation of complex product categories such as Bundles, a curated offering of certain product categories (such as a set of sheets, cushion and a pillow) offered at a fixed price or discounted compared to purchasing each individually.",{"type":28,"tag":34,"props":330,"children":331},{},[332],{"type":29,"value":333},"Collections, on the other hand, are more editorial groupings of products sharing a certain designer or theme, but surfaced directly on the product detail page to encourage deeper discovery of other products in that range.",{"type":28,"tag":95,"props":335,"children":337},{":items":336,":slider":236},"[{\"provider\":\"\",\"src\":\"/img/projects/murmur/pdp_phone_isolated_1x.webp\",\"caption\":\"A simple product detail page, where a customer may select between colour, size & material.\"},{\"provider\":\"\",\"src\":\"/img/projects/murmur/bundle_phone_isolated_1x.webp\",\"caption\":\"A bundle detail page where a customer can configure a predefined collection including a cushion, pillow & set of sheets.\"},{\"provider\":\"\",\"src\":\"/img/projects/murmur/collection_phone_isolated_1x.webp\",\"caption\":\"A collection detail page surfacing alternate sizes for each product in that theme (Muro).\"}]",[],{"type":28,"tag":29,"props":339,"children":341},{"heading":340},"A closer look, by design",[342,347],{"type":28,"tag":34,"props":343,"children":344},{},[345],{"type":29,"value":346},"Murmur's products speak volumes in texture and detail, so we gave customers a way to get closer by introducing an interactive 'inspect' block on the homepage; a hover-to-zoom feature that reveals the finer qualities of a high-resolution image such as the weave of linen, or the stitching on a cushion.",{"type":28,"tag":34,"props":348,"children":349},{},[350],{"type":29,"value":351},"The feature served as a subtle yet interactive tactile hook to quietly extol the craftsmanship of Murmur's product line while naturally being built to be flexibly & conveniently updated with images from updated seasonal lines.",{"type":28,"tag":95,"props":353,"children":356},{":items":354,":shadow":236,"background":144,"caption":355},"[{\"provider\":\"\",\"src\":\"/img/projects/murmur/desktop-homepage-inspect.png\"}]","The custom 'hover-to-zoom' feature uses a medium-resolution and ultra-high-resolution version of the same image to reveal minute details of the region sitting underneath the mouse cursor.",[],{"type":28,"tag":29,"props":358,"children":360},{"heading":359},"The beauty in the building blocks",[361,366],{"type":28,"tag":34,"props":362,"children":363},{},[364],{"type":29,"value":365},"As the experience began to expand across a multitude of screens and product types, it became clear that a flexible foundation was required to keep everything feeling cohesive. Enter a lightweight design system: reusable components for elements such as buttons, product info layouts and interactive form elements.",{"type":28,"tag":34,"props":367,"children":368},{},[369],{"type":29,"value":370},"This approach allowed for testing & refining details both in isolation and their relevant contexts, enuring that the overall experience remains polished & consistent.",{"type":28,"tag":95,"props":372,"children":375},{":items":373,":shadow":236,"background":144,"caption":374},"[{\"provider\":\"\",\"src\":\"/img/projects/murmur/design-system-ui-patterns.png\"}]","A selection of isolated UI patterns from the design system, including buttons, product info lockups, and custom form inputs including a (price) range slider and quantity inputs.",[],{"title":8,"searchDepth":40,"depth":40,"links":377},[],"content:projects:murmur-luxury-bedding-ecommerce-site.md","projects/murmur-luxury-bedding-ecommerce-site.md","projects/murmur-luxury-bedding-ecommerce-site",{"loc":288},{"_path":383,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":384,"description":385,"client":386,"year":387,"services":388,"casestudy":17,"introduction":390,"password":7,"cover":391,"body":393,"_type":42,"_id":459,"_source":44,"_file":460,"_stem":461,"_extension":47,"sitemap":462},"/projects/macmillan-cancer-support-worlds-biggest-coffee-morning","Macmillan Cancer Support Worlds Biggest Coffee Morning","A modern redesign for the charity's biggest annual fundraising campaign.","Macmillan Cancer Support",2020,[389],"UI Design","During a short-term contract with Macmillan Cancer Support, I was tasked with redesigning the campaign page for their flagship event - World's Biggest Coffee Morning.\n\nThe goal: make browsing more enticing and each recipe easier to follow, so volunteers could spend less time searching and more time baking. The result was an engaging, inviting experience that put the fun of baking at the heart of the campaign.\n",{"src":392},"/img/projects/macmillan-cancer-support/cover.jpg",{"type":25,"children":394,"toc":457},[395,414,419,433,438,452],{"type":28,"tag":29,"props":396,"children":398},{"heading":397},"Assembling the right ingredients",[399,404,409],{"type":28,"tag":34,"props":400,"children":401},{},[402],{"type":29,"value":403},"My initial wireframes for the recipe grid and detail pages helped clarify the essential features for a successful campaign.",{"type":28,"tag":34,"props":405,"children":406},{},[407],{"type":29,"value":408},"On the grid page, it was clear that the search and filter options - by name, ingredient or other criteria - would be vital for helping participants quickly find the perfect recipe.",{"type":28,"tag":34,"props":410,"children":411},{},[412],{"type":29,"value":413},"The the recipe detail page, the wireframes focused on clarity and usability: a well-organised list of ingredients and measurements, easy-to-follow preparation steps, and convenient sharing options. To encourage further discovery and help prevent potential drop-off, a list of similar recipes was also included before the footer.",{"type":28,"tag":95,"props":415,"children":418},{":items":416,"caption":417},"[{\"src\":\"/img/projects/macmillan-cancer-support/wireframe-category.png\"},{\"src\":\"/img/projects/macmillan-cancer-support/wireframe-recipe.png\"}]","Early wireframes for the campaign helped clarify key requirements and informed a basic layout.",[],{"type":28,"tag":29,"props":420,"children":422},{"heading":421},"Scrolling through sweet possibilities",[423,428],{"type":28,"tag":34,"props":424,"children":425},{},[426],{"type":29,"value":427},"For the final version of the recipe grid page, I moved beyond a conventional grid layout, opting instead for a multi-row carousel made up of various categories & allowing users to scroll sideways in order to discover more recipes in each.",{"type":28,"tag":34,"props":429,"children":430},{},[431],{"type":29,"value":432},"This approach offered the best of both worlds: an inviting 'all recipes' overview, cogently split by organised category headings for a more focused experience.",{"type":28,"tag":95,"props":434,"children":437},{":items":435,"caption":436,":shadow":236,"background":144},"[{\"src\":\"/img/projects/macmillan-cancer-support/desktop-category-full.png\"}]","The design for the recipe grid page uses a sequence of carousel rows to distinguish each category.",[],{"type":28,"tag":29,"props":439,"children":441},{"heading":440},"A layout that's easy to digest",[442,447],{"type":28,"tag":34,"props":443,"children":444},{},[445],{"type":29,"value":446},"The recipe detail page was designed to be visually striking yet functional; a bold, full-width image of the featured bake sets the scene, while the body content overlaps the image to create a modern, inviting look. Key actions such as sharing/printing are placed front and centre, making it effortless for participants to share recipes or simply to bring a printed copy into their kitchen.",{"type":28,"tag":34,"props":448,"children":449},{},[450],{"type":29,"value":451},"For the recipe itself, ingredients and preparation steps are split into separate columns, with the latter also being presented as a clear, numbered list - making each stage of the recipe easy to follow and reducing the chance of mistakes.",{"type":28,"tag":95,"props":453,"children":456},{":items":454,"caption":455,":shadow":236,"background":144},"[{\"src\":\"/img/projects/macmillan-cancer-support/desktop-recipe-full.png\"}]","The recipe detail page uses a bold, full-width image and overlapping content to great a sense of depth & immersion.",[],{"title":8,"searchDepth":40,"depth":40,"links":458},[],"content:projects:macmillan-cancer-support-worlds-biggest-coffee-morning.md","projects/macmillan-cancer-support-worlds-biggest-coffee-morning.md","projects/macmillan-cancer-support-worlds-biggest-coffee-morning",{"loc":383},{"_path":464,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":465,"description":466,"client":467,"year":468,"services":469,"live_url":470,"casestudy":17,"password":7,"introduction":471,"stats":472,"cover":481,"header":486,"body":489,"_type":42,"_id":608,"_source":44,"_file":609,"_stem":610,"_extension":47,"sitemap":611},"/projects/british-council-bronte-design-system","British Council Bronte Design System","Building a unified design language for one of the UK's most prominent cultural organisations.","British Council",2019,[178,14,389],"https://britishcouncil.github.io/bronte","The British Council's digital estate had grown organically into a fragmented assortment of microsites — built on different technologies, managed by different teams, and each governed by different design standards. Beyond the maintenance overhead, the lack of brand cohesion undermined visitor confidence in the organisation's digital capabilities.\n\nPartnering with the British Council on a 12-month contract, I led the creation of Brontë - a comprehensive design system and its counterpart React.js component library. With a system-wide approach to theming, accessibility, and compatibility with a headless CMS, it laid the foundation for a more streamlined and engaging digital estate.\n",[473,477],{"figure":474,"label":475,"description":476},"30+","components delivered during tenure","During my 12-month engagement, I delivered 31 components addressing critical business needs.",{"figure":478,"label":479,"description":480},"7+","years in active use","The system - launched in 2019 - continues to remain in use across the British Council's digital estate.",[482,484],{"src":483,"type":72},"/img/projects/british-council/cover.webm",{"src":485,"type":75},"/img/projects/british-council/cover.mp4",{"provider":487,"src":488},"unsplash","photo-1660927059794-152d06e11016",{"type":25,"children":490,"toc":606},[491,505,509,525,530,544,549,563,568,587,592,597],{"type":28,"tag":29,"props":492,"children":494},{"heading":493},"A patchwork problem",[495,500],{"type":28,"tag":34,"props":496,"children":497},{},[498],{"type":29,"value":499},"The British Council already had an impressive digital footprint in 2019, with dedicated domains for Music, Arts & Film. However, they all each bore the all too common sign of having been worked on at different times, by different people, following different sets of design guidelines. To unfamiliar visitors, it wasn't nearly clear enough that each of these services was provided by the same organisation.",{"type":28,"tag":34,"props":501,"children":502},{},[503],{"type":29,"value":504},"Beyond the visual inconsistencies, this fragmentation also caused significant issues for the teams maintaining each of these sites. Teams were rebuilding the same interaction patterns over and over; content editors had to learn a different system for each brand. The digital estate had hit a ceiling.",{"type":28,"tag":95,"props":506,"children":508},{":items":507,":slider":236},"[{\"src\":\"/img/projects/british-council/archive-music.webp\",\"caption\":\"BC Music, before the Brontë redesign.\"},{\"src\":\"/img/projects/british-council/archive-film.webp\",\"caption\":\"BC Film, with a significantly different design direction.\"},{\"src\":\"/img/projects/british-council/archive-arts.webp\",\"caption\":\"BC Arts, showing yet another approach.\"}]",[],{"type":28,"tag":29,"props":510,"children":512},{"heading":511},"The brief",[513,518,520],{"type":28,"tag":34,"props":514,"children":515},{},[516],{"type":29,"value":517},"The proposed solution was a new design system, codenamed Brontë - not to make each property appear identical and rob them of their individual brand - but to provide a shared foundation via a library of reusable, themable components.",{"type":29,"value":519}," \n",{"type":28,"tag":34,"props":521,"children":522},{},[523],{"type":29,"value":524},"These would be authored in design files but also built as React.js components. Designers & developers would have a shared vocabulary to work from, content editors would be able to spin up pages faster without designer intervention, and visitors would finally feel like they were part of a wider ecosystem.",{"type":28,"tag":95,"props":526,"children":529},{":items":527,"caption":528},"[{\"src\":\"/img/projects/british-council/bronte-system-specimen.webp\"}]","A selection of components from the Brontë library.",[],{"type":28,"tag":29,"props":531,"children":533},{"heading":532},"The right tool for the right job",[534,539],{"type":28,"tag":34,"props":535,"children":536},{},[537],{"type":29,"value":538},"Brad Frost's 'Atomic Design' was a huge inspiration in shaping Brontë, establishing a framework where smaller, highly-specific 'atomic' components become constituent parts of larger 'molecules' & 'organisms', ensuring maximum reusability. Unfortunately, the design software the team had been using up until that point was quite lacking in its ability to accurately define components and nest them within one another. It also didn't allow our team to collaborate on the same file(s) in real time, which was crucial for moving at pace.",{"type":28,"tag":34,"props":540,"children":541},{},[542],{"type":29,"value":543},"I'd recently started using Figma on some personal projects and believed that the project's success or failure could hinge on this fundamental tooling choice. After making a case directly to BC's Head of Digital promising drastically improved collaboration & flexibility, we were able to migrate our existing 'work in progress' files and onboard all members in the team in less than two weeks. Such was its pronounced effect on our project that it came to be adopted as the go-to design tool across the business.",{"type":28,"tag":95,"props":545,"children":548},{":items":546,"caption":547},"[{\"src\":\"/img/projects/british-council/brad-frost-atomic-design-product.webp\"}]","Atomic Design provided an idiomatic framework for defining component authorship. (image credit: bradfrost.com)",[],{"type":28,"tag":29,"props":550,"children":552},{"heading":551},"The theming challenge",[553,558],{"type":28,"tag":34,"props":554,"children":555},{},[556],{"type":29,"value":557},"One of the trickier problems was around brand identity. The British Council isn't one monolithic brand — it's a family of interconnected services. We didn't want to completely strip away the creative flourishes of BC Film and BC Arts, but we also couldn't let teams customise everything however they wanted — that's how we'd ended up with the patchwork in the first place.",{"type":28,"tag":34,"props":559,"children":560},{},[561],{"type":29,"value":562},"The solution was a theming system that gave teams freedom within guardrails. Certain things - like component intent, spacing etc. — remained defined, while brand flourishes such as accent colours - remained customisable by each team. For example, a brand could say \"our primary colour is blue,\" but Brontë ultimately decided where that blue got used. It stopped well-intentioned but ultimately messy decisions from fragmenting the system again.",{"type":28,"tag":95,"props":564,"children":567},{":items":565,"caption":566},"[{\"src\":\"/img/projects/british-council/tile-list-default.webp\"},{\"src\":\"/img/projects/british-council/tile-list-arts.webp\"}]","Defining the theming layer allowed each brand to adopt the system without losing their identity.",[],{"type":28,"tag":29,"props":569,"children":571},{"heading":570},"Putting it to the test",[572,577,582],{"type":28,"tag":34,"props":573,"children":574},{},[575],{"type":29,"value":576},"Naturally, part of the acceptance criteria for the project was obviously the system against one of the properties we were trying to improve. The system looked great on paper, but it was just a means to an end; the real test was seeing whether it worked on an actual site. We tested continuously throughout the development lifecycle, working with partners in BC Arts and BC Film to map existing functionality to new components we'd created with their input.",{"type":28,"tag":34,"props":578,"children":579},{},[580],{"type":29,"value":581},"Working with these teams occasionally entailed requests that had to be carefully navigated in order to protect the long-term integrity of the system. With the ambition being for as much of the digital estate being powered by Brontë as possible, stakeholder appeals for highly specific patterns or customisation abilities outside the theming layer had to be diplomatically turned so that Brontë's focus could remain on features with the broadest usage potential.",{"type":28,"tag":34,"props":583,"children":584},{},[585],{"type":29,"value":586},"The feedback we received from testing was overwhelmingly positive. Editors found it significantly easier & more intuitive to build out pages, while visitors reported that the site looked more modern & performed significantly faster. This was a major milestone in Brontë's development, having proved that the system could accommodate the needs of a real product.",{"type":28,"tag":95,"props":588,"children":591},{":items":589,"caption":590,":inset":99},"[{\"src\":\"/img/projects/british-council/arts_720p.webm\",\"type\":\"video/webm\"}]","BC Arts - before & after.",[],{"type":28,"tag":95,"props":593,"children":596},{":items":594,"caption":595,":inset":99},"[{\"src\":\"/img/projects/british-council/film_720p.webm\",\"type\":\"video/webm\"}]","BC Film - before & after.",[],{"type":28,"tag":29,"props":598,"children":600},{"heading":599},"What we delivered",[601],{"type":28,"tag":34,"props":602,"children":603},{},[604],{"type":29,"value":605},"By the end of my 12-month engagement, the Brontë library had amassed just over 30 components - including essential 'atoms' such as buttons and input fields as well as fully fledged 'organisms' such as navigation menus and footers - all fully themable & documented. The page-level components (i.e. Hero, Article etc.) were integrated with Contentful, allowing editors to assemble pages without the help of a designer/developer - the workflow we'd envisioned at the start of the process.",{"title":8,"searchDepth":40,"depth":40,"links":607},[],"content:projects:british-council-bronte-design-system.md","projects/british-council-bronte-design-system.md","projects/british-council-bronte-design-system",{"loc":464},{"_path":613,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":614,"description":615,"client":616,"year":617,"services":618,"casestudy":17,"introduction":619,"stats":620,"draft":7,"cover":633,"header":635,"body":636,"_type":42,"_id":731,"_source":44,"_file":732,"_stem":733,"_extension":47,"sitemap":734},"/projects/the-thinking-traveller-villa-search-and-filter-flow","The Thinking Traveller Villa Search And Filter Flow","Connecting clients with their ideal luxury getaway, quicker.","The Thinking Traveller",2017,[15,56],"As part of the in-house product team at The Thinking Traveller, a luxury villa rental operator - I led the redesign of the site’s search and discovery experience - driven by a clear need to make property & amenity locations easier to understand.\n\nOne of the ways this issue was addressed was with the introduction of interactive map view - giving users a more intuitive, confident way to explore and book the right property for their needs.\n",[621,625,629],{"figure":622,"label":623,"description":624},"20%","reduction in task time for converting customers","Improved UX on the product grid page was credited with a significant reduction to the time it takes for a user to select a property.",{"figure":626,"label":627,"description":628},"12%","increase in AOV among returning customers","Search improvements drove deeper exploration of familiar regions among returning customers.",{"figure":630,"label":631,"description":632},"35%","decrease in avoidable calls to sales staff","UX improvements on the product page resulted in more queries being answered upfront.",{"src":634},"/img/projects/the-thinking-traveller/cover.png",{"src":634},{"type":25,"children":637,"toc":729},[638,652,657,676,681,686,705,710],{"type":28,"tag":29,"props":639,"children":641},{"heading":640},"Lost in the right place",[642,647],{"type":28,"tag":34,"props":643,"children":644},{},[645],{"type":29,"value":646},"Though the brand’s regional expertise was one of its core strengths, it inadvertently introduced friction for first-time visitors and those unfamiliar with the areas in which the company operated. Throughout key touchpoints in the search and discovery flow, properties were labelled using hyper-local place names which, while geographically accurate, often lacked the broader context visitors needed to make confident, informed decisions.",{"type":28,"tag":34,"props":648,"children":649},{},[650],{"type":29,"value":651},"As a result, many prospective customers felt compelled to call a member of the sales team for clarification—placing additional strain on internal resources and exposing a broader weakness in the digital experience. While the company continues to take pride in its meticulously trained sales staff, I believed the website should offer the same clarity and contextual understanding, empowering users to complete a booking—whether online or over the phone—on their own terms.",{"type":28,"tag":95,"props":653,"children":656},{":items":654,"caption":655},"[{\"src\":\"/img/projects/the-thinking-traveller/mondello-minerva-map.png\"}]","Although this villa resides in Mondello, a key driver for clients is its proximity to Palermo - something not mentioned or even hinted at on the card design.",[],{"type":28,"tag":29,"props":658,"children":660},{"heading":659},"Finding space for the bigger picture",[661,666,671],{"type":28,"tag":34,"props":662,"children":663},{},[664],{"type":29,"value":665},"With the problem clearly surfaced, a steering committee aligned on the solution: introduce a map interface which would sit adjacent to the property cards to provide the crucial context they lacked - helping visitors understand where each property resides relative to local amenities without leaving the site.",{"type":28,"tag":34,"props":667,"children":668},{},[669],{"type":29,"value":670},"To support this ambition, we first needed to rework the product grid. The existing layout was inefficient, with oversized, verbose cards arranged in a single column; compounded by the filter criteria shown permanently on the side, this left little room for visual clarity, and even less for the map.",{"type":28,"tag":34,"props":672,"children":673},{},[674],{"type":29,"value":675},"The product cards were redesigned to better support a more structured grid and to reduce visual clutter without sacrificing content, while the filters were reworked to employ a more progressive disclosure approach: collapsible controls with persistent summaries, shown only when relevant.",{"type":28,"tag":95,"props":677,"children":680},{":items":678,"caption":679,":shadow":236},"[{\"src\":\"/img/projects/the-thinking-traveller/wireframe.png\"}]","An early wireframe showing how the map interface might be included in the existing interface.",[],{"type":28,"tag":95,"props":682,"children":685},{":items":683,"caption":684},"[{\"src\":\"/img/projects/the-thinking-traveller/card-comparison.png\"}]","Comparison of the old vs. new property card design. The updated card improves scannability, integrates key details with icons, and adapts better to mobile layouts.",[],{"type":28,"tag":29,"props":687,"children":689},{"heading":688},"Putting it on the map",[690,695,700],{"type":28,"tag":34,"props":691,"children":692},{},[693],{"type":29,"value":694},"To bring the interactive map to life, we began by transforming the existing property location data into a more flexible JSON format. This enabled us to integrate seamlessly with the Google Maps API, plotting each villa as a custom-styled pin designed to blend in with the brand's existing design language.",{"type":28,"tag":34,"props":696,"children":697},{},[698],{"type":29,"value":699},"The interaction model was designed to reinforce clarity and engagement. Clicking a map pin would scroll its matching product card into view, subtly highlighting it with a soft glow to draw the user's eye and distinguish it within the grid. Hovering over a card, in turn, would highlight its corresponding pin. This intrinsic pairing helped bridge the gap between structured produc information, and the spatial awareness that many users were seeking.",{"type":28,"tag":34,"props":701,"children":702},{},[703],{"type":29,"value":704},"We also made the map function as a dynamic filter; after early internal testing revealed confusion when the grid showed results beyond those plotted in the visible map area, we updated the logic so that only properties within the current map view would be reflected in the adjacent product grid. This subtle change made zooming/panning the map not just an exploratory gesture, but a functional one.",{"type":28,"tag":95,"props":706,"children":709},{":items":707,"caption":708,":shadow":236},"[{\"src\":\"/img/projects/the-thinking-traveller/map-search-prototype.webm\",\"type\":\"video/webm\"},{\"src\":\"/img/projects/the-thinking-traveller/map-search-prototype.mp4\",\"type\":\"video/mp4\"}]","The map interface is designed to work harmoniously with the adjacent product grid.",[],{"type":28,"tag":29,"props":711,"children":713},{"heading":712},"Rolling it out",[714,719,724],{"type":28,"tag":34,"props":715,"children":716},{},[717],{"type":29,"value":718},"The new design was initially rolled out to 20% of users as part of an A/B test, giving us space to observe how real visitors responded to the new experience.",{"type":28,"tag":34,"props":720,"children":721},{},[722],{"type":29,"value":723},"Early signs were encouraging. We noticed that converting customers - on average - spent *less* time on the grid page, suggesting that they were finding suitable properties more efficiently. Returning users bucked that trend slightly: spending a similar (or slightly longer) time on the grid page, but were booking more high-value stays.",{"type":28,"tag":34,"props":725,"children":726},{},[727],{"type":29,"value":728},"Crucially, the most noticeable impact was a sharp drop in 'trivial' calls to the sales team for the sole purpose of clarifying basic location information - freeing them up to focus on qualified leads and sharing deeper local expertise.",{"title":8,"searchDepth":40,"depth":40,"links":730},[],"content:projects:the-thinking-traveller-villa-search-and-filter-flow.md","projects/the-thinking-traveller-villa-search-and-filter-flow.md","projects/the-thinking-traveller-villa-search-and-filter-flow",{"loc":613},{"_path":736,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":737,"description":738,"client":739,"agency":740,"year":741,"services":742,"casestudy":7,"password":7,"introduction":8,"cover":743,"body":745,"_type":42,"_id":777,"_source":44,"_file":778,"_stem":779,"_extension":47,"sitemap":780},"/projects/citizen-m-in-room-hospitality-app","Citizen M In Room Hospitality App","Bringing a hotel's in-room amenities to their guests' fingertips - literally.","CitizenM","iRiS Software Systems",2014,[389],{"src":744},"/img/projects/citizenm/screen-1.webp",{"type":25,"children":746,"toc":775},[747,756,761,770],{"type":28,"tag":29,"props":748,"children":750},{"heading":749},"At one's fingertips",[751],{"type":28,"tag":34,"props":752,"children":753},{},[754],{"type":29,"value":755},"At launch, the CitizenM in-room iPad application was the first of its kind, integrating with virtually all of the amenities in a guests' room and allowing them to be controlled from a single, beautifully designed interface.",{"type":28,"tag":95,"props":757,"children":760},{":inset":99,":items":758,"background":144,"caption":759},"[{\"src\":\"/img/projects/citizenm/screen-2.webp\"}]","TV & media control UI",[],{"type":28,"tag":29,"props":762,"children":764},{"heading":763},"A very literal univeral remote",[765],{"type":28,"tag":34,"props":766,"children":767},{},[768],{"type":29,"value":769},"The app offers not only media & HVAC controls but also acts as a 'digital concierge', allowing guests to make dinner reservations & order room service.",{"type":28,"tag":95,"props":771,"children":774},{":inset":99,":items":772,"background":144,"caption":773,":shadow":99},"[{\"src\":\"/img/projects/citizenm/screen-1.webp\"}]","Alarm clock UI",[],{"title":8,"searchDepth":40,"depth":40,"links":776},[],"content:projects:citizen-m-in-room-hospitality-app.md","projects/citizen-m-in-room-hospitality-app.md","projects/citizen-m-in-room-hospitality-app",{"loc":736},1776326187540]