MK ULTRA The Interactive Storytelling of

a Case Study

Connor SchattenkerkDesign 360: Digital Media 1Winter ‘19

PROJECT BACKGROUNDFor my project two I decided to create a website telling the story of MK Ultra. I based my website off of a prewritten story about MK Ultra that I found via www.history.com. This article had already broken the story of MK Ultra into 6 parts, so I carried that concept over into my website.

https://www.history.com/topics/us-government/history-of-mk-ultra

The goals for my concept is to deliver an informative, interactive and entertaining experience for the user. I felt as if the interactions would help keep the user interested and entertained, while doubling to keep the information solid the users mind - for they would have a suitable experience to connect it too.

PROJECT CONCEPT

I approached these goals by first creating a design via sketch that I felt happy with and also knew I could code. Although I did not want my lack of coding experience to interfere with the design process, so I made sure to practice coding along the way, or at least made sure that I understood what the code would entail for all of my ideas while I constructed them. This solution allowed me to have a design I was satisfied with, as well as a solid coded prototype.

Concept solution

According to what I found from my competitor research, there were not any competitors in the sense of an interactive “experimental” approach. The only “competitors” that I seemed to find were primarily cut and dry, informative very text heavy articles, similar to the one that I based my project off of.

COMPETITOR RESEARCH

My Target demographic is split between two very closely correlating groups. Those groups being anyone and everyone looking to learn about MK Ultra, and individuals who already know about MK Ultra, but want to endure that interactive experience. While this demographic is broad, I believe it to primarily be people ages 16 and up.

TARGET AUDIENCE

Right off the bat I imaged my website to be primarily black and white, with pops of colors within my palette. I wanted there to be hidden interactions within hover, and subtle gifs and glitches that pertain to the topic at hand. I explored a handful of layouts that resonated with this direction, as well as a few other directions that were much more color heavy. These directions entailed each of the 6 sections within the article to have it’s own background color, etc. I found these directions to all be rather overwhelming, and the feeling of it being based around the CIA seemed to get lost in the abundance of bright playful colors. I found the subtle, and sometimes not so subtle pops of color against the black and white backgrounds to work best visually, as well as it resonating with the topic at hand.

Concept EVOLUTION

PROJECT BACKGROUND

PROCESS

MOODBOARD PALETTE

TYpography

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Primary Secondary

Header Type - Bowlby One SC

Body Type - Roboto Mono

PROCESS

layout exploration 1

This was the very first layout that I constructed. It was the closest thing to the initial layout that I had in mind. I thought the header and the font choice was working really well together, and it was displaying the mood that I was going for. I enjoyed the black and white background with pops of color, but I felt like here there wasn’t quite enough. Although it did feel as if it were heading in the right direction, for I felt that the foundation of the layout was working properly.

PROCESS

layout exploration 2

This was the second layout that I had experimented with. I enjoyed this header as well, for I found the spaced out and stacked header text to be visually ap-pealing, but it didn’t quite fit the mood I was going for. The pink background to me seemed slightly overwhelming and too quick of a jump into color from the primarily black and white introduction.

PROCESS

LAYOUT EXPLORATION 3

This was the third layout that I construct-ed. I wanted to try something different from the last two iterations. I played around with a hero image as a header, and switched the layout up a little bit. The hero image and chosen typeface to me did not feel like they were working, or evoking the feeling that I wanted. The gradient seemed jarring and the layout felt slightly lackluster. While I wasn’t drawn to much that this layout had to offer, I was glad that I experimented with the direction because now I knew more the direction what I wanted to head in.

PROCESS

P.1 - P.3 WIREFRAMES

While these wireframes do not map out every interaction and every div perfectly, they did help me a lot creating the foundation of my website in an organized fashion.

PROCESS

P.4 - P.6 WIREFRAMES

PROCESS

FINAL LAYOUT DESIGN

PROCESS

FINAL coded Prototype

Since we never ended up having a usability testing session in class, I decided to have a few people scroll through my website during the process. I found my hopes of the hidden hover-triggering interactions to entice the user to look for more to be true, for this seemed to be valid across every user that interacted within my website. Some inter-actions were not always found however, e.g. the yellow LSD hover to melt interaction in the intro to the “Sydney Gottlieb & LSD” section, but I found most all of the interactions to be successful. I ended up changing the cursor to pointer when hovering over the yellow LSD, and I found that to help a bit.

USABILITY TESTING

PROCESS

coded Prototype interactions

Hover Slide Out Nav Hover to Text Melt

Hover Gif Reveal Hover Gif Reveal Hover Color Reveal

Hover Glitch + Color Reveal

PROCESS

Prototype interactions continued

Hover Glitch + Color Reveal

Hover Glitch + Color Reveal

Hover Glitch + Color Reveal

Hover Text Reveal

Click Through Carousel

I would say the biggest challenge I had to overcome was creating every gif interaction I intended upon while simultaneously making sure my website was coded properly and everything worked in unison. At the end of it all there were only two gifs that I could not get to work properly, however them not existing did not take away much from the experience within my site, so it ended up being alright.

CHALLENGES

I learned a whole lot from this project. I surprised myself with my ability to code, and to create an entertaining, interactive yet informative ex-perience for the user. I never would have guessed that I would have as much fun as I did coding, and I was sad for it to come to end because I felt like I could have done so much more. Although at the end of the day, I am very happy with how my project turned out, design, prototype, process and all. It was a great experience.

REFLECTION