{"id":1,"title":"【Responsive app】Katana 3D e-commerce","subtitle":"A traditional e-commerce website with fully interactive 3D content and a minimalist design aims to win customers' trust and further increase conversion rates.","cover":"https://i.imgur.com/74hDdwx.png","content":"\u003cdiv class=\"m-2 flex w-full flex-col\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/robin-artemstein/robin-chen-case-study-katana-3d-ecommerce/main/katana-3d-ecommerce-main-image.png\" width=\"1280\" height=\"720\" alt=\"Head image of Gendai Katana\" /\u003e\n  \u003cdiv class=\"flex flex-wrap gap-4 p-2\"\u003e\n    \u003cdiv class=\"flex flex-col\"\u003e\n      \u003cdiv class=\"text-lg font-semibold text-amber-800\"\u003eMy role\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003eFreelance product designer\u003cbr /\u003eand UX developer\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-semibold text-amber-800\"\u003eProject duration\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003eApproximately 12 months\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"flex flex-col\"\u003e\n      \u003cdiv class=\"text-lg font-semibold text-amber-800\"\u003eWork with\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003e2 backend developer\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003e1 UX developer\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003e1 product manager\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003e2 in-house industrial designers\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"flex flex-col\"\u003e\n      \u003cdiv class=\"text-lg font-semibold text-amber-800\"\u003eTech stack\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003eDraw.io\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003eFigma\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003eNext.js\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003eTailwind CSS\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003eTypeScript\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003eBabylon.js\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003eFramer Motion\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003eDocker\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003ePostman\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003eGitLab\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-col\"\u003e\n    \u003cdiv class=\"py-2 text-2xl font-bold text-amber-800\"\u003eOverview\u003c/div\u003e\n    \u003cdiv class=\"text-lg font-medium\"\u003eThe client was founded by a group of young industrial designers who passionate about katana culture. They combine 3D printing technology with modern design aesthetics, create katanas that are affordable for everyone. I worked closely with them the build an ecommerce website from ground up.\u003c/div\u003e\n    \u003cdiv class=\"py-2 text-2xl font-bold text-amber-800\"\u003eOutcome and impact\u003c/div\u003e\n    \u003cdiv class=\"flex flex-wrap gap-1\"\u003e\n      \u003cdiv class=\"flex flex-col gap-1 p-4\"\u003e\n        \u003cdiv class=\"text-2xl font-semibold\"\u003e＋ 23%\u003c/div\u003e\n        \u003cdiv class=\"text-lg font-medium\"\u003eCustomers onversion rates\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"flex flex-col gap-1 p-4\"\u003e\n        \u003cdiv class=\"text-2xl font-semibold\"\u003e＋ 15%\u003c/div\u003e\n        \u003cdiv class=\"text-lg font-medium\"\u003eCustomers retention rates\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"flex flex-col gap-1 p-4\"\u003e\n        \u003cdiv class=\"text-2xl font-semibold\"\u003e20%\u003c/div\u003e\n        \u003cdiv class=\"text-lg font-medium\"\u003eof customers are referred\u003cbr /\u003efrom existing cutomers\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"flex flex-col gap-1 p-4\"\u003e\n        \u003cdiv class=\"text-2xl font-semibold\"\u003e－30 %\u003c/div\u003e\n        \u003cdiv class=\"text-lg font-medium\"\u003e\n          Shopping cart\n          \u003cbr /\u003e\n          abandon rates\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"py-2 text-2xl font-bold text-amber-800\"\u003eProblem and challenge\u003c/div\u003e\n    \u003cdiv class=\"text-lg font-medium\"\u003e\n      \u003cul class=\"mx-8 list-disc\"\u003e\n        \u003cli\u003eThis company has many competitors in same field, the primary challenge is to differentiate itself from competitors with product design and to break through in this highly competitive market.\u003c/li\u003e\n        \u003cli\u003eIn the absence of physical stores, they need to convince customers to transact with them online , 2D images are still far insufficient.\u003c/li\u003e\n        \u003cli\u003eMost e-commerce websites have complicated user login system and checkout process, which causes inconvenienc and even leads to customers churn.\u003c/li\u003e\n        \u003cli\u003eSome customers complain about that they can hardly find product they want, even though they already know that the product name, but they still struggling from find what exactly they want.\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"m-4 py-2\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"w-full\"\u003e\n      \u003cdiv class=\"py-2 text-2xl font-bold\"\u003eMy approach\u003c/div\u003e\n      \u003cdiv\u003e\n        \u003cul class=\"mx-8 list-disc\"\u003e\n          \u003cli\u003e\n            \u003ca class=\"font-semibold text-amber-800 transition duration-500 ease-in-out\" href=\"#sol-1\"\u003eCompetitor analysis\u003c/a\u003e\n          \u003c/li\u003e\n          \u003cli\u003e\n            \u003ca class=\"font-semibold text-amber-800 transition duration-500 ease-in-out\" href=\"#sol-2\"\u003eInformation architecture\u003c/a\u003e\n          \u003c/li\u003e\n          \u003cli\u003e\n            \u003ca class=\"font-semibold text-amber-800 transition duration-500 ease-in-out\" href=\"#sol-3\"\u003eIntellegent search autocomplete system\u003c/a\u003e\n          \u003c/li\u003e\n          \u003cli\u003e\n            \u003ca class=\"font-semibold text-amber-800 transition duration-500 ease-in-out\" href=\"#sol-4\"\u003eSign in with Google account\u003c/a\u003e\n          \u003c/li\u003e\n          \u003cli\u003e\n            \u003ca class=\"font-semibold text-amber-800 transition duration-500 ease-in-out\" href=\"#sol-5\"\u003eInteractive 3D content\u003c/a\u003e\n          \u003c/li\u003e\n          \u003cli\u003e\n            \u003ca class=\"font-semibold text-amber-800 transition duration-500 ease-in-out\" href=\"#sol-6\"\u003eStreamlined check out process\u003c/a\u003e\n          \u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"m-4 py-2\"\u003e\u003c/div\u003e\n    \u003cdiv id=\"sol-1\" class=\"py-2 text-2xl font-bold text-amber-800\"\u003eCompetitor analysis\u003c/div\u003e\n    \u003cdiv class=\"text-lg font-medium\"\u003eI worked closely with product manager to conduct the competitor analysis, we had listed some direct and indirect competitors in the same field on an analysis speadsheet.\u003c/div\u003e\n    \u003cdiv class=\"p-2\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"text-lg font-medium\"\u003eThis spreadsheet is to show stakeholders what we can learn from them, what we ought to avoid, how we can differentiate ourselves, and how we can enter the market.\u003c/div\u003e\n    \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"flex\"\u003e\n      \u003cdiv\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/robin-artemstein/robin-chen-case-study-katana-3d-ecommerce/main/katana-3d-ecommerce-competitor-analysis.png\" width=\"896\" height=\"300\" alt=\"competitor analysis\" /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"m-4 py-2\"\u003e\u003c/div\u003e\n    \u003cdiv id=\"sol-2\" class=\"py-2 text-2xl font-bold text-amber-800\"\u003eInformation architecture\u003c/div\u003e\n    \u003cdiv class=\"text-lg font-medium\"\u003eIn order to integrate a smooth structure, I had run a card sorting to organize the requirements, which allow us to build information architecture which is intuitive to navigate through without risking any confusion from the customers.\u003c/div\u003e\n    \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"flex\"\u003e\n      \u003cdiv\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/robin-artemstein/robin-chen-case-study-katana-3d-ecommerce/main/katana-3d-ecommerce-information-architecture.png\" width=\"853\" height=\"603\" alt=\"Information architecture\" /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"m-4 py-2\"\u003e\u003c/div\u003e\n    \u003cdiv id=\"sol-3\" class=\"py-2 text-2xl font-bold text-amber-800\"\u003eIntellegent search autocomplete system\u003c/div\u003e\n    \u003cdiv class=\"text-lg font-medium\"\u003eIn additional to the optimized information architecture, we still need a search system for customers to find what they want quickly.\u003c/div\u003e\n    \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"text-lg font-medium\"\u003eI had implemented an intelligent search filtering system, customers can find what exactly they want without typing the full but lengthy keywords.\u003c/div\u003e\n    \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"text-lg font-medium\"\u003eCustomers can easily understand if what they want is on the list, which can significantly save their time.\u003c/div\u003e\n    \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n    \u003cdiv\u003e\n      \u003cvideo style=\"pointer-events: none\" autoplay loop muted playsinline width=\"1270\" height=\"595\"\u003e\n        \u003csource src=\"https://raw.githubusercontent.com/robin-artemstein/robin-chen-case-study-katana-3d-ecommerce/main/katana-3d-ecommerce-intelligent-search-filtering-system-2.mp4\" type=\"video/mp4\" /\u003e\n      \u003c/video\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"m-4 py-2\"\u003e\u003c/div\u003e\n    \u003cdiv id=\"sol-4\" class=\"py-2 text-2xl font-bold text-amber-800\"\u003eSign in with Google account\u003c/div\u003e\n    \u003cdiv class=\"text-lg font-medium\"\u003eOur memory is pretty limited, and it is never easy to memorize multiple usernames and passwords used to sign in to a platforms.\u003c/div\u003e\n    \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"text-lg font-medium\"\u003eTherefore, reducing cognitive load for customers is necessary and shall be prioritized, because every one has at least one Google account, so this is why I propose to leverage Google account sign in.\u003c/div\u003e\n    \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"text-lg font-medium\"\u003eAfter the website was launched, the result of data analysis shows that more than 70% of customers are satisfied with this design.\u003c/div\u003e\n    \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n    \u003cdiv id=\"sol-4\"\u003e\n      \u003cvideo style=\"pointer-events: none\" autoplay loop muted playsinline width=\"1270\" height=\"595\"\u003e\n        \u003csource src=\"https://raw.githubusercontent.com/robin-artemstein/robin-chen-case-study-katana-3d-ecommerce/main/katana-3d-ecommerce-google-auth-2.mp4\" type=\"video/mp4\" /\u003e\n      \u003c/video\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"m-4 py-2\"\u003e\u003c/div\u003e\n    \u003cdiv id=\"sol-5\" class=\"py-2 text-2xl font-bold text-amber-800\"\u003eInteractive 3D content\u003c/div\u003e\n    \u003cdiv class=\"text-lg font-medium\"\u003eThrough competitor analysis, I find out that most e-commerce websites, whether direct or indirect competitors, they showcase their product details with photos.\u003c/div\u003e\n    \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"text-lg font-medium\"\u003eThis approach seems normal, but it also brings another problem. When consumers view photos, they can only zoom in to see details, and cannot learn more details by rotating the photos 360 degrees.\u003c/div\u003e\n    \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"text-lg font-medium\"\u003eThis is what interactive 3D contents can do, with it, customers can zoom and rotate the 3d content 360 degrees. Customers can draw and sheath the katana by sliding the slider and the thumb the learn more detailed info.\u003c/div\u003e\n    \u003cdiv class=\"y-2\"\u003e\u003c/div\u003e\n    \u003cdiv\u003e\n      \u003cvideo style=\"pointer-events: none\" autoplay loop muted playsinline width=\"1270\" height=\"595\"\u003e\n        \u003csource src=\"https://raw.githubusercontent.com/robin-artemstein/robin-chen-case-study-katana-3d-ecommerce/main/katana-3d-ecommerce-interactive-3d-content-2.mp4\" type=\"video/mp4\" /\u003e\n      \u003c/video\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"m-4 py-2\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"py-2 text-2xl font-bold text-amber-800\"\u003eThe Streamlined check out process\u003c/div\u003e\n    \u003cdiv class=\"text-lg font-medium\"\u003eThe complicated check out process is always annoying for everyone, so it must be Streamlined.\u003c/div\u003e\n    \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"text-lg font-medium\"\u003eI propose to reduce some unnecessary forms and multiple stages of process with few forms such as full name, complete address, and the phone number, in order to reduce the cognitive load for customers.\u003c/div\u003e\n    \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"text-lg font-medium\"\u003eAfter discussion with stakeholders, they find that this proposal is technically feasible.\u003c/div\u003e\n    \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"flex flex-row gap-1\"\u003e\n      \u003cdiv\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/robin-artemstein/robin-chen-case-study-katana-3d-ecommerce/main/katana-3d-ecommerce-streamlined-check-out-process-1.png\" width=\"245\" height=\"531\" alt=\"WCAG level AAA\" /\u003e\n      \u003c/div\u003e\n      \u003cdiv\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/robin-artemstein/robin-chen-case-study-katana-3d-ecommerce/main/katana-3d-ecommerce-streamlined-check-out-process-2.png\" width=\"245\" height=\"531\" alt=\"WCAG level AAA\" /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"m-4 py-2\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"m-4 py-2\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"w-full\"\u003e\n      \u003chr class=\"border-1 border-dashed\" /\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"m-4 py-2\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"text-2xl font-semibold\"\u003eIf you are interested in how my designs drive business growth.\u003c/div\u003e\n    \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"text-2xl font-semibold\"\u003eTap the button below, let's talk about your project.\u003c/div\u003e\n  \u003c/div\u003e  \n\u003c/div\u003e","slug":"katana-3d-e-commerce","featured":"true","visible":"true","demo":"https://gendai-katana-animation-demo.vercel.app/"}