Bocce case study (#318)

* Add Draft of Bocce Case Study (WIP)

* Fix header section

* Edits to Bocce Case Study Page

* Add CTA to bottom of Bocce Case Study

* Add bocce to index page

---------

Co-authored-by: Paloma Pechenik <[email protected]>
Co-authored-by: Dan Ivovich <[email protected]>

_data/case_studies.yml

@@ -1,3 +1,10 @@
+- name: BCHD
+  logo: bchd.png
+  link: /case-studies/bchd
+  before_link: SmartLogic integrated Elasticsearch and added a number of new features to the
+  link_text: Baltimore City Health Department's CHARMcare application,
+  after_link: improving usability, filtering, and relevance of search results.
+
 - name: Simplebet
   logo: simplebet-square.png
   link: /case-studies/simplebet

_data/featured_case_studies.yml

@@ -1,67 +1,23 @@
-# - name: eMed
-#   logo: emed.png
-#   headline: Rapid development to reach scale for at-home testing during the pandemic
-#   link: /case-studies/emed
-#   description: eMed™ is a medtech company that is democratizing digital healthcare. SmartLogic built out eMed's platform for remote monitoring and quality assurance, to support their new at-home COVID test kits.
-
 - name: WCK Direct
   logo: wck.png
   headline: Building a scalable platform to support a food relief program
   link: /case-studies/wck-direct
   description: World Central Kitchen enlisted SmartLogic to transform its MVP into a scalable platform as they aimed to expand their text-to-order food relief program during the COVID-19 pandemic, including an iPad app for restaurants and a TailwindUI admin interface.
 
 - name: Challenge.Gov
-  # logo: challenge-square.jpg
   logo: challenge.png
   headline: A new portal for citizen engagement
   link: /case-studies/challenge
   description: SmartLogic built a new portal for the General Services Administration's department of Technology Transformation Services to support their Challenge.Gov program, which allows federal agencies to engage with the public via challenges and prize competitions.
 
-- name: BCHD
-  logo: bchd.png
-  headline: Improving search and usability for an open resource directory
-  link: /case-studies/bchd
-  description: SmartLogic integrated Elasticsearch and added a number of new features to the Baltimore City Health Department's CHARMcare application, improving usability, filtering, and relevance of search results.
+- name: Bocce
+  logo: bocce.png
+  headline: Building an eLearning web application
+  link: /case-studies/bocce
+  description: SmartLogic and Bocce developed an eLearning app that demystifies the complexities of retirement planning, making financial literacy accessible to all workers.
 
 - name: AEPSinteractive
   logo: aepsi.png
   headline: Streamline UX, data processing, reporting, and printing features
   link: /case-studies/aepsi
   description: SmartLogic developed an early childhood assessment application with customizable features, comprehensive reporting, and seamless lesson planning that tracks and supports progress.
-
-# - name: Simplebet
-#   logo: simplebet-square.png
-#   headline: DevOps architecture for a modern sports betting platform
-#   link: /case-studies/simplebet
-#   description: Simplebet is a modern sports betting startup; they use real-time data ingestion, machine learning, and automation to enable play-by-play microbetting during live sporting events. SmartLogic helped Simplebet design and stand up highly performant and scalable cloud infrastructure to support their new platform.
-
-# - name: Volo
-#   logo: volo-square.png
-#   headline: New microservice API to support a flexible subscription option
-#   link: /case-studies/volo
-#   description: Volo is a social sports platform; they run recreational sports leagues for young adults across the country. A pain point for both team leaders and players is how to manage substitutions when someone on a team can’t make a game. SmartLogic built out an API to support a new flexible offering, VoloPass, to address this need.
-
-# - name: Water Taxi
-#   logo: water-taxi-square.jpg
-#   headline: SmartLogic propels Baltimore Water Taxi's digital transformation
-#   link: /case-studies/baltimore-water-taxi
-#   description: Enjoying a water taxi ride is a charmingly quaint way to move around a city. Paper tickets? Still quaint, but decidedly less charming. In 2016, Baltimore Water Taxi operated with an exclusively paper ticketing system, other than accepting credit card payments for sales.
-#
-# - name: Stanley Black and Decker
-#   logo: sbd-square.png
-#   headline: Q&A with Frank DeSantis, Director of Breakthrough Innovation
-#   link: /case-studies/stanley-black-and-decker
-#   description: Why did you bring SmartLogic in and what problem did they solve for you? We were working on building out a prototype project/idea that required software development expertise. We were comfortable with the hardware and embedded side, but needed some guidance on executing and implementing the user interface.
-
-# - name: Orderup
-#   logo: 250px-Orderup_logo.png
-#   headline: Application development cuts data entry time in half for OrderUp
-#   link: /case-studies/orderup
-#   description: OrderUp, a national online food ordering company, was growing quickly, but hadn’t built their internal development team yet. Paul Barry, OrderUp’s Chief Technical Officer, said OrderUp “didn’t have a lot of development people” when OrderUp first started working with SmartLogic, and they “wanted to grow.”
-
-# - name: Folio Collaborative
-#   logo: folio-square.png
-#   headline: Over eight years since launch, Folio Collaborative continues to grow and evolve
-#
-#   link: /case-studies/folio-workspaces
-#   description: SmartLogic has been working with FolioCollaborative since 2011; the partnership initially grew out of a need to move from a home-grown app to a scalable product. Over the years, the SmartLogic team has worked with FolioCollaborative to continue to grow and support their core product, plan their long-term roadmap, and scope and develop features on a rolling basis.

case-studies/bocce.html

@@ -0,0 +1,148 @@
+---
+title: Bocce Case Study
+description: SmartLogic build of eLearning web application for Bocce.
+body-class: case-study
+breadcrumb: Bocce
+---
+<main class="main" role="main">
+  <section class="section hero hero-no-img">
+    <div class="container">
+      <div class="hero__left">
+        <div class="hero__left-text">
+          <div class="head-text">
+            <h1>Bocce</h1>
+          </div>
+        </div>
+        <div class="hero__left-desc">
+          <p>SmartLogic and Bocce developed an eLearning app that demystifies the complexities of retirement planning,
+            making financial literacy accessible to all workers.</p>
+        </div>
+      </div>
+      <div class="hero__right">
+        <div class="hero__right-img">
+          <div class="hero__right-img">
+            <img src="/images/logo/logos-featured-clients/bocce.svg" alt="Bocce Logo">
+          </div>
+        </div>
+      </div>
+  </section>
+  <div class="content-page-wrapper">
+    <section class="section content-block">
+      <div class="container">
+
+        <ul>
+          <li>Developed a responsive eLearning app using research-based techniques to boost information retention and
+            learning outcomes</li>
+          <li>Implemented gamified elements to increase engagement and information recall</li>
+          <li>Wrote custom code to integrate a JavaScript library with Phoenix LiveView, maintaining full functionality
+            and performance</li>
+          <li>Leveraged Elixir's scalability and real-time features to enhance app performance and reliability</li>
+        </ul>
+
+      </div>
+    </section>
+
+    <div class="content-page-wrapper">
+      <section class="section content-block">
+        <div class="container">
+    <h2>Client Goals</h2>
+
+    <p>A majority of working adults in the United States feel underprepared for retirement. The <a target="_blank"
+        href="https://www.tiaa.org/content/dam/tiaa/institute/pdf/insights-report/2023-01/longevity_literacy_financial_literacy_and_retirement_readiness.pdf">2022
+        P-Fin Index</a> reports that 60% of US workers with retirement savings accounts feel unequipped to make savings
+      decisions, and one in four lack retirement savings. With proper planning, people can improve their future finances
+      and reduce the stress of uncertainty. Today’s workforce urgently needs education to improve financial literacy.
+    </p>
+    <p>The Bocce eLearning app plans to solve this problem and simplify retirement planning. The app transforms complex
+      financial concepts into clear, manageable steps, equipping users with the knowledge to manage 401k accounts
+      effectively. Bocce teamed up with SmartLogic to translate the vision into a digital reality.</p>
+
+    <figure>
+      <img src="{{ site.baseurl }}/images/case-studies/bocce/BocceHome.png" alt="Bocce Web Application Homepage Snapshot"
+        width="100%">
+      <figcaption>Bocce home page</figcaption>
+    </figure>
+
+
+
+    <h2>The Search for a Software Development Partner</h2>
+
+    <p>Bocce sought out an app development partner that could build an educational and responsive web app. After
+      rigorous vetting of around ten candidates, Bocce Product Manager Chris Barnhill said they chose to work with
+      SmartLogic on this project because the “responsiveness is stellar,” adding, "Every time we communicate with the
+      broader team, we’re always looking for an elegant solution to complex problems. And SmartLogic does a good job of
+      coming up with those elegant solutions.”</p>
+
+    <h2>Scalable, Real-Time Applications with Elixir and Phoenix</h2>
+
+    <p>Using tools like <a target="_blank" href=https://smartlogic.io/technologies>Elixir, Phoenix, and Phoenix
+        LiveView</a>, SmartLogic translated Bocce's eLearning vision into a responsive web application, focusing on the
+      ultimate goal of building a visually compelling and user-friendly interface.
+    </p>
+
+    <p>Initially, the Bocce team wasn’t familiar with the Elixir programming language. But, they were on board once the
+      SmartLogic team demonstrated the language’s scalability and real-time performance capabilities. Chris shared, “Not
+      a concern, but a pause - the tech choice of Elixir - our internal developer partners didn’t know what it was -
+      they’ve evaluated it more and looked into it more in-house as well.” </p>
+
+    <h2>Increasing Engagement with Gamification</h2>
+
+    <p>To increase engagement and provide participants with immediate feedback, the Bocce app incorporates a variety of
+      <a target="_blank" href="https://getbocce.com/pdf/Product-Overview-for-Employee.pdf">gamified elements</a>
+      including short lessons, quizzes, and rewards. As users complete lessons and achieve milestones, they earn badges.
+    </p>
+
+    <p>By integrating gamified elements, personalized avatars, quizzes, and levels into the app design, educational material is more digestible and memorable than long-form articles or archives of resources.
+
+    <figure>
+      <img src="{{ site.baseurl }}/images/case-studies/bocce/BocceAwardFinal.gif" alt="Earning a reward in the Bocce App"
+        width="100%">
+      <figcaption>Earning an award in the Bocce app.</figcaption>
+    </figure></p>
+
+    <h2>Custom Avatar Implementation</h2>
+
+    <p>In the Bocce app, an avatar of the user’s future self teaches the material, motivating users and increasing information retention. Customizable avatars add a personal touch to the learning experience. <a target="_blank" href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3949005/">Peer-reviewed studies</a> show that people are more successful in achieving long-term financial goals when they feel a stronger sense of connection and continuity with their future selves.
+
+      <figure>
+        <img src="{{ site.baseurl }}/images/case-studies/bocce/BocceAgeProg.png" alt="Current self and age progressed avatars in the Bocce app."
+          width="25%">
+        <figcaption>Current self and age progressed avatars in the Bocce app.</figcaption>
+      </figure></p>
+
+    <p>With this in mind, SmartLogic added customizable age-progressed avatars to the Bocce eLearning app. Leveraging the avatar builder, called <a target="_blank" href="https://getavataaars.com/">Avataaars</a>, the SmartLogic team ran into a challenge. The library was written for JavaScript and React, and we needed to integrate it into a Phoenix LiveView framework. In the end, the addition of this feature lets users visualize and interact with their future selves, aiming to enhance engagement with retirement planning and improve long-term financial decision-making.
+
+      <figure>
+        <img src="{{ site.baseurl }}/images/case-studies/bocce/BocceAvatar.gif" alt="Creating your personalized avatar."
+          width="100%">
+        <figcaption>Creating your personalized avatar.</figcaption>
+      </figure></p>
+
+    <h2>Collaborating for Financial Education Innovation</h2>
+
+    <p>Bocce and SmartLogic built a strong partnership on the foundations of clear communication and a shared goal. With Bocce’s wealth of knowledge in financial research and SmartLogic’s software development skills, the two teams collaborated to create a tool that illuminates the path to financial literacy in retirement planning.</p>
+
+    <p>Bocce’s Chris Barnhill emphasized, "The face-to-face interactions and SmartLogic's ability to stay a couple of steps ahead, essentially reading our minds, really added value to our collaboration."</p>
+
+    <h2>Transforming Employee Retirement Readiness</h2>
+
+    <p>Employers who adopt Bocce will provide their workforce with a fun, engaging, and educational tool that demystifies investing and retirement planning. The app offers gamified lessons, quizzes, and rewards to ensure employees remain engaged and motivated. This, in turn, can lead to better financial outcomes and increased retirement readiness among employees.</p>
+
+    <p>Bocce’s innovative approach not only benefits individuals but also enriches the value of group retirement programs offered by employers. By providing employees with tools to track retirement goals and earn gamified rewards, the Bocce eLearning app is poised to make a significant impact on employee engagement and financial literacy. Employers who integrate Bocce into their benefits offerings can look forward to a more financially secure and informed workforce.</p>
+
+  </div>
+  </section>
+  <section class="section content-block">
+    <div class="container">
+      <h3>Want to learn more about our work? Check out our other <a href="/case-studies">Case Studies.</a></h3>
+
+
+    </div>
+  </section>
+
+  </div>
+
+</main>
+<footer class="footer">
+  {% include footer-common.html %}
+</footer>