{"id":51,"date":"2024-10-21T18:50:59","date_gmt":"2024-10-21T18:50:59","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/colincheng\/?p=51"},"modified":"2024-10-21T18:52:52","modified_gmt":"2024-10-21T18:52:52","slug":"designing-an-mma-prediction-dashboard-with-figma-a-journey-of-visual-punches-and-data-jabs","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/colincheng\/2024\/10\/21\/designing-an-mma-prediction-dashboard-with-figma-a-journey-of-visual-punches-and-data-jabs\/","title":{"rendered":"Designing an MMA Prediction Dashboard with Figma: A Journey of Visual Punches and Data Jabs"},"content":{"rendered":"\n<figure class=\"wp-block-audio\"><audio controls src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/8097\/files\/2024\/10\/lofi-chill-medium-version-159456.mp3\"><\/audio><\/figure>\n\n\n\n<p>Ever tried to make data punch harder than a knockout? That&#8217;s exactly what we&#8217;re aiming for in our current project &#8211; an MMA prediction model that&#8217;s not just about crunching members, but also about making those numbers look cool, clear useful. How do we make that happen? Well, let me introduce you to our secret tool: Figma.<\/p>\n\n\n\n<p>So, here&#8217;s the thing: prediction models are only as good as the way they&#8217;re presented. I mean, what good is predicting fight outcomes if the insights are stuck in a tangled web of spreadsheets and confusing numbers? That&#8217;s where Figma comes in. Using Figma, I&#8217;m crafting a dashboard that&#8217;s visually appealing and intuitive enough for MMA fans to explore win probabilities, match histories, and key factors affecting fight outcomes-all without needing a PhD in data science. Imagine a user being able to look at a fighter&#8217;s win probability while getting visual cues about how past fights or certain fighting styles affect those chances. Clean and clear &#8211; just like we want it!<\/p>\n\n\n\n<p>But Figma isn&#8217;t just about pretty screens. It&#8217;s like a training gym for my designs. We could use its prototyping features to create interactive demos for the dashboard. Think of it as sparring &#8211; before the real fight (in our case, coding) begins. By testing different flows &#8211; like where users might click to compare fighters or how they might explore stats. I get a good sense of what works and what needs to go back to training. Plus, the whole team can leave comments, and together we figure out if a design idea deserves a title belt or an early tap-out.<\/p>\n\n\n\n<p>One of my favorite parts of Figma has been the component library. It&#8217;s like building our toolkit for the octagon. Designing with Figma is turning our data &#8211; heavy project into something even a casual MMA fan can enjoy. I think, is what makes the journey worthwhile, turning data into experience that delivers a knockout every time.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ever tried to make data punch harder than a knockout? That&#8217;s exactly what we&#8217;re aiming for in our current project &#8211; an MMA prediction model that&#8217;s not just about crunching members, but also about making those numbers look cool, clear useful. How do we make that happen? Well, let me introduce you to our secret &hellip; <a href=\"https:\/\/blogs.oregonstate.edu\/colincheng\/2024\/10\/21\/designing-an-mma-prediction-dashboard-with-figma-a-journey-of-visual-punches-and-data-jabs\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Designing an MMA Prediction Dashboard with Figma: A Journey of Visual Punches and Data Jabs<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":14484,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-51","post","type-post","status-publish","format-standard","hentry","category-tech-trails"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/colincheng\/wp-json\/wp\/v2\/posts\/51","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/colincheng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/colincheng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/colincheng\/wp-json\/wp\/v2\/users\/14484"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/colincheng\/wp-json\/wp\/v2\/comments?post=51"}],"version-history":[{"count":2,"href":"https:\/\/blogs.oregonstate.edu\/colincheng\/wp-json\/wp\/v2\/posts\/51\/revisions"}],"predecessor-version":[{"id":54,"href":"https:\/\/blogs.oregonstate.edu\/colincheng\/wp-json\/wp\/v2\/posts\/51\/revisions\/54"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/colincheng\/wp-json\/wp\/v2\/media?parent=51"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/colincheng\/wp-json\/wp\/v2\/categories?post=51"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/colincheng\/wp-json\/wp\/v2\/tags?post=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}