{"id":1869,"date":"2023-11-04T02:53:07","date_gmt":"2023-11-04T02:53:07","guid":{"rendered":"https:\/\/petedilorenzo.com\/?page_id=1869"},"modified":"2024-04-09T00:04:57","modified_gmt":"2024-04-09T00:04:57","slug":"hat-game-app","status":"publish","type":"page","link":"https:\/\/petedilorenzo.com\/design\/hat-game-app\/","title":{"rendered":"Design &#8211; Hat Game App"},"content":{"rendered":"\nClick here to edit the dot navigation module. This text is only for editing and will not appear after you publish the changes.\n    <ul>\n        <li><a href=\"#\" data-row-id=\"concept\" data-prev-row-id=\"\">The Concept<\/a><\/li><li><a href=\"#\" data-row-id=\"research\" data-prev-row-id=\"concept\">Research &#038; Analysis<\/a><\/li><li><a href=\"#\" data-row-id=\"sketches\" data-prev-row-id=\"research\">Sketches &#038; Wireframes<\/a><\/li><li><a href=\"#\" data-row-id=\"mockups\" data-prev-row-id=\"sketches\">Mockups &#038; Prototype<\/a><\/li><li><a href=\"#\" data-row-id=\"ux-issues\" data-prev-row-id=\"mockups\">Resolving UX Issues<\/a><\/li><li><a href=\"#\" data-row-id=\"testing\" data-prev-row-id=\"ux-issues\">Testing &#038; Revisions<\/a><\/li><li><a href=\"#\" data-row-id=\"vision\" data-prev-row-id=\"testing\">The Big Picture<\/a><\/li>    <\/ul>\n<h1>\n\t\tThe Hat Game Mobile App\n\t<\/h1>\n\t<p>User Experience &amp; Interface DESIGN<\/p>\n<h3>\n\t\tTable of Contents:\n\t<\/h3>\n\t<ul>\n\t\t<li>\t\t\t\t\n\t\t<a href=\"#concept\" target=\"_self\" aria-label=\"Go to #concept\" rel=\"noopener\">1 &#8211; The Concept<\/a><\/li><li>\t\t\t\t\n\t\t<a href=\"#research\" target=\"_self\" aria-label=\"Go to #research\" rel=\"noopener\">2 &#8211; Research &#038; Analysis<\/a><\/li><li>\t\t\t\t\n\t\t<a href=\"#sketches\" target=\"_self\" aria-label=\"Go to #sketches\" rel=\"noopener\">3 &#8211; Sketches &#038; Wireframes<\/a><\/li><li>\t\t\t\t\n\t\t<a href=\"#mockups\" target=\"_self\" aria-label=\"Go to #mockups\" rel=\"noopener\">4 &#8211; Mockups &#038; Prototype<\/a><\/li><li>\t\t\t\t\n\t\t<a href=\"#ux-issues\" target=\"_self\" aria-label=\"Go to #ux-issues\" rel=\"noopener\">5 &#8211; Resolving UX Issues<\/a><\/li><li>\t\t\t\t\n\t\t<a href=\"#testing\" target=\"_self\" aria-label=\"Go to #testing\" rel=\"noopener\">6 &#8211; Testing &#038; Revisions<\/a><\/li><li>\t\t\t\t\n\t\t<a href=\"#vision\" target=\"_self\" aria-label=\"Go to #vision\" rel=\"noopener\">7 &#8211; The Big Picture<\/a><\/li>\t<\/ul>\n<h3>\n\t\tProject Specs:\n\t<\/h3>\n\t<ul>\n\t\t<li><p>Objective:Design a mobile game experience with an intuitive user interface for virtual or in-person play<\/p><\/li><li>My Role:Project Lead, UX\/UI Designer, Project Manager for Front-End Development<\/li><li>Tools Used:Figma, Photoshop, Illustrator<\/li>\t<\/ul>\n\t\t\t\n\t\t<h2>\n\t\t\tThe Concept\n\t\t<\/h2>\n\t\t\t<p>What is The Hat Game anyway?<\/p>\t\t\n<h3>\n\t\tA Jointly-Crafted Agenda of Activities\n\t<\/h3>\n\t<p>Lorem ipsum dolor sit amet, enim ac quis lectus in, pharetra lorem sodales metus tortor, risus duis magnis magna lacus convallis, quis wisi et, volutpat pretium.<\/p>\n<p>Lectus dolor quisque in ante cum nulla. Sagittis suspendisse, commodo nonummy ultrices nisl hac massa vestibulum, volutpat laoreet donec in, aliquet ridiculus praesent nullam.<\/p>\n<p>Lectus dolor quisque in ante cum nulla. Sagittis suspendisse, commodo nonummy ultrices nisl hac massa vestibulum, volutpat laoreet donec in, aliquet ridiculus praesent.<\/p>\n\t\t\t\t<a href=\"https:\/\/petedilorenzo.com\/wp-content\/uploads\/2023\/11\/HatGraphic-4.jpg\" target=\"_self\" itemprop=\"url\" rel=\"noopener\">\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/petedilorenzo.com\/wp-content\/uploads\/2023\/11\/HatGraphic-4.jpg\" alt=\"The Hat Game explained\" itemprop=\"image\" height=\"1311\" width=\"761\" title=\"HatGraphic-4\" onerror=\"this.style.display='none'\"  \/>\n\t\t\t\t<\/a>\n\t\tThe Hat Game explained\n<h3>\n\t\tThe Deeper Purpose\n\t<\/h3>\n\t<p>Lorem ipsum dolor sit amet, enim ac quis lectus in, pharetra lorem sodales metus tortor, risus duis magnis magna lacus convallis, quis wisi et, volutpat pretium.<\/p>\n<p>Lectus dolor quisque in ante cum nulla. Sagittis suspendisse, commodo nonummy ultrices nisl hac massa vestibulum, volutpat laoreet donec in, aliquet ridiculus praesent nullam in semper.<\/p>\n<h3>\n\t\tThe Challenge: Making It Into an App\n\t<\/h3>\n\t<p>Lorem ipsum dolor sit amet, enim ac quis lectus in, pharetra lorem sodales metus tortor, risus duis magnis magna lacus convallis, quis wisi et, volutpat pretium.<\/p>\n<p>Lectus dolor quisque in ante cum nulla. Sagittis suspendisse, commodo nonummy ultrices nisl hac massa vestibulum, volutpat laoreet donec in, aliquet ridiculus praesent nullam in semper.<\/p>\n\t\t\t\n\t\t<h2>\n\t\t\tResearch &#038; Analysis\n\t\t<\/h2>\n\t\t\t<p>What do we need to know?<\/p>\t\t\n<h3>\n\t\tPlaying the Game\n\t<\/h3>\n\t<p>Lorem ipsum dolor sit amet, enim ac quis lectus in, pharetra lorem sodales metus tortor, risus duis magnis magna lacus convallis, quis wisi et, volutpat pretium.<\/p>\n<p>Lectus dolor quisque in ante cum nulla. Sagittis suspendisse, commodo nonummy ultrices nisl hac massa vestibulum, volutpat laoreet donec in, aliquet ridiculus praesent nullam in semper.<\/p>\n<h3>\n\t\tFinding Outside Inspiration\n\t<\/h3>\n\t<p>Lorem ipsum dolor sit amet, enim ac quis lectus in, pharetra lorem sodales metus tortor, risus duis magnis magna lacus convallis, quis wisi et, volutpat pretium.<\/p>\n<p>Lectus dolor quisque in ante cum nulla. Sagittis suspendisse, commodo nonummy ultrices nisl hac massa vestibulum, volutpat laoreet donec in, aliquet ridiculus praesent nullam in semper.<\/p>\n<h3>\n\t\tAsking the Right Questions\n\t<\/h3>\n\t<p>Lorem ipsum dolor sit amet, enim ac quis lectus in, pharetra lorem sodales metus tortor, risus duis magnis magna lacus convallis, quis wisi et, volutpat pretium.<\/p>\n<p>Lectus dolor quisque in ante cum nulla. Sagittis suspendisse, commodo nonummy ultrices nisl hac massa vestibulum, volutpat laoreet donec in, aliquet ridiculus praesent nullam in semper.<\/p>\n\t\t\t\n\t\t<h2>\n\t\t\tSketches &#038; Wireframes\n\t\t<\/h2>\n\t\t\t<p>How to Visualize the Flow?<\/p>\t\t\n<h3>\n\t\tMaking It Rough\n\t<\/h3>\n\t<p>Lorem ipsum dolor sit amet, enim ac quis lectus in, pharetra lorem sodales metus tortor, risus duis magnis magna lacus convallis, quis wisi et, volutpat pretium.<\/p>\n<p>Lectus dolor quisque in ante cum nulla. Sagittis suspendisse, commodo nonummy ultrices nisl hac massa vestibulum, volutpat laoreet donec in, aliquet ridiculus praesent nullam in semper.<\/p>\n<h3>\n\t\tGetting in the Flow\n\t<\/h3>\n\t<p>Lorem ipsum dolor sit amet, enim ac quis lectus in, pharetra lorem sodales metus tortor, risus duis magnis magna lacus convallis, quis wisi et, volutpat pretium.<\/p>\n<p>Lectus dolor quisque in ante cum nulla. Sagittis suspendisse, commodo nonummy ultrices nisl hac massa vestibulum, volutpat laoreet donec in, aliquet ridiculus praesent nullam in semper.<\/p>\n<h3>\n\t\tKeeping It Flexible\n\t<\/h3>\n\t<p>Lorem ipsum dolor sit amet, enim ac quis lectus in, pharetra lorem sodales metus tortor, risus duis magnis magna lacus convallis, quis wisi et, volutpat pretium.<\/p>\n<p>Lectus dolor quisque in ante cum nulla. Sagittis suspendisse, commodo nonummy ultrices nisl hac massa vestibulum, volutpat laoreet donec in, aliquet ridiculus praesent nullam in semper.<\/p>\n\t\t\t\n\t\t<h2>\n\t\t\tMockups &#038; Prototype\n\t\t<\/h2>\n\t\t\t<p>how can we bring it to life?<\/p>\t\t\n<h3>\n\t\tNow the Really Fun Part!\n\t<\/h3>\n\t<p>Lorem ipsum dolor sit amet, enim ac quis lectus in, pharetra lorem sodales metus tortor, risus duis magnis magna lacus convallis, quis wisi et, volutpat pretium.<\/p>\n<p>Lectus dolor quisque in ante cum nulla. Sagittis suspendisse, commodo nonummy ultrices nisl hac massa vestibulum, volutpat laoreet donec in, aliquet ridiculus praesent nullam in semper.<\/p>\n<h3>\n\t\tFrom Static to Interactive\n\t<\/h3>\n\t<p>Lorem ipsum dolor sit amet, enim ac quis lectus in, pharetra lorem sodales metus tortor, risus duis magnis magna lacus convallis, quis wisi et, volutpat pretium.<\/p>\n<p>Lectus dolor quisque in ante cum nulla. Sagittis suspendisse, commodo nonummy ultrices nisl hac massa vestibulum, volutpat laoreet donec in, aliquet ridiculus praesent nullam in semper.<\/p>\n\t\t\t\n\t\t<h2>\n\t\t\tResolving UX Issues\n\t\t<\/h2>\n\t\t\t<p>What could go wrong?<\/p>\t\t\n<h3>\n\t\tRethinking the User Journey\n\t<\/h3>\n\t<p>Lorem ipsum dolor sit amet, enim ac quis lectus in, pharetra lorem sodales metus tortor, risus duis magnis magna lacus convallis, quis wisi et, volutpat pretium.<\/p>\n<p>Lectus dolor quisque in ante cum nulla. Sagittis suspendisse, commodo nonummy ultrices nisl hac massa vestibulum, volutpat laoreet donec in, aliquet ridiculus praesent nullam in semper.<\/p>\n<h3>\n\t\tMaking the Experience More Intuitive\n\t<\/h3>\n\t<p>Lorem ipsum dolor sit amet, enim ac quis lectus in, pharetra lorem sodales metus tortor, risus duis magnis magna lacus convallis, quis wisi et, volutpat pretium.<\/p>\n<p>Lectus dolor quisque in ante cum nulla. Sagittis suspendisse, commodo nonummy ultrices nisl hac massa vestibulum, volutpat laoreet donec in, aliquet ridiculus praesent nullam in semper.<\/p>\n<h3>\n\t\tUnderstanding Technical Components\n\t<\/h3>\n\t<p>Lorem ipsum dolor sit amet, enim ac quis lectus in, pharetra lorem sodales metus tortor, risus duis magnis magna lacus convallis, quis wisi et, volutpat pretium.<\/p>\n<p>Lectus dolor quisque in ante cum nulla. Sagittis suspendisse, commodo nonummy ultrices nisl hac massa vestibulum, volutpat laoreet donec in, aliquet ridiculus praesent nullam in semper.<\/p>\n\t\t\t\n\t\t<h2>\n\t\t\tTesting &#038; Revisions\n\t\t<\/h2>\n\t\t\t<p>How can we improve this?<\/p>\t\t\n<h3>\n\t\tGetting User Feedback\n\t<\/h3>\n\t<p>Lorem ipsum dolor sit amet, enim ac quis lectus in, pharetra lorem sodales metus tortor, risus duis magnis magna lacus convallis, quis wisi et, volutpat pretium.<\/p>\n<p>Lectus dolor quisque in ante cum nulla. Sagittis suspendisse, commodo nonummy ultrices nisl hac massa vestibulum, volutpat laoreet donec in, aliquet ridiculus praesent nullam in semper.<\/p>\n<h3>\n\t\tEvolve, Improve, Repeat.\n\t<\/h3>\n\t<p>Lorem ipsum dolor sit amet, enim ac quis lectus in, pharetra lorem sodales metus tortor, risus duis magnis magna lacus convallis, quis wisi et, volutpat pretium.<\/p>\n<p>Lectus dolor quisque in ante cum nulla. Sagittis suspendisse, commodo nonummy ultrices nisl hac massa vestibulum, volutpat laoreet donec in, aliquet ridiculus praesent nullam in semper.<\/p>\n\t\t\t\n\t\t<h2>\n\t\t\tThe Big Picture\n\t\t<\/h2>\n\t\t\t<p>Where can we take this concept?<\/p>\t\t\n<h3>\n\t\tMore Than Just a Game\n\t<\/h3>\n\t<p>Lorem ipsum dolor sit amet, enim ac quis lectus in, pharetra lorem sodales metus tortor, risus duis magnis magna lacus convallis, quis wisi et, volutpat pretium.<\/p>\n<p>Lectus dolor quisque in ante cum nulla. Sagittis suspendisse, commodo nonummy ultrices nisl hac massa vestibulum, volutpat laoreet donec in, aliquet ridiculus praesent nullam in semper.<\/p>\n<h3>\n\t\tAdding Ai Components\n\t<\/h3>\n\t<p>Lorem ipsum dolor sit amet, enim ac quis lectus in, pharetra lorem sodales metus tortor, risus duis magnis magna lacus convallis, quis wisi et, volutpat pretium.<\/p>\n<p>Lectus dolor quisque in ante cum nulla. Sagittis suspendisse, commodo nonummy ultrices nisl hac massa vestibulum, volutpat laoreet donec in, aliquet ridiculus praesent nullam in semper.<\/p>\n<h3>\n\t\tSocial Media Integration\n\t<\/h3>\n\t<p>Lorem ipsum dolor sit amet, enim ac quis lectus in, pharetra lorem sodales metus tortor, risus duis magnis magna lacus convallis, quis wisi et, volutpat pretium.<\/p>\n<p>Lectus dolor quisque in ante cum nulla. Sagittis suspendisse, commodo nonummy ultrices nisl hac massa vestibulum, volutpat laoreet donec in, aliquet ridiculus praesent nullam in semper.<\/p>\n\t\t\t<a href=\"#top-section\" target=\"_self\" rel=\"noopener\">\n\t\t\t\t\t\t\tBack To Top\n\t\t\t\t\t<\/a>\n<h2>\n\t\tWanna Work With Me?\n\t<\/h2>\n\t<p>I LOVE collaborating on creative projects and bringing ideas to life! My door is always open, so&#8230;hit me up if any of these apply:<\/p>\n\t\t\t<a href=\"\/design\/product-design\/\" target=\"_self\" rel=\"noopener\">\n\t\t\t\t\t\t\tGet in Touch!\n\t\t\t\t\t<\/a>\n\n","protected":false},"excerpt":{"rendered":"<p>Click here to edit the dot navigation module. This text is only for editing and will not appear after you publish the changes. The Concept Research &#038; Analysis Sketches &#038; Wireframes Mockups &#038; Prototype Resolving UX Issues Testing &#038; Revisions The Big Picture The Hat Game Mobile App User Experience &amp; Interface DESIGN Table of&hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":1426,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nf_dc_page":"","footnotes":""},"class_list":["post-1869","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/petedilorenzo.com\/wp-json\/wp\/v2\/pages\/1869","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/petedilorenzo.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/petedilorenzo.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/petedilorenzo.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/petedilorenzo.com\/wp-json\/wp\/v2\/comments?post=1869"}],"version-history":[{"count":5,"href":"https:\/\/petedilorenzo.com\/wp-json\/wp\/v2\/pages\/1869\/revisions"}],"predecessor-version":[{"id":2795,"href":"https:\/\/petedilorenzo.com\/wp-json\/wp\/v2\/pages\/1869\/revisions\/2795"}],"up":[{"embeddable":true,"href":"https:\/\/petedilorenzo.com\/wp-json\/wp\/v2\/pages\/1426"}],"wp:attachment":[{"href":"https:\/\/petedilorenzo.com\/wp-json\/wp\/v2\/media?parent=1869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}