narrative: union station keynote + stuffs

I'm partners with Mercedes, see her post here:



This is a rough storyboard of what the timeline will look like/what the user will do to in the timeline. The idea is centered around the half-circle, where the dates will occupy the rim of the shape, and each section will be enlargeable. See details in annotations. After doing this storyboard, I realized that Mercedes and I have to think more about how it can be more user-friendly, where the comfort of the user is the highest priority. 


The user path above focuses on the three different tabs the user could click: home, about and history. We may add Amtrak routes as well, however we just focused on these three for now. The user path on the right has three different organizational styles. The first, "search", is for those who have something specific they want to know. The "explore" tab is for those who are more experimental and want to learn something new. "Discover" is when the person just wants to stumble upon a fun fact. 

The first screen shows a grid of circles that emulate the floor pattern.
Three circles in the middle have each tab, "about" and "history."
The other blue circles could be other pages, however, we are not sure
what it could be yet. Perhaps they could just be images.

When the user clicks on "history," the screen will zoom up to the circle, only showing half of it. The user can turn the circle to show the other side. Each geometric shape links to another page. After clicking on "dates," the decades will fan out from the right side. When the user clicks on one date, this is what the screen will look like. After enlarging the section, and after the images and text have fully separated (refer to storyboard), the text will follow the side of the section.


In a paper context, the user did not understand that the words in the second wireframe were buttons. The user found the words and the arrows confusing in terms of which button to press to navigate to the next screen. The first and third panel were, however, were clear in terms of how to navigate throughout. Color changes and the usage of buttons can clarify the confusion in the second panel.


narrative: more research

More Research:

  • 1878 - The New Depot
    • A new rail station is created near the stockyards, nearby where Kansas and Missouri Rivers merge.
    • Quote: Headlines called “Handsomest and largest depot of New York” 
      • Symbolized the remarkable growth of the young Kansas City
  • 1900 - The Flood
    • West Bottoms becomes submerged in water
    • Quote: “The flood’s peak the waiting room was filled to a depth of 6 feet 7 inches while outside only the black humps on top of locomotives were visible. The depot was closed for a week.”
  • 1910 - The Opening
    • 12 railroad companies united to create KCTR and a newly designed station under architect Jarvis Hunt. The railway company increases to gain popularity. Construction begins in 1911 and opens to the public in 1914.
    • Quote: slogan for the construction of Union Station: “Make a Monument”
  • 1920 - Liberty Memorial
    • Local leaders bring together commanders of the armies in World War I to built a national monument in their honor. On New Year’s Eve, when the prohibition began, a few hundred people gathered to celebrate.
    • Quote: For one night Union Station was the center of the city’s wide open, party till-dawn swinging culture.”
      • called Union Station “the Heart of America”
      • was the largest Union Station in the country aside from New York
  • 1930 - The Union Station Massacre
    • On June 1933, a shootout occurred at Union Station where Frank-Nash, bank-robber, escaped the penitentiary in Leavenworth, Kansas. Five people were murdered.
    • Quote: “Put ‘em up. Up! Up!”
  • 1940 - World War II
    • Ridership continues to increase as World War II finally ceases in 1945. Soldiers pass through the station to get home after the war.
  • 1950 - The Long Decline
    • During this time, passenger numbers decrease as air travel becomes more popular.
    • Quote: “Failure to modernize will be accompanied by the risk of gradual deterioration of the remarkably high prestige which Fred Harvey enjoys in Kansas City.”
  • 1960 - Continual Deterioration
    • The style of Union Station became outdated. In 1961, 35,000 tickets were handled, however, it dropped in 1969 to 13,000.  
    • Quote: “There just isn’t any future or need for passenger trains.”
  • 1970 - A Historic Site
    • The federal government designates Union Station as a protected structure and is placed on the National Register of Historic Places. The space was used as an exhibition space from displaying vintage automobiles to cat shows. Later, Amtrak takes over the company as ridership continues to decrease.
    • Quote: Union Station was “...no longer justified by its use.
  • 1980 - A Time of Failure
    • Amtrak and The Lobster Pot restaurant hold out despite Union Station’s state. Kansas City initiates legal action against the redevelopment company for failing to develop the station. In 1983, the station closes. In failing to refurbish the building, the station continues to deteriorate.     
    • Quote: “Nobody knows what to do about it.”
      • “I could see a train wreck coming.”
  • 1990 - Lawsuits and Restoration
    • The Trizec settlement allowed them to cut ties with Union Station. At this, the restoration effort began with the formation of Union Station Assistance Corporation. Kansas City then creates a tax to restore and redevelop the building which consisted of $118 out of the needed $250 million project. The building also housed Science City as a main attraction.
    • Quote: “He wanted designers to think of “adventure and immersion.”
      • The importance of immersion
  • 2000 - The Upward Climb
    • Amtrak partners with Union Station once more

