Government Secrets: an Interactive Experience
Project Overview
Create an Interactive Information Guide that explains an idea, a process, relationships, or a complex concept through a larger device-based solution.
Roles Performed:
UX/UI Design, Interactive Design, Researcher
Software Used:
Figma, After Effects
Time Frame:
5 weeks
Problem Statement:
How might we display a large amount of information in a logical, consistent, and engaging way?
Project Goal:
The goal of this project is to convey a chosen topic in a new and innovative way to help an audience better understand the given topic.
Project Topic:
“Government Secrets” meant to take a deep dive into declassified government documents released throughout history.
Target Audience
A Museum Exhibit / online webpage (focused on Museum) targeting College Students and other’s who wish to do research in a quicker, easier manner.
Research
Use Cases
User 1: The Acedemic
User 2: The Child
User 3: The Theorist
This is the person who is coming in for research purposes. Maybe they need to quickly find sources for a project or paper, and are looking for a quick and easy way to get a lot of information on their desired topic.
It is important for the young to learn and know the truth. A healthy mind is one that is always questioning and yearning to know more. This user is in this important phase and wants to learn all they can.
Needs: Easy access to information, credible sources
Has: Knowledge
Like the Student, the Theorist is looking for specific information. They have found current sources of information on this topic to be hard to navigate and harder to use quickly.
Needs: Entertainment, Knowledge
Has: Curiosity
Needs: Proof, credible sources
Has: Understanding
Competitive Analysis
There isn’t much to go off of in this topic. This unease with government secrets can be seen all over the internet and while the government itself claims to be open and honest and willing to give out information, it is often hard to find and still hidden anyway. There isn’t much I can base my design on in this specific field since so little exists. Here are two
1) CIA: Freedom of Information Act Reading Room
2) WikiLeaks
The issue here is the lack of organiztion. It seems to be trying to make it hard to navigate and find anything of value. The UI is ugly and simplistic and the actual documents give little detail on what they contain. Overall it’s not engaging and seems to actually repel the user which I’m sure is the intended goal.
Again this has a lot of information that is near impossible to sort through. It’s ugly and outdated in its UI and again seems to actively repel users.
Design Process
Workflow Process
Sketches
From the begining I wanted to showcase the documents in a convienent way. I found the timeline to be the most effective of showing how many documents took place in each year and was an effective organizer
I needed a zoom in function that could take the large scale information of how many documents in a year and then show what each of those documents was.
We needed the user to be able to read the document to study it as well as see some context as to who or what was being discussed
A core aspect of this whole experience is to better find information. I believe it is important to help the user continue on and find things that work with the first document found so they can easily find multiple sources.
Wireframes
Opening is hard to wireframe. The idea here is to have this mainly be showcased through animation, which is hard to show through still images. This will be an introductory/ on-boarding animation that opens into the timeline.
At this point, the main focus is getting the timeline to look the way I need it to to meet my goal, The functionality of it is down and I understand how it is used, the next steps are to fix how it looks and add in aspects to better understand what the timeline is showing and help to easier find specifics. As for the document page, I realized that I wanted to show the document as the government released it here, but an issue with using it for the research anf document understanding parts of this was that its really hard to read. Here would show the original format and important information and set up that there is a deeper step.
Depending on where the selected year is on the screen, the orientation will be slightly different. The fading of the background and the desplay of the information will remain the same, but the alignment and location of these pieces will depend on if its more left or right on the screen. Like the timeline, I mot set on this design at this point but this is roughly what the information will end up looking like.
At this stage, the user will not only be able to better read the words and messages in the documents, but also will be able to directly connect the context we give to the exact part that it is relavant to. This is important to better understandf the topic, if context was given but not explained, it would just add to the confusion or make the user work harder for their knowledge goal, which is the opposite of what we are trying to do here.
Inspiration Board
At this point, the user could choose whether they want to continue or not. The options would scroll vertically and would explain how they connect to the current document so users could follow their research threads in a quick and easy way.
Conclusion
Final Design Comps
Final Thoughts
I think most importantly I learned from my first project, I think I did a better job at creating and sustaining a good visual hierarchy. I really enjoyed this project and Had a lot of fun doing the research and looking into this topic.
