00 Context
Problem Statement
The war in Ukraine mobilized Ukraine's use of cloud-connected technology in unprecedented ways—from digital passports to online warning systems. This digital report needs to educate and convey to United States public policymakers the role these technologies play in national security, both the opportunities they present but also the potential risks and dangers.
Description
Role: Web Developer for sections "Opportunities for Exploitation" and "Digital Protection."
Team Members: Sarah B. Grace (Lead Producer, Editor), Michael Kohler (Animated Maps), Lindsay Urchyk, Shawn Fok, Fabio Murgia (Data Visualization)
Tools Used: Adobe Illustrator, ShortHand, HTML & CSS, CodePen
Constraints: Implement on ShortHand
01 Understanding the Users
What is a Think Tank?
Think tanks are organizations of experts who conduct and present research to inform governmental policymaking decisions. Traditionally, think tanks produce reports and white papers in order to influence the decisions of congressmen and other government representatives directly. However, the Center for Strategic and International Relations (CSIS) has expanded its scope to influence public opinion on key issues. The challenge, then, as a UX designer with these digital reports is to identify these audiences and create an experience that can guide their understanding of complex policy.
"The future of think tanks, given the goal of influence, is rooted not in 100-page reports but in tweets, Facebook shares, video clips, slick Web sites with downloadable information and podcasts."
(Source: Washington Post)
02 Background Research
I was provided a text-based version of the report to familiarize myself with concerning the various uses and malicious misuse of technology during the war. The DIIA digital passport (pictured below) is one such initiative mentioned in the report that Ukraine implemented during the war
In particular, I was tasked with visually representing the following two subsections and all their elements:
Digital Protection
• Trafficking
• Misuse of information
• Cybercrime
• Toxic online narratives and hate speech
• Misuse of information
• Cybercrime
• Toxic online narratives and hate speech
Opportunities for Exploitation
• Reduce digital litter
• Fight cybercrime
• Improve vetting for digital programming
• Work with Ukrainian civil society to create trust
• Fight cybercrime
• Improve vetting for digital programming
• Work with Ukrainian civil society to create trust
"Digital innovations like Diia have rightly been celebrated as a means to keep Ukrainian refugees connected, despite the devastation caused by the ongoing Russian war of aggression." (CSIS, 2023)
03 Sketching & Prototypes
Sketching
The sketching process primarily focused on generating conceptual ideas to represent the information.
One idea centered around moving the user through a spaceless "digital landscape." I iterated on a few variants of this, including the possibility of horizontal movement.
As I was considering this landscape, I wanted it to be grounded by the mountainous forms, yet somehow also seamless to convey the infinite landscape of the digital world. I felt that the more varied the movement was, the better it would convey this sense subconsciously.
High-Fidelity Prototyping
After having the initial sketches approved by my team members, I created two iterations of high-fidelity prototypes.
First iteration: This one focused on the more abstract "digital landscape" approach featuring mesh mountain rangers that the user traverses through.
Second iteration: I took a mural approach where each subsection of the "Digital Protection" and "Opportunities for Exploitation" is represented by a graphic.
Both iterations included the same text-box styling that aimed to replicate a retro computer window but modernized with glass-UI.
First iteration: I presented a version with the more abstract mountain scape.
Second iteration: I explored another version central graphics.
Dark version of iteration two (A)
Dark version of iteration two (B)
Testing in CodePen
I began by testing the main text box aesthetics on CodePen to see if it was possible to replicate my prototype entirely in CSS. The ShortHand platform does not allow you to edit the base HTML, so it would all have to be accomplished through CSS.
I was able to achieve the box-blur effect, the dashed lines above the box to emulate a retro computer window.
Next, I began to work on each sub-section heading. This was accomplished by simply duplicating the header with the ::before element selector, and duplicating it by accessing the "title" variable of the heading.
Additionally, I overlayed an SVG dot grid fixed across the entire page to further create a sense of infinite space in the digital landscape.
Implementation on Shorthand
Finally, I brought together all the pieces (the background landscape, the graphics, and the text-box CSS styles) into shorthand and implemented the "Scrollmation" function.
04 Final Interactive Design
In the final design, the user traverses through the digital landscape in disjointed visual movements, with the environment littered with various relevant graphical elements.