BEN WALKER
PROCESS BOOK
INFO ARCH 2
TABLE OF CONTENTS 03 Research
13 narratives
19 WIREFRAMES
27 FIRST
DRAFT
35 user
testing
43 production
53 FINAL
SITE
2
RESEARCH
3
Step
One
RESEARCH 1 2 3
Current Site The first step in researching how to go about creating a new interface for NASA’s photo archives was to dive into the existing layout for the archives on their website. The goal of this was to diagnose the website of problems within usability, and create solutions on how to fix them. Target Audience The second step in researching was to establish the target audience. This helped identify the users that I would be designing for with my interface. This way, I was able to determine my conceptual limits, as well as the complexity of my designs. Inspiration The last step within researching was to find inspiration within other designs, as well as establish current trends in usability. This means layout, animation, and navigation. I used this as a way to jumpstart my creative process, and gain influence and motivation.
NASA PHOTO ARCHIVES
4
1
CURRENT SITE After sifting through NASA’s Image Galleries I found elements within it that I wanted to take, and a lot that I wanted to leave behind. What I took from NASA’s collection was their grouping of their photo’s, such as their collections, and space exploration missions. I was also found of how each image was paired with an article. What I left behind in NASA’s collection was their poor, poor usability. It was very hard to find collections other than the ones that were on the homepage. Within each collection, photo’s were grouped in sets of 24 on each page. If you loaded another page, clicked on an image, and then exited out, it would send you all the way back to the top of the collection.
RESEARCH
5
NASA PHOTO ARCHIVES
6
2
TA R G E T A U D I E N C E NASA’s funding is very dependent on the amount of public interest. This important element is one that I kept in mind while conceptualizing my interface - how can I engage user’s and gain more interest? About 10 years ago, NASA rolled out new strategies to engage more users. One main strategy was to give more information on their activities and initiatives. While developing my target audience, I was designing for users between ages 12 and 65, who were interested in learning about NASA, using visuals and information about NASA’s activities and initiatives.
RESEARCH
7
NASA PHOTO ARCHIVES
8
3
I N S P I R AT I O N For inspiration, I was mainly looking towards websites that immerse you within the site, but also adequately deliver information at the same time. Throughout my inspiration search, I noticed that a lot of these immersive sites lost usability within their slick layouts and new-age functions. This was a key factor I kept in mind while developing my interface. My goal was to keep a healthy balance between user friendly and experiential.
RESEARCH
9
NASA PHOTO ARCHIVES
12
NARRATIVES
13
Step
two
NARRATIVES After researching, I created narratives within the data. This means that I used what I learned from my research to figure out how to best organize my data, and determine how I wanted my users to interact with it.
NASA PHOTO ARCHIVES
14
I wanted my users to be able to easily identify pathways that would deliver them important information, while keeping them entertained. I decided I would follow NASA’s grouping of images, and also add others that I found useful and interesting. These groupings included:
C OL L E C T I O N S EV E N T S IM AG E T YPE
NARRATIVES
15
NASA PHOTO ARCHIVES
16
I developed themes to follow within my design. The goal of this was keep a consistent feel, and to correctly represent the feeling and journey of NASA. These themes were to be:
IM M E R S I VE IN FO R M AT I ON A L
NARRATIVES
17
NASA PHOTO ARCHIVES
18
19
Step
THREE
WIREFRAMES The next step was to take everything I gathered with my research and brainstorming, and start sketching out rough wireframes. The goal of this step was to start treating the visualization of the interface, and actually give some life to it. This process helped me filter out the bad ideas and come up with a layout that would serve justice to my ideas.
NASA PHOTO ARCHIVES
20
My original sketches involved a frame around every screen, in which the navigations/header information would exist. The content in each page would move within the frame. I wanted to use a large grid system for the archive screen, with subnavigations within the page.
WIREFRAMES
21
22
The navigation was originally broken down into 5 sections—timeline, missions, search bar, historical, and visual. In this original version, the navigation existed on the bottom of each page.
WIREFRAMES
21
26
FIRST DRAFT
27
Step
FOUR
FIRST DRAFT After my sketches, I received valuable feedback from classmates about the general functionality and narrative within my site. I performed quick walkthroughs of my work in progress interface within Sketch, and took notes of the feedback I was given for my next revision. At this point, it was mostly about usability, disregarding the finer details.
NASA PHOTO ARCHIVES
28
During the creation of my first draft, I was continuously updating my style guide, adding in elements that were to be consistent within each page of the site. These included color, navigation tools, and type hierarchy. My general type direction was to make the typography reflect NASA. I decided to space out the headers, to reflect the “floating” aspect of space exploration. For my typefaces, I decided to use Futura PT. I chose this because this is one of the main typefaces NASA uses. I paired it with a typeface called Exan-3. I chose this non-traditional typeface because it honed in towards the “immersive” side of my site.
FIRST DRAFT
29
NASA PHOTO ARCHIVES
30
My site follows a general scroll system. The top of each page is designed to give the most insight on the rest of the information within the page. As you dig into each page to find more information, pictures would come into the screen to accompany the information. Appealing the informational side, I decided to design an image hover feature. The way this feature works, is that when you hover over something in an image that you don’t know, a description pops up explaining it.
FIRST DRAFT
31
NASA PHOTO ARCHIVES
34
USER TESTING
35
Step
FIVE
USER TESTING The next step was to bring our creation to users who were completely new to it. This way, I was able to get fresh eyes on it, to pick up on things that I (or others who have critiqued it previously) have gone numb to after working on it for so long. User testing is an essential part to any interface design, to see if your interface is lacking in usability.
NASA PHOTO ARCHIVES
36
When you exit out of the filter screen, it feels as if you’re canceling the filter options you put in.
My first user was Ollie, a 21 year-old student studying abroad from Manchester, UK. Ollie was unaware of this project upon viewing my interface. One main piece of advice he gave, was that when you exit out the filter screen, it feels as if you’re canceling the filter options you put in. To solve this, I decided to animate the photo’s filtering as you input your filter options, to see that you’re filter options are going through.
USER TESTING
37
user
1
OLLIE MCCAFFERY
NASA PHOTO ARCHIVES
38
Sometimes I can’t tell where I am within the website.
Create a gallery of the other Collection’s images on the bottom of the page.
My second user was Nana Tabata, a student within the Graphic Design program at MassArt. A couple pieces of feedback I got from Nana was that she got lost within the website at points, and that there should have been a gallery of other images within a collection, after you explore an image from that collection.
USER TESTING
39
user
2
NANA TABATA
NASA PHOTO ARCHIVES
42
PRODUCTION
43
Step
SIX
PRODUCTION The first application I used while creating my interface was Sketch. I used this app to create digital wireframes, make my first draft, finalize the interface layout, and then prep for animation. After Sketch, I imported my artboards into Principal. I used Principal to animate the transitions between each page, as well as animate elements on each page as you scroll through the page. After all of the animations were set up, I recorded a walkthrough of the interface. The last application I used was mainly for presentation. I used AfterEffects to score my walkthrough, this is when I organized my audio and music clips, and edited them to further immerse the viewer within my interface. I also used AfterEffects to compose an intro.
NASA PHOTO ARCHIVES
44
While working in Sketch, it is very important to keep an organized work flow. Using other applications such as Principal, this is especially important because you have to work between the two, updating things in Sketch and syncing it to Invision. After finalizing things within Sketch, I then exported my artboards to Principal.
PRODUCTION
45
NASA PHOTO ARCHIVES
46
To the right, you can see what my Principal file ended up looking like. I heavily focused on this part of the process, as animation was an important element to me. I chose my animations carefully, and tried to reflect movements and aspects withing space travel and exploration. I used drivers within Principal to animate along the y-axis. This means that as you scroll down on the page, things will move and animate according to where you are on the page. I used the animate panel within Principal to animate how things move and appear while moving from one screen to another.
PRODUCTION
47
NASA PHOTO ARCHIVES
48
My three AfterEffects files were as follows: Introduction Clip I created this 10 second clip as an eye grabbing visual asset, compiling different video clips featuring NASA’s launches and space exploration. Walkthrough File This is the file I took from my Principal file, where I clipped things within the walkthrough that didn’t line up. This is where I imported my song filed and audio files. I also edited each audio file’s level to decrease and increase throughout the video. Presentation File This is the file in which I imported the other two files. To make the walkthrough feel more realistic, I placed a border around the video, and gave it a drop shadow, to reflect and actual screen.
PRODUCTION
49
NASA PHOTO ARCHIVES
52
FINAL SITE
53
Step
SEVEN
FINAL SITE After a lot of editing, post crit, I produced the finalized version of my interface, and then exported the most valuable screens to accompany the video element, to have final products in both image and video.
NASA PHOTO ARCHIVES
54
FINAL SITE
55
NASA PHOTO ARCHIVES
56
FINAL SITE
57
NASA PHOTO ARCHIVES
58
FINAL SITE
59
NASA PHOTO ARCHIVES
62
COLOPHON Designed by Ben Walker Information Architecture 2 MassArt The typefaces used within this book are: Futura PT, designed by Isabella Chaeva, Paul Renner, Vladimir Andrich, and Vladimir Yefimov. Exan-3, a mono-spaced font designed by Jon Carlos The music/audio used within this project is from: “8 Emanations” by Matthew Politoski https://matthewpolitoski.bandcamp.com/ audio clips sourced from NASA’s audio collection https://archive.org/details/nasaaudiocollection
COLOPHON