[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-previews":3,"case-study-previews":129,"case-study-sections-en-lockcard":365,"case-study-sections-lockcard":532},["Reactive",4],[5,35,61,88],{"showImage":6,"isFeatured":6,"hero":7,"heroCaption":7,"id":8,"title":9,"shortDescription":15,"category":26,"tags":27,"readingDuration":32,"createdAt":33,"updatedAt":34,"slug":29},false,null,"cm8l9tbl5006s14of2lwhm6aw",{"id":10,"language":11,"value":12,"type":14},"cm975paaq00bk38jd0nejuhce","en",{"text":13},"Configurators","text",{"id":16,"language":11,"value":17,"type":25},"cm975paar00bm38jd6fcve6q0",{"type":18,"content":19},"doc",[20],{"type":21,"content":22},"paragraph",[23],{"text":24,"type":14},"In this article, we’ll explore what goes into building a great product configurator, sharing insights and lessons from our past projects.","richText","ECOMMERCE",[28,29,30,31],"configurator","configurators","apple","ecommerce",11,"2025-03-23T06:42:23.081Z","2025-04-07T14:18:12.192Z",{"showImage":6,"isFeatured":6,"hero":36,"heroCaption":7,"id":42,"title":43,"shortDescription":47,"category":55,"tags":56,"readingDuration":57,"createdAt":58,"updatedAt":59,"slug":60},{"id":37,"url":38,"alt":39,"type":40,"width":41,"height":41},"cm98pazwz01fyc8nkkbl5j6fg","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002F0623dcd8-36e7-46d3-9738-4705c440c2bf","Platform Examples","image\u002Fwebp",0,"cm8l9um2w006z14ofism8znn5",{"id":44,"language":11,"value":45,"type":14},"cm98pazwy01fsc8nk6s3p43ff",{"text":46},"The architecture of modern eCommerce platforms",{"id":48,"language":11,"value":49,"type":25},"cm98pazwz01fuc8nk67upqvuy",{"type":18,"content":50},[51],{"type":21,"content":52},[53],{"text":54,"type":14},"In today’s fast-paced e-commerce world, businesses need more than just a functional online store—they need a platform that’s flexible, scalable, and tailored to their brand. ","CATEGORY",[],9,"2025-03-23T06:43:23.336Z","2025-04-08T16:14:44.048Z","the-architecture-of-modern-ecommerce-platforms",{"showImage":6,"isFeatured":6,"hero":62,"heroCaption":7,"id":67,"title":68,"shortDescription":72,"category":80,"tags":81,"readingDuration":84,"createdAt":85,"updatedAt":86,"slug":87},{"id":63,"url":64,"alt":65,"type":66,"width":41,"height":41},"cm9ctxjio000o12zwkrijxeww","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002Fd1dc6d4d-9292-4aa3-abfd-a61662bd1428","New Ecommerce Overview","video\u002Fmp4","cm8u8zmxf018o13z9ras6v433",{"id":69,"language":11,"value":70,"type":14},"cm9ctxjin000i12zw1elqhr0y",{"text":71},"Smart eCommerce is Transforming Online Shopping",{"id":73,"language":11,"value":74,"type":25},"cm9ctxjin000k12zwr2ygg8vh",{"type":18,"content":75},[76],{"type":21,"content":77},[78],{"text":79,"type":14},"In this article, we explore how brands are leading the way with innovative tools and strategies to redefine digital retail.","Ecommerce",[26,82,83],"CONFIGURATOR","FINDER",14,"2025-03-29T13:29:13.683Z","2025-04-11T13:35:19.051Z","smart-ecommerce-is-transforming-online-shopping",{"showImage":6,"isFeatured":6,"hero":89,"heroCaption":93,"id":109,"title":110,"shortDescription":114,"category":122,"tags":123,"readingDuration":125,"createdAt":126,"updatedAt":127,"slug":128},{"id":90,"url":91,"alt":92,"type":40,"width":41,"height":41},"cm9ibgjfb00fy3fbt1ojhhzz2","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002F44644739-e704-437a-9228-c56606bff571","Img src: https:\u002F\u002Faiut.com\u002Fwp-content\u002Fuploads\u002F2020\u002F02\u002F01_top_linie-i-stanowiska-produkcyjne.png",{"id":94,"language":11,"value":95,"type":25},"cm9ibgjfa00fq3fbtzryh3o67",{"type":18,"content":96},[97],{"type":21,"content":98},[99,101],{"text":100,"type":14},"Img src: ",{"text":102,"type":14,"marks":103},"https:\u002F\u002Faiut.com\u002Fwp-content\u002Fuploads\u002F2020\u002F02\u002F01_top_linie-i-stanowiska-produkcyjne.png",[104],{"type":105,"attrs":106},"link",{"rel":107,"href":102,"target":108},"noopener noreferrer nofollow","_blank","cm9i6eht8006p3fbtu6slupwe",{"id":111,"language":11,"value":112,"type":14},"cm9ibgjfb00fs3fbtxzrplckc",{"text":113},"Enabling Engineers to fix issues in production lines 4x faster on their HMIs ",{"id":115,"language":11,"value":116,"type":25},"cm9ibgjfb00fu3fbtgcs5r29i",{"type":18,"content":117},[118],{"type":21,"content":119},[120],{"text":121,"type":14},"In this article I share a UX-concept for HMIs in the engineering industry that I have developed during my time at Siemens.","USER EXPERIENCE DESIGN",[124],"Siemens",2,"2025-04-15T07:23:16.268Z","2025-04-15T09:44:49.750Z","enabling-engineers-to-fix-issues-in-production-lines-4x-faster-on-their-hmis",["Reactive",130],[131,177,242],{"tags":132,"themeColor":133,"platform":134,"type":135,"technologies":136,"id":137,"title":138,"isFeatured":139,"isPrivate":139,"slug":140,"yearOfPublication":141,"brandName":138,"features":142,"url":144,"thumbnail":145,"logo":149,"createdAt":154,"updatedAt":155,"metrics":156,"description":157,"heading":165,"extendedDescription":169,"credits":176},[],"","desktop","Platform",[],"cma2927e80000os9w4yjc2tkp","Milde",true,"milde",2023,[134,143],"design-system","https:\u002F\u002Fwww.soehne.co",{"width":41,"height":41,"id":146,"url":147,"alt":148,"type":40},"cme5nn6to002z95j18aeixhx3","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002F18ca0cd8-0a21-47df-a8fd-3acdaa2aca1c","Der Milde Hero",{"width":41,"height":41,"id":150,"url":151,"alt":152,"type":153},"cme5nn6tr003195j1fploozth","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002F97ccf880-457e-46ae-b3d2-3d44af65e63e","Logo Der Milde Zahnarzt","image\u002Fsvg+xml","2025-04-29T08:33:05.240Z","2025-08-10T12:23:26.804Z",[],{"id":158,"language":11,"value":159,"type":25},"cme5nn6tw003495j1ljgp419n",{"type":18,"content":160},[161],{"type":21,"content":162},[163],{"text":164,"type":14},"During my time at Build in Amsterdam, we were entrusted with building a flagship configurator for Vitra’s entire furniture lineup. While doing so, we not only improved the digital shopping experience at every step but also set the stage for a playful yet elegant new UI language for Vitra.com.",{"id":166,"language":11,"value":167,"type":14},"cme5nn6tw003295j1lcihw0sy",{"text":168},"Der Milde Dental Platform",{"id":170,"language":11,"value":171,"type":25},"cme5nn6tx003695j1ne6u9r0f",{"type":18,"content":172},[173],{"type":21,"content":174},[175],{"text":164,"type":14},[],{"tags":178,"themeColor":179,"platform":134,"type":180,"technologies":181,"id":187,"title":193,"isFeatured":139,"isPrivate":139,"slug":194,"yearOfPublication":195,"brandName":124,"features":196,"url":199,"thumbnail":200,"logo":206,"createdAt":211,"updatedAt":212,"metrics":213,"description":214,"heading":222,"extendedDescription":226,"credits":234},[],"#0A1519","HMI",[182,188],{"id":183,"category":184,"technologies":185,"caseStudyId":187},"cmfsjq1wd0015122prk9ullcv","Design",[186],"Figma","cm9i9ajyq007b3fbtq07qrv6r",{"id":189,"category":190,"technologies":191,"caseStudyId":187},"cmfsjq1wd0016122p1nggfb64","Development",[192],"TIA Portal","Siemens ","siemens",2022,[197,198],"hmi","innovation","https:\u002F\u002Fwww.siemens.com\u002Fde\u002Fde\u002Fbranchen\u002Fpharmaindustrie-life-science\u002Fpharma\u002Ffokusthemen\u002Fintegrated-secondary-lines.html?acz=1&gad_source=1&gbraid=0AAAAADEuPPM6VbWQsnNWQp2PDe1SPHedA&gclid=Cj0KCQjwh_i_BhCzARIsANimeoHJuoWu2CNhgxVNSLCOKeciKe2XSQDmA-RqMgn0PQ0oxaTGOsLi1isaAtYXEALw_wcB",{"width":201,"height":202,"id":203,"url":204,"alt":205,"type":40},3299,1856,"cmfsjq1vy000q122pqqr63yqi","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002F7da309c2-531f-4cd9-b39b-51a66a4d8441","Siemens Hero WebP",{"width":207,"height":207,"id":208,"url":209,"alt":210,"type":153},128,"cmfsjq1w5000s122puoho1sdl","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002Fc1ed7c76-58fd-4967-bb94-1fbe09bfaef2","Siemens Logo","2025-04-15T08:44:11.278Z","2025-09-20T17:32:06.300Z",[],{"id":215,"language":11,"value":216,"type":25},"cmfsjq1wc000z122pt60qlkte",{"type":18,"content":217},[218],{"type":21,"content":219},[220],{"text":221,"type":14},"During my time at Siemens, I collaborated on international HMI design projects, led design sprints across Europe, and developed a comprehensive design system for the HMI team. I conducted Figma training sessions for colleagues in China and designed UX-optimized HMIs for global clients. My work contributed to significantly improving production efficiency—enabling engineers to resolve issues on their HMIs up to four times faster.",{"id":223,"language":11,"value":224,"type":14},"cmfsjq1wc000x122pd1i6g4dd",{"text":225},"Siemens : Designing Human Machine Interfaces",{"id":227,"language":11,"value":228,"type":25},"cmfsjq1wc0011122pji5ef5eh",{"type":18,"content":229},[230],{"type":21,"content":231},[232],{"text":233,"type":14},"Coming soon",[235,238],{"id":236,"name":184,"role":237},"cmfsjq1wc000v122psqgmcbqm","Jonas Auernhammer",{"id":239,"name":240,"role":241},"cmfsjq1wc000w122p85atmt0g","Supervisor","Patrick Thiel",{"tags":243,"themeColor":246,"platform":134,"type":247,"technologies":248,"id":255,"title":266,"isFeatured":139,"isPrivate":6,"slug":267,"yearOfPublication":268,"brandName":269,"features":270,"url":272,"thumbnail":273,"logo":279,"createdAt":284,"updatedAt":285,"metrics":286,"description":309,"heading":317,"extendedDescription":321,"footnote":338,"credits":355},[244,245],"wallet ","geldbeutel","#111112","Configurator",[249,256,261],{"id":250,"category":251,"technologies":252,"caseStudyId":255},"cml76kk1g007stonzj963h702","Frontend",[253,254],"Vue.Js","Three.js","1",{"id":257,"category":258,"technologies":259,"caseStudyId":255},"cml76kk1g007ttonz3dx7hpsa","CMS",[260],"Shopify",{"id":262,"category":263,"technologies":264,"caseStudyId":255},"cml76kk1g007utonz0h4l9tcy","Hosting",[265],"Vercel","Lockcard ","lockcard",2024,"Lockcard",[271,134],"threeD","https:\u002F\u002Fconfigurator.lockcard.com\u002F",{"width":274,"height":275,"id":276,"url":277,"alt":278,"type":40},2880,1620,"cml76kk11005otonzb9di144k","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002F090e0dd0-b7cd-4da9-bd5b-2097f0cc0130","Lockcard Thumbnail",{"width":207,"height":207,"id":280,"url":281,"alt":282,"type":283},"cml76kk15005qtonzus7vml8h","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002F59f6782a-baaa-4934-9331-d3206c4d82b8","Lockcard Logo","image\u002Fpng","2025-01-31T10:16:12.893Z","2026-02-03T22:38:59.183Z",[287,294,302],{"id":288,"value":289,"order":41,"title":290},"cml76kk1f0076tonz634dd813","1m +",{"id":291,"language":11,"value":292,"type":14},"cml76kk1f0077tonzeex7sko0",{"text":293},"Annual Users",{"id":295,"value":296,"order":297,"title":298},"cml76kk1f0079tonz0goutz1w","4.8",1,{"id":299,"language":11,"value":300,"type":14},"cml76kk1f007atonzftje029e",{"text":301},"Ø User Rating",{"id":303,"value":304,"order":125,"title":305},"cml76kk1f007ctonzyyapi0oc","2x",{"id":306,"language":11,"value":307,"type":14},"cml76kk1f007dtonzzk1pjivy",{"text":308},"Custom bundles sold",{"id":310,"language":11,"value":311,"type":14},"cml76kk1g007ltonzcedrpr0c",{"type":18,"content":312},[313],{"type":21,"content":314},[315],{"text":316,"type":14},"Lockcard entrusted us with building an advanced 3D configurator for their popular modular wallets. We provided a seamless digital shopping experience, allowing their users to effortlessly customize their wallets to suit their needs. Designing the configurator involved an extensive prototyping phase, where we explored various.",{"id":318,"language":11,"value":319,"type":14},"cml76kk1f007itonz0gsbzb1z",{"text":320},"Introducing the new Lockcard Wallet Configurator",{"id":322,"language":11,"value":323,"type":25},"cml76kk1g007mtonzng7nf8ot",{"type":18,"content":324},[325,334],{"type":21,"content":326},[327,329,331,332],{"text":328,"type":14},"Designing the configurator involved an extensive prototyping phase, where we explored various user flows and design paths. We maintained a close collaboration with the Lockcard team with regular check-ins to ensure a solution perfectly tailored to their audience. When working on the UI, we elevated Lockcard's design language while ensuring it remained consistent with their existing e-commerce platform.",{"type":330},"hardBreak",{"type":330},{"text":333,"type":14},"We used their existing Shopify as the Backend, Vue.js for dynamic ",{"type":21,"content":335},[336],{"text":337,"type":14},"interfaces, Vercel for seamless hosting and Three.js for 3D interactions",{"id":339,"language":11,"value":340,"type":25},"cml76kk1g007otonzo38ns1rk",{"type":18,"content":341},[342],{"type":21,"content":343},[344,346,347,349,350,352,353],{"text":345,"type":14},"If you'd like to share our work publicly, we kindly request that you tag us visibly on the platform.",{"type":330},{"text":348,"type":14},"This ensures proper attribution, which is important in the creative space for recognizing the",{"type":330},{"text":351,"type":14},"effort and creativity involved. Including our website or account handle helps maintain transparency",{"type":330},{"text":354,"type":14},"and supports the ethical sharing of content.",[356,358,361],{"id":357,"name":237,"role":184},"cml76kk1f007ftonz2l2yefxt",{"id":359,"name":360,"role":190},"cml76kk1f007gtonzf2r5l5tu","Thomas Fichtner",{"id":362,"name":363,"role":364},"cml76kk1f007htonzou55obgz","Jip Newland","Models",{"id":255,"sections":366,"assets":522},[367,408,428,457,487],{"id":368,"media":369,"order":41,"isFullWidth":6,"isVerticalContent":6,"sectionDetails":372},"cml76kk1b005rtonzkhuik81a",{"id":370,"url":371,"alt":133,"type":66,"width":41,"height":41},"cml76kk1b005stonzk7garnub","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002F33a665a3-13d3-47fc-8cab-f55f1aecc00b",[373,394],{"id":374,"title":375,"caption":379,"description":386},"cml76kk1c005ttonzvshckq9x",{"id":376,"language":11,"value":377,"type":14},"cml76kk1c005utonze41j59k0",{"text":378},"WEB APP",{"id":380,"language":11,"value":381,"type":14},"cml76kk1c005ytonzifuim4lt",{"type":18,"content":382},[383],{"type":21,"content":384},[385],{"text":378,"type":14},{"id":387,"language":11,"value":388,"type":14},"cml76kk1c005wtonzog44jt0m",{"type":18,"content":389},[390],{"type":21,"content":391},[392],{"text":393,"type":14},"We brought the feeling of a native Ecommerce App to the Web. Delivering a rich and satisfying online experience.",{"id":395,"title":396,"description":400},"cml76kk1c0060tonzhdj18o4i",{"id":397,"language":11,"value":398,"type":14},"cml76kk1c0061tonzbsg9tyxi",{"text":399},"3D VISUALIZATION",{"id":401,"language":11,"value":402,"type":14},"cml76kk1c0063tonzbosj45bb",{"type":18,"content":403},[404],{"type":21,"content":405},[406],{"text":407,"type":14},"We developed a custom 3D Wallet visualization that helps users keep track of their configuration.",{"id":409,"media":410,"order":297,"isFullWidth":6,"isVerticalContent":6,"sectionDetails":413},"cml76kk1c0065tonzr4pj2rfq",{"id":411,"url":412,"alt":133,"type":66,"width":41,"height":41},"cml76kk1c0066tonz8aoxzz59","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002F005d14ba-7902-47f4-9958-7bd3987114a3",[414],{"id":415,"title":416,"description":420},"cml76kk1c0067tonzvbpainec",{"id":417,"language":11,"value":418,"type":14},"cml76kk1c0068tonzc402mq6a",{"text":419},"CAPTIVATING ENTRY",{"id":421,"language":11,"value":422,"type":14},"cml76kk1d006atonz8quhqwc6",{"type":18,"content":423},[424],{"type":21,"content":425},[426],{"text":427,"type":14},"We made sure users immediately understand the features and enjoy a premium experience right away.",{"id":429,"media":430,"order":125,"isFullWidth":6,"isVerticalContent":6,"sectionDetails":435},"cml76kk1d006ctonzfuqvq8tr",{"id":431,"url":432,"alt":133,"type":283,"width":433,"height":434},"cml76kk1d006dtonz685nxrx0","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002F4dc198ed-455b-4b8a-8e5e-edad3284a76f",1920,1080,[436],{"id":437,"title":438,"caption":442,"description":449},"cml76kk1d006etonzdnpberij",{"id":439,"language":11,"value":440,"type":14},"cml76kk1d006ftonzt4dppyvp",{"text":441},"PRODUCT DETAILS",{"id":443,"language":11,"value":444,"type":14},"cml76kk1d006jtonzpj1pluq4",{"type":18,"content":445},[446],{"type":21,"content":447},[448],{"text":441,"type":14},{"id":450,"language":11,"value":451,"type":14},"cml76kk1d006htonzeytz5b35",{"type":18,"content":452},[453],{"type":21,"content":454},[455],{"text":456,"type":14},"The info panels act as lightweight product detail pages (PDPs) that are  integrated within the configurator.",{"id":458,"media":459,"order":464,"isFullWidth":6,"isVerticalContent":6,"sectionDetails":465},"cml76kk1d006ltonzlq1tgg09",{"id":460,"url":461,"alt":462,"type":40,"width":274,"height":463},"cml76kk1d006mtonzisz4wmmy","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002Fa7b919b0-ee8a-4fe2-83e5-e6b386cf3939","Lockcard Circular Rendering",1680,3,[466],{"id":467,"title":468,"caption":472,"description":479},"cml76kk1d006ntonzyjgckefo",{"id":469,"language":11,"value":470,"type":14},"cml76kk1d006otonzn5m5po8w",{"text":471},"INTRODUCTION",{"id":473,"language":11,"value":474,"type":14},"cml76kk1e006stonzl4pckmfo",{"type":18,"content":475},[476],{"type":21,"content":477},[478],{"text":471,"type":14},{"id":480,"language":11,"value":481,"type":14},"cml76kk1d006qtonzh9iigp25",{"type":18,"content":482},[483],{"type":21,"content":484},[485],{"text":486,"type":14},"To introduce the tool on the platform and engage the community on social media, we created dedicated content.",{"id":488,"media":489,"order":492,"isFullWidth":6,"isVerticalContent":6,"sectionDetails":493},"cml76kk1e006utonz28fpt09c",{"id":490,"url":491,"alt":133,"type":66,"width":41,"height":41},"cml76kk1e006vtonzccuab33k","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002F2746190b-80e6-4aa1-8a2b-e963ec2bb121",4,[494,508],{"id":495,"title":496,"description":500},"cml76kk1e006wtonzjuwt6r39",{"id":497,"language":11,"value":498,"type":14},"cml76kk1e006xtonz6wu9kowg",{"text":499},"USER FLOW",{"id":501,"language":11,"value":502,"type":14},"cml76kk1e006ztonzoytq5k3h",{"type":18,"content":503},[504],{"type":21,"content":505},[506],{"text":507,"type":14},"Users can easily navigate through customisation options and complete their purchase with an uninterrupted in-site checkout.",{"id":509,"title":510,"description":514},"cml76kk1e0071tonzv5ketao7",{"id":511,"language":11,"value":512,"type":14},"cml76kk1e0072tonzvag02dfz",{"text":513},"PAGE TRANSITIONS",{"id":515,"language":11,"value":516,"type":14},"cml76kk1e0074tonzd9b0ub8h",{"type":18,"content":517},[518],{"type":21,"content":519},[520],{"text":521,"type":14},"We use motion to create seamless page transitions that help users keep track of the state of their configuration.",[523,528],{"id":524,"url":525,"title":526,"description":527},"cml76kk1g007qtonzvp0rdmvx","https:\u002F\u002Fwww.example.de","Font","Passanger Sans",{"id":529,"url":525,"title":530,"description":531},"cml76kk1g007rtonz71n9kk1t","Assets","24.3 mb",{"sections":365,"isLocked":6,"preview":533},["Reactive",242]]