Union Station Kansas City by Jeffrey Spivak
http://www.kchistory.org/cgi-bin/showfile.exe CISOROOT=/Building_Pr&CISOPTR=23&filename=24.pdf



hcd: edited promos

I liked this version much better than the other simpler version with four bands of instruments. I'm wondering if the text could be placed in a different place...For this design, I wanted to focus on Earl Klugh. In emphasizing the guitar in the center and also overlapping with the text, the yellow draws the viewer's eye right to it. As if looking through a window, the black shapes frame the image and create a rippling effect. 


narrative: wireframes

Mercedes and I are in a group together, and we've been thinking about how the user will approach the interactive piece. Here are different ways the user will do to get to the timeline:


hcd: midterm self reflection

What have you learned?

Above all else, knowing the importance of context and target audience, and anchoring my design to these key factors stuck out to me so far. Living and breathing our subject matter was vital in producing a design that accurately portrayed the musician's work. Thinking about where the poster will be placed, to whom it would appeal to, for which musician it was for, were all things I realized I had to consider when designing for the "real world." In class, I tend to create work in my own bubble, creating according to the opinions of fellow designers. These projects in Human-Centered Design challenged me to think about producing work for a company that has its own objectives and requirements. I saw this especially evident during our professional critique with the three outside guests. It was clear that they were coming from a different viewpoint, where legibility for those driving by was of high importance, as was public reception of the poster. Everyone created visually appealing designs, however, what was most important was how well the poster suited the context.

What have been your successes?

Taking on the task of designing for the jazz music genre was in of itself a challenge. Visual depictions of jazz music can very easily turn cliche,  as my moodboard was starting to show. With images of the beach, dimly lit cafes, and palm trees, I immediately categorized Earl Klugh as "easy listening," and "blues music." After critique, I realized that I needed to shift gears and think about the unique qualities Klugh had. Though his soundtracks were generally relaxing and calming, they were also a bit "funky" in that it was a fusion of music from Brazil, Argentina, and Spain. I decided that an analog approach would be best, since Klugh's albums sounded organic and simple, and depicted the "funkiness" with my color palette and abstract shapes of the instruments. I know my poster design needs work in terms of how accurately it conveys an overall body of Klugh's music, however, I was happy with the end result of cutting out shapes and placing them in a visually interesting way.  This approach of cutting and freely trying different placements was new to me, and definitely something I want to keep experimenting with.

What can you do to improve moving forward?

I need to think more about how design affects people, and designing according to this key element. I realized later that I wasn't designing with the right objective; as Kelly told us to put our designs in context (for example the billboard), I was surprised that I hadn't thought of doing this from the beginning. I need to consider how a person would react if they saw the design on the street or how well the design conveys the subject matter to people within specific contexts. I also want to improve on coming up with more iterations by exploring and risk-taking. Whether it be experimenting digitally or through analogue means, I want to go beyond my comfort level and try things I've never done before. 


narrative: overall process

where all the stop-motion happened. set up a lamp and another
clamp light to the right and turned off the room lights in order
to enhance the color and make the frames look more warm.
i cut up black strips to make these letters, as well as cut holes
into the thick white paper for the black strips to go weave into
here you can see the strips weaved into the cut-outs in the
thick white paper.
for a specific motion sequence in my "A Table" video, here
you can see one of the frames where you can see two
different phrases simply by shifting the perspective.
all the cut-up circles that were glued unto thicker white paper
these are from my "A Centre In A Table" video
also printed out transparencies to overlap with the text from
a previous frame.
had to cut up the black strips into sections in order to make it
seem like the strips were growing
also cut out this placeholder for text for my "A Table" video

