[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-previews":3,"case-study-previews":129,"article-en-cm9i6eht8006p3fbtu6slupwe":365,"article-enabling-engineers-to-fix-issues-in-production-lines-4x-faster-on-their-hmis-en":503},["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":109,"description":366,"sections":373,"authors":491},{"id":367,"language":11,"value":368,"type":25},"cm9ibgjfb00fw3fbtas0u23aa",{"type":18,"content":369},[370],{"type":21,"content":371},[372],{"text":121,"type":14},[374,440,461],{"id":375,"order":41,"textContent":376},"cm9ibgjfc00fz3fbt3cwuaxks",{"id":377,"content":378},"cm9ibgjfc00g03fbtq5yiof85",{"id":379,"language":11,"value":380,"type":25},"cm9ibgjfc00g13fbtfnfnv6bp",{"type":18,"content":381},[382,388,399,400,401,402,403,404,405,406,407,408,409,414,426,427,428,429,430,431,432,433,434,435],{"type":383,"attrs":384,"content":385},"heading",{"level":255},[386],{"text":387,"type":14},"Introduction",{"type":21,"content":389},[390,391,392,393,395,396,397],{"text":121,"type":14},{"type":330},{"type":330},{"text":394,"type":14},"(Due to NDAs I am not allowed to share the final HMI Design, so in this article I only explain the core concept.)",{"type":330},{"type":330},{"text":398,"type":14},"To make it understandable for a UX Designer without a background in the mechanical engineering industry I don’t cover industry-specific details.",{"type":21},{"type":21},{"type":21},{"type":21},{"type":21},{"type":21},{"type":21},{"type":21},{"type":21},{"type":21},{"type":383,"attrs":410,"content":411},{"level":255},[412],{"text":413,"type":14},"The Situation",{"type":21,"content":415},[416,418,419,420,422,423,424],{"text":417,"type":14},"Factory lines in the engineering industry run mostly automated. Mechanical engineers monitor the factory lines and fix issues to guarantee smooth production.",{"type":330},{"type":330},{"text":421,"type":14},"A primal task includes recognizing problems at an early stage and rectifying them as quickly as possible in order to enable the production line to continue uninterrupted.",{"type":330},{"type":330},{"text":425,"type":14},"HMIs (Human Machine Interfaces) are used to operate the lines and to detect and correct errors\u002Fproblems.",{"type":21},{"type":21},{"type":21},{"type":21},{"type":21},{"type":21},{"type":21},{"type":21},{"type":21},{"type":383,"attrs":436,"content":437},{"level":255},[438],{"text":439,"type":14},"Industry standard HMIs",{"id":441,"order":297,"mediaContent":442},"cm9ibgjfd00g33fbt8fhl68oa",{"id":443,"media":444,"caption":448},"cm9ibgjfd00g43fbt4nc7ud7b",{"width":41,"height":41,"id":445,"url":446,"alt":447,"type":40},"cm9ibgjf300fp3fbtic55wesz","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002F396e2a18-639c-49cb-829f-52fb0447e577","Example Image of HMI Hardware (TP900 Comfort Pro)",{"id":449,"language":11,"value":450,"type":25},"cm9ibgjfe00g53fbtvqsrw7nm",{"type":18,"content":451},[452],{"type":21,"content":453},[454,456],{"text":455,"type":14},"Example Image of HMI Hardware (TP900 Comfort Pro): ",{"text":457,"type":14,"marks":458},"https:\u002F\u002Fwww.elektroniknet.de\u002Foptoelektronik\u002Fdisplays\u002Fsystembaukasten-fuer-die-automatisierung.162463.html",[459],{"type":105,"attrs":460},{"rel":107,"href":457,"target":108},{"id":462,"order":125,"textContent":463},"cm9ibgjfe00g73fbt415gedn7",{"id":464,"content":465},"cm9ibgjfe00g83fbtsk4kp2ga",{"id":466,"language":11,"value":467,"type":25},"cm9ibgjfe00g93fbti3qjdenw",{"type":18,"content":468},[469],{"type":21,"content":470},[471,473,474,475,476,481,484,485,487,488,489],{"text":472,"type":14},"Different production lines use different numbers, sizes and types of HMIs. This leads to non standardised Hmi use because a lot of production lines get treated differently. This causes a lot of complexity.",{"type":330},{"type":330},{"type":330},{"text":477,"type":14,"marks":478},"Example of Different types of HMIs in use:",[479],{"type":480},"bold",{"type":330,"marks":482},[483],{"type":480},{"type":330},{"text":486,"type":14},"(An overview for a better understanding of the complexity when standardising a HMI Design for a factory)",{"type":330},{"type":330},{"text":490,"type":14},"Note: HMI software is due to hardware restrictions static not responsive",[492],{"id":493,"name":237,"role":494,"description":495,"profilePicture":499},"785472b0-0c9f-47e8-8637-e30558d924e7","Author",{"id":496,"language":11,"value":497,"type":14},"cm9ibgjep00fm3fbteayttwqm",{"text":498},"Thank you for reading this article. If you’d like to learn more about this project or explore ways to collaborate, I’d be happy to connect. Just reach out, and let’s start a conversation.",{"width":41,"height":41,"id":500,"url":501,"alt":502,"type":40},"cm9ibgjep00fo3fbtj4erbupd","https:\u002F\u002Fcms.soehne.co\u002Fsoehne\u002Faf3b8691-9c2e-49df-bf79-f3de0aaad730","Jonas Auernhammer Designer",{"article":365,"preview":504,"slug":128},["Reactive",88]]