{"id":5,"title":"【Responsive app】iGaming product analytic dashboard","subtitle":"A out-of-the-box B2B product analytics dashboard with clear design for business vendors to quantify player behavior and optimize their business.","cover":"https://i.imgur.com/qlNP7Fk.png","content":"\u003cdiv class=\"m-2 flex w-full flex-col\"\u003e\n   \u003cimg\n      src=\"https://raw.githubusercontent.com/robin-artemstein/robin-chen-case-study-igaming-product-analytics-dashboard/main/igaming-product-analytics-dashboard-main-image.png\"\n      width=\"1280\"\n      height=\"720\"\n      alt=\"Head image of Gendai Katana\"\n   /\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\"\u003e\n            Freelance product designer\u003cbr\u003eand UX developer\n         \u003c/div\u003e\n         \u003cdiv class=\"text-lg font-semibold text-amber-800\"\u003e\n            Project duration\n         \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\"\u003e5 backend developers\u003c/div\u003e\n         \u003cdiv class=\"text-lg font-medium\"\u003e4 UX developers\u003c/div\u003e\n         \u003cdiv class=\"text-lg font-medium\"\u003e1 product manager\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\"\u003eReact\u003c/div\u003e\n         \u003cdiv class=\"text-lg font-medium\"\u003eReact Router\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\"\u003eFramer Motion\u003c/div\u003e\n         \u003cdiv class=\"text-lg font-medium\"\u003eDocker\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\"\u003e\n         The client is a B2B iGaming corp, they aim to provide digital\n         entertainment products for their vendors which are running business of\n         betting or online casino. I worked closely with members at the product\n         analytics team, to deliver a delightful and intuitive user experience\n         for responsive dashboard application, to help vendors quantify players\n         behavior and optimize their business.\n      \u003c/div\u003e\n      \u003cdiv class=\"py-2 text-2xl font-bold text-amber-800\"\u003e\n         Outcome and impact\n      \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＋ 63%\u003c/div\u003e\n            \u003cdiv class=\"text-lg font-medium\"\u003eMission completion 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＞ 50%\u003c/div\u003e\n            \u003cdiv class=\"text-lg font-medium\"\u003e\n               of bussiness users feel satisfied with\u003cbr\u003ethe entier design.\n            \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＋ 45%\u003c/div\u003e\n            \u003cdiv class=\"text-lg font-medium\"\u003e\n               of revenue growth in 6 months.\n            \u003c/div\u003e\n         \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"py-2 text-2xl font-bold text-amber-800\"\u003e\n         Problem and challenge\n      \u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003e\n         \u003cul class=\"mx-8 list-disc\"\u003e\n            \u003cli\u003e\n               Even though there are some similar services in the market,\n               however, company need a proprietary dashboard for sensitive data.\n            \u003c/li\u003e\n            \u003cli\u003e\n               Most of existing services has pretty steep learning curve,\n               business users do not have much time to get used to it.\n            \u003c/li\u003e\n            \u003cli\u003e\n               Many users are feeling uncomfortable when they are working on\n               their smartphones.\n            \u003c/li\u003e\n            \u003cli\u003e\n               Users are complaining that they can hardly read information from\n               UI.\n            \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\n                     class=\"font-semibold text-amber-800 transition duration-500 ease-in-out\"\n                     href=\"#sol-1\"\n                     \u003eRequirements gathering\u003c/a\n                  \u003e\n               \u003c/li\u003e\n               \u003cli\u003e\n                  \u003ca\n                     class=\"font-semibold text-amber-800 transition duration-500 ease-in-out\"\n                     href=\"#sol-2\"\n                     \u003eInformation architecture\u003c/a\n                  \u003e\n               \u003c/li\u003e\n               \u003cli\u003e\n                  \u003ca\n                     class=\"font-semibold text-amber-800 transition duration-500 ease-in-out\"\n                     href=\"#sol-3\"\n                     \u003eColor contrast comply with the WCAG level AA or above\u003c/a\n                  \u003e\n               \u003c/li\u003e\n               \u003cli\u003e\n                  \u003ca\n                     class=\"font-semibold text-amber-800 transition duration-500 ease-in-out\"\n                     href=\"#sol-4\"\n                     \u003eSimple and intuitive UI card design\u003c/a\n                  \u003e\n               \u003c/li\u003e\n               \u003cli\u003e\n                  \u003ca\n                     class=\"font-semibold text-amber-800 transition duration-500 ease-in-out\"\n                     href=\"#sol-5\"\n                     \u003eHighly customizable UI\u003c/a\n                  \u003e\n               \u003c/li\u003e\n               \u003cli\u003e\n                  \u003ca\n                     class=\"font-semibold text-amber-800 transition duration-500 ease-in-out\"\n                     href=\"#sol-6\"\n                     \u003eOptimize navigation bar for mobile users\u003c/a\n                  \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\"\u003e\n         Requirements gathering\n      \u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003e\n         I worked closely with a product manager and UX developers to conduct a\n         remote focus group user interview, we invited 10 vendor representatives\n         in the Zoom sesson, to gather insights and understand what they need.\n      \u003c/div\u003e\n      \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003e\n         We synthesis these insights and crafted user personas for\n         implementation plan formulation.\n      \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\n               src=\"https://raw.githubusercontent.com/robin-artemstein/robin-chen-case-study-igaming-product-analytics-dashboard/main/igaming-product-analytics-dashboard-user-persona-1.png\"\n               width=\"384\"\n               height=\"688\"\n               alt=\"User persona\"\n            /\u003e\n         \u003c/div\u003e\n         \u003cdiv\u003e\n            \u003cimg\n               src=\"https://raw.githubusercontent.com/robin-artemstein/robin-chen-case-study-igaming-product-analytics-dashboard/main/igaming-product-analytics-dashboard-user-persona-2.png\"\n               width=\"384\"\n               height=\"688\"\n               alt=\"User persona\"\n            /\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\"\u003e\n         Information architecture\n      \u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003e\n         In order to integrate a smooth structure, I worked closely with\n         teammates to run a card sorting, and organize the requirements.\n      \u003c/div\u003e\n      \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003e\n         This allow us to build information architecture, which is intuitive to\n         navigate through without risking any confusion from the business users.\n      \u003c/div\u003e\n      \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n      \u003cdiv\u003e\n         \u003cimg\n            src=\"https://raw.githubusercontent.com/robin-artemstein/robin-chen-case-study-igaming-product-analytics-dashboard/main/igaming-product-analytics-dashboard-information-architecture.png\"\n            width=\"646\"\n            height=\"444\"\n            alt=\"Information architecture \"\n         /\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\"\u003e\n         Color contrast comply with the WCAG level AA or above\n      \u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003e\n         The contrast between background and foreground color is fundamental for\n         accessibility design, it is particularly crucial for bussiness users.\n      \u003c/div\u003e\n      \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003e\n         There are 35% of bussiness users complains that they sometimes need to\n         make a lot of effort in order to read information from UI when they are\n         using silimar products, because most of these products did not comply\n         with the WCAG level AA or above.\n      \u003c/div\u003e\n      \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003e\n         This is why I decide to take the WCAG compliance into the first\n         consideration, user can read information without making too many effor,\n         this design can reduce the eye strain for users who need to work long\n         hours.\n      \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\n               src=\"https://raw.githubusercontent.com/robin-artemstein/robin-chen-case-study-igaming-product-analytics-dashboard/main/igaming-product-analytics-dashboard-wcag-aaa-1.png\"\n               width=\"245\"\n               height=\"531\"\n               alt=\"WCAG level AAA\"\n            /\u003e\n         \u003c/div\u003e\n         \u003cdiv\u003e\n            \u003cimg\n               src=\"https://raw.githubusercontent.com/robin-artemstein/robin-chen-case-study-igaming-product-analytics-dashboard/main/igaming-product-analytics-dashboard-wcag-aaa-2.png\"\n               width=\"245\"\n               height=\"531\"\n               alt=\"WCAG level AAA\"\n            /\u003e\n         \u003c/div\u003e\n         \u003cdiv\u003e\n            \u003cimg\n               src=\"https://raw.githubusercontent.com/robin-artemstein/robin-chen-case-study-igaming-product-analytics-dashboard/main/igaming-product-analytics-dashboard-wcag-aaa-3.png\"\n               width=\"245\"\n               height=\"531\"\n               alt=\"WCAG level AAA\"\n            /\u003e\n         \u003c/div\u003e\n         \u003cdiv\u003e\n            \u003cimg\n               src=\"https://raw.githubusercontent.com/robin-artemstein/robin-chen-case-study-igaming-product-analytics-dashboard/main/igaming-product-analytics-dashboard-wcag-aaa-4.png\"\n               width=\"245\"\n               height=\"531\"\n               alt=\"WCAG level AAA\"\n            /\u003e\n         \u003c/div\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\"\u003e\n         Simple and intuitive UI card design\n      \u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003e\n         Most of generic product analytic dashboard applications in the market\n         come with a lot of complicated terminologies, users are difficult to\n         understand and they require a lot of time to learn, so this is a main\n         pain point for business users which needs to be solved.\n      \u003c/div\u003e\n      \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003e\n         The first thing I decide to do is to discus this with the stakeholders\n         at the company to understand the measurable metrics, synthesis the\n         information, then create the UI.\n      \u003c/div\u003e\n      \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003e\n         The collected data after the initial release was launched showed that\n         there are more than 45% of business users think that this design\n         approach surely improved their onboarding experience.\n      \u003c/div\u003e\n      \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n      \u003cdiv class=\"flex flex-row gap-1\"\u003e\n         \u003cimg\n            src=\"https://raw.githubusercontent.com/robin-artemstein/robin-chen-case-study-igaming-product-analytics-dashboard/main/igaming-product-analytics-dashboard-simple-and-clear-design.png\"\n            alt=\"Simple and intuitive design\"\n         /\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\"\u003e\n         Highly customizable UI\n      \u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003e\n         Every user have his or her own difference working style, so I believe\n         making UI highly customizable is necessary.\n      \u003c/div\u003e\n      \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003e\n         Users can sort UI card by drag and drop the title bar to wherever they\n         want, and users can toggle between light mode and dark mode.\n      \u003c/div\u003e\n      \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n      \u003cdiv\u003e\n         \u003cvideo\n            style=\"pointer-events: none\"\n            autoplay\n            loop\n            muted\n            playsinline\n            width=\"1270\"\n            height=\"595\"\n         \u003e\n            \u003csource\n               src=\"https://raw.githubusercontent.com/robin-artemstein/robin-chen-case-study-igaming-product-analytics-dashboard/main/igaming-product-analytics-dashboard-dark-mode-and-draggable-ui-card-2.mp4\"\n               type=\"video/mp4\"\n            /\u003e\n         \u003c/video\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"m-4 py-2\"\u003e\u003c/div\u003e\n      \u003cdiv id=\"sol-6\" class=\"py-2 text-2xl font-bold text-amber-800\"\u003e\n         Optimize navigation bar for mobile users\n      \u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003e\n         Business users sometimes need to use their smartphones to work out of\n         their office, they reported that they feel pretty uncomfortable when\n         they are using similar products for long hours.\n      \u003c/div\u003e\n      \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003e\n         I propose to place the navigation bar UI at the bottom of the screen on\n         mobile devices will conform to the ergonomics of thumb area. This\n         design will make mobile users use the product more comfortably as well.\n      \u003c/div\u003e\n      \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n      \u003cdiv class=\"text-lg font-medium\"\u003e\n         The collected data after the initial release was launched showed that\n         more than 60% of users think that this design can effectively improve\n         their user experience on smartphones.\n      \u003c/div\u003e\n      \u003cdiv class=\"py-2\"\u003e\u003c/div\u003e\n      \u003cdiv\u003e\n         \u003cvideo\n            style=\"pointer-events: none\"\n            autoplay\n            loop\n            muted\n            playsinline\n            width=\"388\"\n            height=\"856\"\n         \u003e\n            \u003csource\n               src=\"https://raw.githubusercontent.com/robin-artemstein/robin-chen-case-study-igaming-product-analytics-dashboard/main/igaming-product-analytics-dashboard-optimized-nav-bar-for-mobile-users-2.mp4\"\n               type=\"video/mp4\"\n            /\u003e\n         \u003c/video\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-[95%]\"\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":"igaming-product-analytic-dashboard","featured":"true","visible":"true","demo":"https://sparkly-tanuki-afafdd.netlify.app/"}