A Global Professional Networking Platform for Security Practitioners
Building a platform to meet the needs of a global network of organizations and practitioners.
The Challenge
The Defense Security Cooperation Agency (DSCA) uses the GlobalNET platform to facilitate secure training and collaboration among partner organizations. Thousands of military, diplomatic, law enforcement, and civilian government personnel around the world use GlobalNET to connect with and learn from each other. They work on topics from security cooperation to humanitarian operations; counter-terrorism to public diplomacy; leadership development and more.
Our team at CivicActions was tasked with redesigning and rebuilding GlobalNET to create a more personalized, secure, and responsive experience for users.
My Work
User Research: Wrote user research plans, defined audiences, developed personas, conducted interviews
Design: Task flows, journey mapping, wireframes, prototyping, digital design system, responsive design, branding, color palette, typography, style guide,design pairing
Collaboration and Project Management: Coordinating the design & development process, facilitating design critique and workshops, and
working as part of an Agile development team
My Role
UX Designer
Our Team
Product Manager
2 Front-end Developers
2 Back-end Developers
2 UX Designers
Software
Figma
Drupal
Whimsical
Mural
Jira
U.S. Web Design Standards
Identify Key Audiences and Challenges
We knew audience definition and getting an accurate representation of the range of users we were designing for was key to the success of project. To start user research, we held a remote brainstorming session with our GlobalNET Liaison to identify our audiences.
Next we conducted a first round of interviews with the Admins and Org Managers from the five organizations that are the primary users/stakeholders and have the most influence over the product to get a sense of the challenges they and their students encounter with the platform. We assumed that they would be a good proxy for helping us uncover the main issues that students faced and would help us create hypotheses that we could then test with students in the next round of interviews.
Based on the interviews and help desk tickets, we identified five key pain points of the existing platform:
-
Admins spend a lot of time adding/managing participants and updating course content
-
Participants have trouble accessing GlobalNet from their phone
-
Participants have trouble logging into the platform
-
Participants only come back to the GlobalNet platform if there is a clear incentive (eg: accessing information about an alumni event)
-
Participants find the website difficult to navigate and find what they are looking for (eg: finding course schedule)
Optimize Workflows
With the key pain points above in mind, we prioritized workflows and created a design roadmap for the next 8 weeks of work. For each of the workflows, we followed a similar process of mapping and documenting the current system to identify gaps and optimize the flows, testing with users (participants and/or admins), then incorporating the feedback into the next round of designs.
For example, below was our progression for improving the admin's workflow to add participants to a course:
First we documented and visualized the existing flows in Whimsical then reworked and optimized workflows at a high level. In this case, the existing GlobalNET process admins had to select between two separate tracks early in the process which caused them to need to repeat the process and add the same information multiple times depending on how they were delivered participant information. In our new workflow, admins entered course information once in the beginning then could select multiple ways to add participants without needing to enter information again.
Examples of Lessons Learned During User Testing
Admin Flow:
Solving the adding course participants problem
A key pain point for admins with the old system was only being able to add participants individually. The new system gave them the option to bulk upload using the .csv file they were given by the course administrator, or individually when needed.
Initially, we separated out the two paths in two boxes assuming users would fill in the appropriate box depending on how many users they wanted to add. Half of the testers didn't see the "or" between the boxes and just started filling out the top portion; they were too focused on completing the tasks and didn't notice it was an option. To draw attention to the choice, we added a preselected radio button to the bulk add users section, which in subsequent user testing alleviated the issue.
We also updated the breadcrumbs at the top with new language to better describe the steps (initially it was unclear to users), adding a checkbox to indicate if that step had been completed, and links to make it more clear that users could use it to navigate the process.
BEFORE USER TESTS
AFTER USER TESTS
Admin Flow:
Solving the managing course participants problem
Another time consuming task for the admins was managing existing participants. The current interface used up most of the screen real estate for providing group stats which weren't useful to them during this task. The filters also didn't match what they needed to find students and group them then complete bulk actions.
Incorporating feedback from our initial rounds of interviews, we removed the group stats (for the user journey it made more sense to move these to the group overview/edit page) and focused the dashboard on the student list and bulk actions. We removed fields that weren't useful in the original version and added new filters and bulk actions.
After testing a few versions, we made some additional changes:
-
Added a new column for status with icons so admins could easily see which accounts needed attention at a glance
-
Added the option to unlock an account via the student dashboard, rather than having to click into each individual account
-
Added the option to export the current view of the participant list and the full list
-
Added a box in the header to simplify select/deselect (rather than text-based actions)
-
Removed the access level since at the group level this distinction wasn't helpful to admins
-
Added a quick link to add members from this page instead of in the main group menu
OLD SYSTEM
BEFORE USER TESTS
AFTER USER TESTS
Participant Flow:
Solving the participants have trouble accessing and navigating GlobalNet on their phone problem
On the course participant side, we took a mobile-first design approach to ensure that participants could access their course information on their phones. Based on the feedback we heard from the admins about their participants' experience (we used this as a proxy due to time constraints), we put together an initial mock up with the course schedule as the main focus.
However, after speaking with five participants in the first round of interviews, we quickly realized that we needed to shift the model. When they arrived at the course, they received a print out of the schedule then rarely needed to reference it after that. What participants really wanted was to be able to see who was attending (before and after the course), to be able to connect with those colleagues, and easily reference course files.
We then reworked the course content with sub-navigation menu that highlighted member posts, resources, and course members. We also improved elements such as the member cards which were awkward for users to click during user testing. We opted to have them expand the whole page so people's titles were easier to read and added the primary link to their name, instead of the button, to make it easier to click on.
After multiple rounds of testing the mobile version, we created the desktop version that would sync with the admin flows.
BEFORE USER TESTS
AFTER USER TESTS
DESKTOP VERSION
Design System and USWDS Color Mapping
As soon as we started putting together designs in Figma, we created a component library where we could build, iterate, and refine our design system throughout the project. We used the U.S. Web Design System (USWDS) as a foundation then customized the components for GlobalNET as needed.
To ensure a good mobile experience for course participants, we kept images small and to a minimum, made sure to create a clear visual hierarchy, made text 11 points or larger, compressed information into icons where appropriate, and framed content with whitespace.
Originally each of the organizations were able to choose their own color to customize their organization's header on their landing page and courses. I also worked with their admins to narrow the list down to three color choices then, to ensure accessibility and consistency with other government services, I mapped the existing colors to USWDS color tokens.
Final Designs
Unfortunately due to the pandemic and pause in in-person courses, the redesign and additional funding for the build was put on hold. At the end of the project, we delivered final design documents with clear flows and labels so our engineering team could resume if the contract was renewed during the next funding cycle.
Admin Views
Participant Views
.png)
Key Outcomes
A website that incorporates an understanding of the diversity within international security audiences.
Accessible, responsive platform
We applied user-centered design to modernize the look-and-feel of GlobalNET. The multilingual functionality and fully responsive design make it easy to participate from any device, anywhere in the world.
Empowered global partners
Customized, branded landing pages were created for partner organizations so administrators can share news and publications with GlobalNET members and the public. They can also manage event listings and calendars for their groups and courses.
Intuitive
workflows
We improved functionality for GlobalNET learners so they can participate in discussions, access research databases, and upload coursework for review. Instructors can share their course content and announcements through an intuitive interface.
Personalized
experience
Participants can find what they need among GlobalNET’s vast resources through a personalized dashboard, where they can receive messages, connect with contacts, and navigate quickly to their groups, courses, events, and saved content.