For week 2, we were given two assignments: redesign the boarding pass, and create three expressive words. I chose to complete the boarding pass first, since I have been thinking about the layout even before I took this course.
I've always wondered why boarding passes were so horribly designed, and why none of the proposed designs I often saw on various forums ever came into fruition. Here is the screenshot of the common boarding pass with all its complex sections:
I think the main issue with this existing layout is the choice of typography. The most important subjects (such as Name, Flight, Time) are not differentiated from other elements such as flight codes and serial numbers. The typography is also a bit hard on the eyes; very geometric with almost no kerning. There is also no inherent organization to the elements and no sense of hierarchy as well. It took me longer than it should have to spot out the information I needed from other unnecessary elements.
Given the text that needed to be included onto the ticket, I got to work.
I started off by including a small banner at the top of the ticket. This is where I would store the Delta logo, "Boarding Pass" title, and the barcode. I also decided to use only Helvetica font; nothing too fancy, with smooth structure that was easier on the eyes.
Technically, this would be 'Hierarchy 0' in that the most important element here would be the "Boarding Pass". Of course, for the airline, the most important element would probably be the barcode to the right. Therefore, I began considering the design both from the flyer's point of the view as well as the airlines (ticket check, etc).
I originally had the 'Name' bolded, but I realized that I should probably emphasize the actual name rather than the header itself. That way, the flyer would easily be able to spot out the most important information first, and then cross check with the smaller header if needed. I thinned the header and italicized it, and then bolded and increased the size of the actual name. For the 'TSA PreCheck', I was hesitant on including an icon, since I know that there are printing restrictions for boarding passes. However, I thought that it would be especially effective to have a visual cue that showed that this flyer possessed the TSA PreCheck, and make it especially obvious by placing it next to the name element.
The rest of the elements stay true to the layout I established for the name element. All headers are italicized, and are smaller than the actual subject itself. I then included miscellaneous information on the bottom, and decreased the size, since most flyers wouldn't bother looking at them at all. If any airport staff require the information, they would probably be notified where to look on the ticket.
This is what the hierarchy looks like when all the elements are combined. The name is obviously the most important out of all the elements, so it is placed first, alongside the TSA PreCheck (which isn't more important than the others, but makes sense logically to have it next to the name). The second tier consists of the flight number, boarding time, and date of departure. The third tier lists the gate number and class type. The last tier at the very bottom states that the flight is operated by Delta Airlines, and contains (what I believe to be) the type of aircraft/aircraft serial number. As I skimmed through this half of the ticket like I normally would before a flight, I found that I naturally moved from top to bottom, left to right, reading the name, flight, boarding time, departure date, gate, and class in that order.
For the second half the ticket, all of the elements are related in that they comprise the information that the flyer would need once they have boarded/are about to board. They are also organized according to the hierarchy of the other half of the ticket. The seat number and zone are listed first, the departure time listed second, and the luggage information last. There was also a string of numbers that I assumed was some form of luggage code, so I included it under the 'bags' section, with much smaller font.
The very right end of the ticket is the stub section that the airline rips off. Looking at existing boarding passes, it seems that this section is given to the flyer, while the airline retains the other half for recording purposes. However, given the rise of E-boarding passes, it seems that a lot of airlines no longer rip the boarding pass at all. From personal experience, none of my boarding passes have ever been ripped (granted, since I grew up in China, I've only flown around a few times in the U.S, so this may vary from country to country). Under the notion that airlines will not rip the stub off, I decided to include the last bit of information here: the second barcode and code, and the destination information. Because the destination is also important, I bolded it and sized it a bit larger than the other elements, since it is so far away from the other relevant elements on the ticket. I also included my second icon element, an arrow pointing from the origin point to the destination. I pondered over whether or not this was needed, but decided in the end that if a flyer were to quickly glance at the ticket, it would be very obvious which was the destination point and which was the origin point from first glance. It is also quite nice that the barcodes are grouped together, and sit at the peripheral of the flyer's vision when they scan over the boarding pass.
Here is a side by side comparison of the existing boarding pass and my redesign. Given that the airline does not engage in ticket-ripping anymore, I would expect the average flyer to unconsciously follow the overall hierarchy I had established. All pre- boarding information is grouped to the left in descending fashion (is the name correct, do I have precheck, what's my flight number, what's my boarding time and date of departure, what's my gate number, etc). All post-security check information is grouped to the right (what's my seat number and zone, when does this plane depart, how many bags did I check in again, etc). The barcode information is far right and away from the flyer's attention, and lastly, the destination information (albeit a bit far) is bolded and accompanied by an icon to grab the flyer's attention.
I have to say however, one thing that stood out to me was the amount of white space in my layout. It felt a bit empty, although this could be a good thing since it means that any unnecessary information was filtered out. Simpler is almost always better, and looking at my redesign and imaging myself holding it while at the airport, I feel like it would be much, much easier to grasp the general information I needed.
Moving on to the second part of the assignment: expressive typography. After looking through some examples, it seemed like adjectives were more likely to work well as static images, while verbs worked better animated (which makes sense because verbs usually depict motion). I tried depicting a verb with a static image but it didn't come out the way I imagined:
It wasn't exactly 'bad' , but I personally didn't like it. Since I had experience animating within Photoshop, I decided to just animate all three pieces. I looked through the dictionary for verbs, and just focused on the word structure of each word; how could I change this letter/shape into some kind of object in motion? I came across the word 'blink', and immediately, I knew that the dot on the "i" needed to be an actual eye that blinked in a loop. It was the perfect fit.
I used simple shapes (mostly ellipse) to create the eye, and just drew the eyelids (using paintbrush) each frame in succession to make it seem like it was blinking. The entire GIF came out to be around 12 frames in total.
I was so happy with the result. Since motion is the biggest attractor of attention (next to color), it is immediately obvious what the viewer should be looking at. I also especially like the typography I chose, "CoconPro". It was thick, and had these really nice wavy ligatures that just added more personality to the overall word, making each letter seem like they could all move on their own. I decided to keep using this type for the other two pieces as well.
Since verbs worked so well, I thought of more ways I could attempt to animate them. On the Photoshop canvas, using "CoconPro", I just typed out random verbs that came into mind, noting how it looked in the typography. I typed out "slide", and saw how the "L" looked with the wavy ligature. I was hit with inspiration again, and I immediately knew that I had to animate an object sliding down the "L". I ended up using a simple circle shape, since I didn't want to make it overly complex. I filled the circle with a bright red, just to add that extra bit of distinction. Since I wanted the whole scene to loop seamlessly, I decided to mask the beginning of the "L" and the end of the "I" character by placing a simple white rectangle at both sides. This way, the ball will appear to roll out smoothly from the start, and then disappear into the "I", which acts as a 'door' of sorts.
Animating 'slide' took much longer than I expected. I ended up with around 40 frames, since I wanted each motion to flow smoothly. I couldn't afford to jump too much in terms of motion between frames, or else I would end up with a choppy output. Similar to 'blink' I really liked the end result, and I thought it perfectly encapsulated the word.
As I moved on to my third expressive word, I realized that I was running out of creative juices. I was stuck at my desk for a long time, until I revisited my "laugh" design, and thought of the word "giggle". This word seemed to have more 'personality' than 'laugh', mainly because of the repetition of 'g', which is a very loopy character. Because "giggle" looks a lot like "wiggle" I knew that my motion was going to have a bit of a wiggle to it, and after looking at the word a bit more, I saw two eyes in the body of the 'g' that could create a giggling face. I quickly began animating:
Again, I have to thank the "CoconPro" typography for imbuing my word with a little bit of character. The eyeballs were simple ellipses, and I found a png icon of a grin from Google Images. I simply moved the ellipses and the grin in random positions to simulate giggling. The output was around 9 frames or so.
To be honest, this was creepy. However, it does fit the word quite nicely, and I am happy with the result as well. I really enjoyed both assignments, and I thought they were really effective in pushing us to analyze different specificities of layout design in practical application (boarding pass) as well as typography (expressive words).