Skip to content

Commit

Permalink
Merge pull request #316 from Bixal/feature/BSD-84-case-studies-story
Browse files Browse the repository at this point in the history
BSD fixes #84: Case studies story
  • Loading branch information
mattsqd authored Oct 30, 2024
2 parents d5bcc88 + 1b22b26 commit 10c5d9c
Show file tree
Hide file tree
Showing 7 changed files with 158 additions and 171 deletions.
7 changes: 5 additions & 2 deletions stories/assets/styles/global/global.scss
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,13 @@ h6 {
}

h1 {
font-size: px-to-rem(64px);
font-size: px-to-rem(32px);
margin-bottom: units(2);
text-wrap: balance;

@include at-media("tablet") {
font-size: px-to-rem(64px);
}
}

h2 {
Expand Down Expand Up @@ -177,7 +181,6 @@ a {
}

p {

// Improves readability in word breaks.
&[lang="en"] {
hyphens: auto;
Expand Down
4 changes: 4 additions & 0 deletions stories/components/section/section.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
padding-bottom: units(10);
}

.bix-section__title:not(:first-of-type) {
margin-top: units(8);
}

&__body p {
max-width: px-to-rem(725px);
widows: 3;
Expand Down
6 changes: 2 additions & 4 deletions stories/components/section/section.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,7 @@ export const AccentCool = {
export const BackgroundImage = {
args: {
additional_classes: ["bix-section--primary"],
image:
"static/img-whatwedo-e68b3d20abd32c896d56b122063f7664.jpg",
image: "static/img-whatwedo-e68b3d20abd32c896d56b122063f7664.jpg",
prefix: "What we do",
title:
"The work we do helps our clients unite stakeholders, optimize resources, and better serve citizens all over the world.",
Expand All @@ -85,8 +84,7 @@ export const Tall = {
args: {
variant: "tall",
center_content: true,
image:
"static/img-careers-269d29ea5a43482c6c0b920bdd5e9d87.jpg",
image: "static/img-careers-269d29ea5a43482c6c0b920bdd5e9d87.jpg",
prefix: "What we do",
title:
"The work we do helps our clients unite stakeholders, optimize resources, and better serve citizens all over the world.",
Expand Down
124 changes: 3 additions & 121 deletions stories/pages/case-study/case-study.html.twig
Original file line number Diff line number Diff line change
@@ -1,126 +1,8 @@
{% extends "@pages/base/base.html.twig" %}

{% block content %}
{% embed "@components/section/section.html.twig" %}
{% set body %}

<div class="bix-case-study__overview">
<dl>
<dt>United States Agency for International Development (USAID)</dt>
<dd>Digital APEX Colombia</dd>
<dd><a href="https://www.usaid.gov/colombia">https://www.usaid.gov/colombia</a></dd>
</dl>

<dl>
<dt>Services</dt>
<dd>Cybersecurity Training</dd>
<dd>Virtual Instructor-led Training</dd>
<dd>Capacity Building</dd>
<dd>Instructional Design</dd>
<dd>Accessibility/508 Compliance</dd>
<dd>Bilingual English-Spanish Training Delivery</dd>
<dd>Communications</dd>
<dd>Marketing</dd>
<dd>Cybersecurity Risk Assessments</dd>
<dd>Agile Project Management</dd>
</dl>
</div>
{% endset %}
{% endembed %}

{% embed "@components/section/section.html.twig" %}

{% set body %}
<h2>Challenge</h2>
<p>
The increased use of technology, mobile phones and digital systems means USAID/Colombia’s IPs face a wide range of vulnerabilities, such as phishing attacks, account impersonation attempts and cyber-based corrupt financial transactions. The scarcity of cybersecurity education for vulnerable IPs translates to a higher risk of attacks and security breaches, which forces organizations to remedy system failures and change user behaviors to mitigate future attacks. Attacks can erode the public’s and stakeholders’ trust in how organizations handle personal and sensitive information, ultimately undermining IPs’ integrity and confidence in the programs they deploy.
</p>

<h2>Solution</h2>
<p>
Working with the USAID/Colombia Mission, Bixal developed and implemented a cybersecurity training program that used an interactive online training format, assessed existing hardware and software assets, and developed action plans aligned to best practices outlined in the Center for Internet Security (CIS) Controls to improve cybersecurity vulnerabilities.
</p>

<h2>Results</h2>
<p>
Through a combined approach of asynchronous training and virtual learning, 298 individuals representing 44 organizations in Colombia increased their knowledge of cybersecurity and improved their digital health practices. Bixal conducted cyber risk assessments with the most vulnerable partner organizations to develop roadmaps with action items designed to increase digital protection and reduce the risk of cyberattacks.
</p>

<h2>Design & Approach</h2>
<p>
Under Digital APEX — implemented by prime contractor Project Management Consulting Group (PMCG) — Bixal collaborated with the USAID/Colombia Mission to develop and implement the Cybersecurity Integration of Partners and Hacking Emergency Response (CIPHER), a cybersecurity training program that uses an easily replicable three-phased approach.
</p>

<h3>Phase 1: Generating Cybersecurity Awareness</h3>
<p>
Bixal introduced cybersecurity concepts to the participating organizations using KnowBe4, a platform that offers asynchronous training available in Spanish, which enabled the organizations’ leadership, program and IT staff to take self-paced courses and learn more about basic cybersecurity concepts.
</p>

<h3>Phase 2: Assisting Usaid Ips</h3>
<p>
To deliver additional training and assistance, Bixal identified the 10 most vulnerable IPs based on data from initial training quizzes. We drafted rules of engagement that detailed system restrictions and boundaries to ensure confidentiality throughout the assessment process. Bixal then conducted the cybersecurity risk assessments, testing external and internal accessible systems, hosts and applications for IT, communications and network systems. After completing the assessments, Bixal scheduled individual sessions with each of the 10 IPs, designing virtual instructor-led training (ILT). The in-depth training enabled IT professionals to further diffuse cybersecurity best practices across the organization and ensure all users are aware of their behaviors and responsibility to mitigate cybersecurity attacks and threats.
</p>

<h3>Phase 3: Developing And Disseminating Action Plans</h3>
<p>
Bixal analyzed data collected through the in-depth training and risk assessments to draft individual action plans for each of the 10 IPs. Action plans communicated assessment results, documented cybersecurity vulnerabilities and provided recommendations for remediation. Bixal and Digital APEX met with IT and management staff of IPs to review action plans and outline steps for IPs to ensure future cybersecurity.
</p>

<h2>Delivering the Solution</h2>
<p>
Bixal uses proven methods for delivering the right solution to the right client.
</p>

<h3>Collaboration, Learning And Adapting (Cla) Approach</h3>
<p>
Strong CLA practices enabled Bixal to learn from client feedback and incorporate process improvements to generate better outcomes. The Bixal team met with the client weekly to plan activities, make decisions on preferred approaches for activity implementation, discuss impediments, and identify solutions. This level of client collaboration allowed us to continuously adapt to changing circumstances and stakeholder needs.
</p>

<H3>Local Cybersecurity Expertise</H3>
<p>
We leveraged a new partnership with Functional Cybersecurity International LLC (FC International), engaging local SMEs with extensive knowledge of cybersecurity threats in Colombia.
</p>

<H3>Data-Centered Methodology</H3>
<p>
We used data from the cybersecurity training and testing to identify the most vulnerable organizations participating in the program, to inform cybersecurity solutions and topics covered in webinars tailored to selected partners, and to assess the effectiveness of training provided.
</p>

<h2>Unexpected Challenge</h2>
<p>
As the COVID-19 pandemic worsened and international travel was restricted, Bixal converted our training plan from instructor led to virtual delivery. In-house instructional designers worked with cybersecurity experts to design a highly interactive virtual course that used adult-learning techniques, collaborative whiteboards, short quizzes and pop-up polls to keep participants engaged. As a result of virtual training, 146 participants from 10 IPs experienced a substantial improvement in their cybersecurity knowledge.
</p>
{% endset %}
{% endembed %}

{% embed "@components/section/section.html.twig" %}
{% set variant = "primary-alt" %}

{% set body %}
<h2>Outcomes</h2>
<p>Bixal applied an Agile learning approach in designing and developing a cybersecurity training program to help USAID IPs and civil society organizations in Colombia improve their digital health, build local capacity and strengthen cybersecurity practices. As part of this program, Bixal provided access to asynchronous training modules and delivered 15 synchronous virtual ILT sessions to over 298 participants from 44 USAID partners. The topics selected contributed to a growing knowledge base on cybersecurity vulnerabilities that impact organizations’ governance structure, technology infrastructure and business operations.</p>

<p>Working with the USAID/Colombia Mission, Bixal assessed existing hardware and software assets for cybersecurity vulnerabilities and delivered training organized into five learning topics that mapped to 20 CIS controls.</p>

<p>In Bixal’s experience, when people understand cybersecurity threats and demonstrate familiarity with best practices to combat cyberattacks, the likelihood of destructive cyberattacks decreases.</p>

<p>Webinar quiz results demonstrated that USAID/Colombia’s IPs had a low baseline knowledge of cybersecurity. Data from the 10 risk assessments conducted in Phase II confirmed the need for cybersecurity action plans. Over 95 percent of participants who identified as “novice” before the training advanced their knowledge to align with higher competency levels as a result of the program. Detailed post-training survey results are captured in the following chart.</p>

<p>These results demonstrate that a multi-faceted approach, coupling asynchronous and virtual ILT with risk assessments and roadmaps for improvement, can result in significant improvements in cybersecurity awareness.</p>
{% endset %}


{% endembed %}

{% embed "@components/section/section.html.twig" %}
{% set body %}

<h2>Improvements in recipients’ cybersecurity knowledge after in-depth interactive training.</h2>
<p>These results demonstrate that a multi-faceted approach, coupling asynchronous and virtual ILT with risk assessments and roadmaps for improvement, can result in significant improvements in cybersecurity awareness.</p>

{# @TODO: Highlight component #}
<h3>Highlight</h3>
<p>Overall, Bixal delivered cybersecurity training to 298 individuals, supporting capacity development for 44 organizations to improve their digital health.</p>
{% endset %}
{% endembed %}
{% for section in sections %}
{% include "@components/section/section.html.twig" with section %}
{% endfor %}
{% endblock %}
85 changes: 78 additions & 7 deletions stories/pages/case-study/case-study.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import CaseStudy from "./case-study.html.twig";

import * as Header from "../../components/header/header.stories";
import "../../components/hero/hero.stories";
import * as Blurb from "../../components/blurb/blurb.stories";
import "../../components/contact-us/contact-us.stories";
import "../../components/footer/footer.stories";
import * as FooterContent from "../../components/footer/footer.stories";
Expand All @@ -15,11 +14,83 @@ export default {
export const Default = {
args: {
header: Header.default.args,
hero: {
variant: "image-bg",
title: "Building cybersecurity capacity of civil society organizations in Colombia to improve digital health and protect against cyber threats.",
image: "/static/d6b25ad6c22c438dde0709d18958c405/digital-apex-1.png",
},
footerContent: FooterContent.default.args
sections: [
{
variant: "primary-alt",
heading_type: "h1",
prefix: "Department of Labor and Education",
title:
"Working for Americans: Bixal helps transform WIOA state plan portal",
},
{
body: `
<h2 class="bix-section__title">Introduction</h2>
<p>
The Workforce Innovation and Opportunity Act (WIOA) is designed to strengthen the public workforce system by expanding access to education and training, helping employers hire and retain skilled workers, and creating opportunities for Americans — especially those with significant barriers to employment—to thrive in high-quality careers.
</p>
<h2 class="bix-section__title">Challenge</h2>
<p>
WIOA requires all U.S. states, territories, and the District of Columbia to regularly submit State Plans outlining how the workforce development system will be implemented. The WIOA State Plan Portal facilitates this process from draft to publication, connecting state and local partners with several federal agencies, including the Departments of Education (ED), and Labor (DOL). Funding is contingent on states having approved plans.
</p>
<p>
In 2018, ED and DOL awarded Bixal the contract to streamline the submission process with a comprehensive upgrade of the platform. The legacy site lacked crucial functionalities, making WIOA compliance burdensome for stakeholders on all sides. Bixal and our federal partners committed to co-creating a robust, user-friendly platform that would remain nimble for years to come.
</p>
<h2 class="bix-section__title">Solution</h2>
<p>
Bixal began by auditing the user experience (UX) across the State Plan lifecycle, building a solid foundation for holistic UX that adheres to the highest standards of accessibility, in order to translate customer needs into optimized functionality and processes.
</p>
<strong>Key aspects of our solution included:</strong>
<ul>
<li>Building an application to manage creation, modification, and year-to-year traceability of thousands of requirements.</li>
<li>Developing templates for individual state plans, supported by rigorous, multi-tiered, role-based workflow.</li>
<li>Integrating nearly 60,000 pages of data into a single, easily navigable site.</li>
<li>Pivoting several times to meet new and emerging security and governance requirements, for example:
<ul>
<li>Pivoted to Acquia cloud-based hosting as a service (PaaS) when the ED platform faced delays.</li>
<li>Integrated login.gov to comply with new OMB directive.</li>
</ul>
</li>
</ul>
`,
},
{
variant: "accent-cool",
title: "Impact",
body: `
<strong>State Plan submission processes optimized:</strong>
<ul>
<li>Thousands of previously separate grant requirements for every state &mdash; spread across nine offices within five agencies, a total of 15 programs &mdash; streamline into a single grant process.</li>
<li>All plan elements from previous plan years (2016 and 2018) readily available for reference and knowledge management.
<ul>
<li>Complex workflow management controls who can view, comment, or edit portions of a State Plan based on role and plan status</li>
</ul>
</li>
<li>
The upgraded State Plan Portal gives federal teams shared visibility into workforce development needs in and across states and regions, allowing for integrated and comprehensive approaches in addressing businesses' and workers' needs.
</li>
<li>
Improved user experience, as reflected in consistently and enthusiastically positive stakeholder feedback.
</li>
</ul>
<strong>Upgraded functionality features of State Plan Portal include:</strong>
<ul>
<li>Multi-factor authentication.</li>
<li>Multi-tier moderation.</li>
<li>Overhauled reporting tools provide a reliable audit trail.</li>
<li>Dashboards meet users' changing needs.</li>
</ul>
`,
},
{
variant: "primary-alt",
title: "Conclusion",
body: `
<p>
Bixal's work for ED and DOL made it much easier for state and local partners to adhere to WIOA's provisions, facilitated the created of more and better career paths for all Americans, in particular those facing significant hurdles to employment, and demonstrated how well federal agencies can work for the people they serve when they lead with human-centered design and an ethos of constant improvement.
</p>
`,
},
],
footerContent: FooterContent.default.args,
},
};
16 changes: 3 additions & 13 deletions stories/pages/contract-vehicle/contract-vehicle.html.twig
Original file line number Diff line number Diff line change
@@ -1,18 +1,8 @@
{% extends "@pages/base/base.html.twig" %}

{% block content %}
{% embed "@components/section/section.html.twig" %}
{% set body %}
{% for section in sections %}

{% set heading_type = section.heading_type | default("h2") %}

<{{ heading_type }}>
{{ section.title }}
</{{ heading_type }}>
{{ section.text | raw }}
{% endfor %}
{% endset %}
{% endembed %}

{% for section in sections %}
{% include "@components/section/section.html.twig" with section %}
{% endfor %}
{% endblock %}
Loading

0 comments on commit 10c5d9c

Please sign in to comment.