{"id":9374,"date":"2024-04-30T15:29:44","date_gmt":"2024-04-30T15:29:44","guid":{"rendered":"https:\/\/studentwork.prattsi.org\/infoshow\/?p=9374"},"modified":"2024-05-08T18:43:05","modified_gmt":"2024-05-08T18:43:05","slug":"meet-jj-a-fun-and-effective-design-system-for-jamba-juice","status":"publish","type":"post","link":"https:\/\/studentwork.prattsi.org\/infoshow\/2024\/meet-jj-a-fun-and-effective-design-system-for-jamba-juice","title":{"rendered":"Meet JJ: A Fun and Effective Design System for Jamba Juice"},"content":{"rendered":"<p style=\"text-align: left\">JJ is a design system, complete with <a href=\"https:\/\/www.figma.com\/community\/file\/1304863825837849568\/jj-ui-kit\">UI kit<\/a> and <a href=\"https:\/\/zeroheight.com\/9c2bd2832\/p\/939dca-jj\">documentation<\/a> website, that captures the creativity and delight of the <a href=\"https:\/\/www.jamba.com\/\">Jamba Juice<\/a> brand. Incorporating consistency, accessibility, and efficiency, JJ was created by deconstructing and standardizing components from Jamba&#8217;s digital products.<\/p>\n<p>By Mary Haws, Alexis Li, and Keyi Zhang<\/p>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">What is a design system?<\/h2>\n\n\n\n<p>A design system is a library of reusable components that allow designers and developers to create uniform interfaces across different digital products within an organization. <\/p>\n\n\n\n<p>Design systems also include comprehensive documentation about how to use the components, allowing for more efficient workflows and better communication across teams.<\/p>\n\n\n\n<p><strong>Like other design systems, JJ is effective. <\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"728\" src=\"https:\/\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/Desktop-1-1024x728.png\" alt=\"\" class=\"wp-image-9875\" srcset=\"https:\/\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/Desktop-1-1024x728.png 1024w, https:\/\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/Desktop-1-300x213.png 300w, https:\/\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/Desktop-1-768x546.png 768w, https:\/\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/Desktop-1-1536x1092.png 1536w, https:\/\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/Desktop-1-2048x1456.png 2048w, https:\/\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/Desktop-1-973x692.png 973w, https:\/\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/Desktop-1-508x361.png 508w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>But JJ also stands out in the crowd of design systems: JJ is <span style=\"text-decoration: underline\">fun<\/span> too!<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">JJ is just delightful, just efficient, and just inclusive!<\/h2>\n\n\n\n<p>These are JJ&#8217;s core design principles, which reflect the mission and values of Jamba Juice:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Just delightful:<\/strong> Fun is foundational to Jamba and JJ. Vibrancy and personality are injected into every pixel, actively engaging users throughout their Jamba Juice journey. Refreshing and colorful ingredients make up our smoothies, bowls, juices, and design system!<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Just efficient:<\/strong> It\u2019s not enough to just have the right ingredients. Here are Jamba, we\u2019re also known for our speedy and consistent service&#8211;and that includes JJ. Users will experience whirl\u2019d famous value with minimal effort, making their experiences easier, better, and more fun.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Just inclusive:<\/strong> JJ is designed with diversity and wellness in mind. Customizing a webpage is as easy as customizing your smoothie at Jamba. Our friendly vibes and built-in accessibility features also ensure that anyone can step into the Jamba whirl\u2019d!<\/li>\n<\/ul>\n\n\n\n<p><strong>Just gotta Jamba!<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Come meet JJ at Info Show!<\/h2>\n\n\n\n<p>Our team will be pitching JJ to <em><span style=\"text-decoration: underline\">YOU<\/span><\/em> (while imagining you work at Jamba Juice) during Session 2 (5:55-6:35pm) in Room 609.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.figma.com\/proto\/7W7TlzkuWKA9HRZZ5qUdkZ\/JJ-Pitch-Deck?page-id=149%3A1126&amp;type=design&amp;node-id=149-1127&amp;viewport=666%2C570%2C0.08&amp;t=CbcKU1D2GqcUfCKi-1&amp;scaling=min-zoom&amp;starting-point-node-id=149%3A1127&amp;mode=design\">Explore our pitch deck.<\/a><\/p>\n\n\n\n<p>Learn more about how we created JJ in our case studies:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/maryfhaws.github.io\/jj.html\">Mary&#8217;s case study<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alexis-design.framer.website\/JJ-Design-System\">Alexis&#8217; case study<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/keyi-zhang.com\/JJ\">Keyi&#8217;s case study<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>JJ is a design system, complete with UI kit and documentation website, that captures the creativity and delight of the Jamba Juice brand. Incorporating consistency, accessibility, and efficiency,&#8230;<\/p>\n","protected":false},"author":4177,"featured_media":9837,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1150],"tags":[],"coauthors":[1169,1188,1189],"class_list":["post-9374","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-1150"],"_links":{"self":[{"href":"https:\/\/studentwork.prattsi.org\/infoshow\/wp-json\/wp\/v2\/posts\/9374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studentwork.prattsi.org\/infoshow\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studentwork.prattsi.org\/infoshow\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infoshow\/wp-json\/wp\/v2\/users\/4177"}],"replies":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infoshow\/wp-json\/wp\/v2\/comments?post=9374"}],"version-history":[{"count":11,"href":"https:\/\/studentwork.prattsi.org\/infoshow\/wp-json\/wp\/v2\/posts\/9374\/revisions"}],"predecessor-version":[{"id":9910,"href":"https:\/\/studentwork.prattsi.org\/infoshow\/wp-json\/wp\/v2\/posts\/9374\/revisions\/9910"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infoshow\/wp-json\/wp\/v2\/media\/9837"}],"wp:attachment":[{"href":"https:\/\/studentwork.prattsi.org\/infoshow\/wp-json\/wp\/v2\/media?parent=9374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infoshow\/wp-json\/wp\/v2\/categories?post=9374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infoshow\/wp-json\/wp\/v2\/tags?post=9374"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infoshow\/wp-json\/wp\/v2\/coauthors?post=9374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}