The new Virginia Cyber Range “Add an exercise” webpage.
The new Virginia Cyber Range “Add an exercise” page.

The Cyber Range at Virginia Tech produces programs and modules for instructors to teach cybersecurity principles and skills in the K-12 and community college settings. The Cyber Range platform is hosted in Amazon Web Services and has been delivered via a single-page TypeScript web application. Instructors access material through the Cyber Range web portal.

Originally developed in 2018, the existing user interface (UI) was functional, but in need of a refresh. The Cyber Range took this opportunity to ensure that their new UI followed best practices in user experience (UX) design, partnering with  the user experience (UX) team within IT Experience and Engagement (ITEE) to revamp the customer-facing web portal. 

The Cyber Range spent the first half of FY 2023 working with ITEE to redesign the web portal interface from the ground up, creating mockups of the various pages and designing the behavior of the UI. The two parties collaborated throughout the project

  1. Crafting Personas: ITEE introduced instructor and administrator personas to provide a basis to understand the needs, desires, and circumstances typical of these users. These personas serve as a solid foundation for tailoring the user experience to the specific needs of these essential user groups.
  2. Mapping the Instructor Customer Journey: We created an Instructor Customer Journey Map to define clear objectives for the user experience. This map delineates the desired goals for instructors and administrators using the portal.
  3. Evaluating UI Heuristics: To ensure the interface adheres to the highest standards of UX, ITEE conducted a comprehensive evaluation of the new design based on UI heuristics, or guiding principles for ensuring usability. This involved a thorough comparison against established UX principles, followed by suggestions for improvement.
  4. Interactive Prototypes: The introduction of new UI interactive prototypes facilitated productive team discussions and adjustments based on feedback received. These prototypes represent a collaborative approach to refining the user experience. 

The forthcoming UI enhancements are anticipated to deliver substantial improvements, with a primary emphasis on enhancing navigation. By the end of the fiscal year, the Cyber Range began implementing the new user interface, so that it was ready to launch in time for the 2023-24 school year.

Before:

Cyber Range home page user interface old design

After:

Cyber Range home page user interface new design
Cyber Range home page user interface, before and after

Before:

Cyber Range exercise page user interface old design

After:

Cyber Range exercise page user interface new deisgn
Cyber Range exercise page user interface, before and after

Before:

Cyber Range “add an exercise” page user interface old design

After:

Cyber Range “add an exercise” page user interface new deisgn
Cyber Range “add an exercise” page user interface, before and after