narrative: mid-tern self-reflection

Explain your process/tools for this project. Analog? Sound?

As Gertrude Stein oscillates back and forth from clarity to obscurity, I utilized ambiguous figure-ground to visually represent this experience with the negative, positive space fluctuation. In attempting to translate this with motion graphics, at first I tried to combine all my ideas into one video. The text simply moved on the screen, and there was no overall concept. This made the transitions seem arbitrary and unnecessary, with too much going on in the animation. However, after experimenting with different motion tests and sound tests, I had a more clear direction to go in. People seemed drawn to the visual of a digital screen impulsively breaking up, to a point where the image deteriorated into static. As I continued on with my storyboards and my video, while simultaneously completing my book for Typography III, I was more inclined to go the analog route with stop-motion. My Gertrude Stein book ended up unexpectedly "crafty," with black ink smeared on some pages and the binding clearly visible. Though I was unhappy at first with my book, I came to love its imperfections. As a result, stop-motion seemed the most appropriate, in terms of the relationship with my book. The next step was to collect sounds that would set the right tone and atmosphere of my video. Raw and simple sounds seemed appropriate for Stein's poetry; nothing with words or a myriad of instruments. Still, I was open to other songs that could change the reception of the video. Searching for sounds on Spotify, I ran across The Notwist and Barbatuques. "Lineri" by Notwist was more abstract and "Baiao Destemperado" by Barbatuques was playful and light. These were the songs that were picked during critique, so I applied them to the video. However, many things started to go wrong as I tried to finish the project. I ran into many problems with my computer, with my trackpad, and with the rendering. I realize that this all could have been avoided if I had just finished the video earlier, giving me time to fix these things before it was due. In doing anything with technology, anything can happen. I realize I should have allotted extra time for these sorts of issues. 

Does your project communicate the feel of Stein's work?

The look and feel of stop-motion lends itself to Stein's raw, unfiltered poetry. Her stream-of-consciousness writings collapse the ever-coming present, in which I try to translate using a fast pace. Despite having all her language on the surface, she also uses repetition of past words and emphasizes certain phrases that have similar sounds. Because of this, I repeated key motion sequences to emphasize this quality in her work. Though I used figure-ground as a starting point, the videos seemed to stray-off from this theme and ventured more into the concept of illusions. In doing so, I lost cohesiveness with the book and the videos, however, added another layer of interpretation for Stein's writings. Regarding the poems themselves, I may have been too literal in my rendering of "A Table" and "A Centre In A Table." For "A Table," the video accentuates the surface of a flat plane, having black strips run across the screen and forming letters perpendicular to it. As for "A Centre In A Table," Stein seemed to walk around the main point of each phrase, leading the viewer in a metaphorical circle. Including a literal circle may have been too obvious and expected.

What did you learn about yourself through this project?

This project was very telling of my design process. I struggled a lot in the beginning of the project in trying to think of ideas that were innovative and fulfilled the project requirements. Since Stein's writings are so abstract and convoluted, thinking of ideas with conceptual standing was difficult. On top of that, we had to think of the temporal elements of motion. While trying to combine all these components, ideas were hard to come by. In general, I often have designer's block in the beginning of each project, simply because I feel as though there are always better ideas and because I get overly ambitious. In the end, this always leaves me compromising my craft and makes me rush to complete the end product. I need to allot time for re-editing and finessing details. On a more academic level, I learned about the nuances of temporal elements, where one second can make a huge difference. The way something exits the screen or the way the movement matches with the sound all lend itself to the overall reception of the video. Similar to how a storyteller uses timing, the intonation of their voice, and variations in dramatic structure (rising action, climax, falling action) our videos are stories in that it depicts our own interpretations. 

Does it apply to future work?

For future work, I plan to be more vigilant in idea generation in the beginning of each project. With more iterations, I can come closer to a better idea each time. Also, in order to avoid technological issues, I need to finish things earlier to finesse my craft. I also want to think more deeply about how to tell a "story,"whether it be through verbal communication, motion graphics, or interactive mediums, and what aspects go into telling a story.