We were briefed to design an experience in airports to improve the traveler’s experience. 6 weeks.
PT. I: Initial Research
Focusing on the departure experience: Mind Map
Case study: Airport experiences in pop culture
An immediate point of inspiration for this project was the significant airport scenes in movies and TV. I remember when a teacher in high school first explained to us why in older movies and TV, airports were more “relaxed” — people would be able to leave from their homes for a flight 45 minutes before it took off (Home Alone, 1990), or chase their loved one to the security gate to admit love (Friends S10). Pre-9/11, the departure experience in airports looked far different. In our present, we are encouraged to arrive to airports hour[s] early. Airports have become highly emotional spaces, a space literally dedicated to leaving, yet they are also so often experienced alone.
A scene that comes to my mind is in Ladybird (youtube link).
Ladybird is leaving for college in New York City, moving far away, to the dismay of her mother. In the car ride where her mom and dad are dropping her off, you really notice the tension between mother and daughter — as well as the tenseness of an airport. Here, airports represent more than just leaving to college, but also represent Ladybird leaving her mom and her childhood. The drive and overall departure experience rile up complex emotions leading up to the actual act of leaving.
Her mom is driving and when they arrive, her dad gets out to help her check in her luggage. Ladybird asks her mom if she wants to come with them, but she brings up the expensive parking rates and instead opts to drive around the airport in circles until the dad comes back out. This is exactly how my own experiences traveling to and from college play out.
In this scene, you also catch on to that both the actual traveler and the person dropping them off experience some sort of “leaving”.
Ladybird’s mom quickly regrets her decision, and parks and runs into the airport only to find that her daughter has already checked in and is through security. There is no way she can see her again before she leaves now.
There is a space between security and boarding that is so complex, emotional, and lonely. Where you find yourself awaiting a likely large change in your life, possibly for a very long time.
This is exactly the space I want to design for.
PT. II: Design Prototyping
How might we help travelers feel reconnected to loved ones post security?
The project: Working with my peer Yash Mittal.
An experience that offers:
- Delight. Brings joyful emotions
- Surprise. As a way to bring delight
- Intimacy. To make a lonely space less lonely and more lovely.
We have the idea to create a “message service” of sorts that allows loved ones to send mixed media messages (letters, photos/videos, music) to their passengers, which the passenger can access via a kiosk at their gate.
Our deliverables will be:
- a server-side form site, with input options for the various media
- a client-side site that will run on a tablet within a kiosk-booth setup. It will redesign the input information from the server
This project primarily deals with the age-old design challenges of arranging type and image [1] in the most meaningful ways possible and [2] to carefully evoke emotion.
Why a website? Why technology?
I am a designer first and technologist second, and I want to be critical of technology use. No jazz where it’s not needed!
But when technology can provide something analog cannot, and when interactions born from pixels can evoke magic, I’m all ears!
Iteration #1
To start, we wanted to bring in visual themes of air travel: literal clouds, airyness, dreamyness
We also want to play with motion to create a more immersive experience. In using clouds and text that float across the screen at different rates, we challenge readability to achieve ephermerality and therefore immersiveness.
We also wanted to play with textures add more visual maturity to our designs. Our visual direction is more realistic than illustrative, but we still want to maintain a distinct look that says, “we are not trying to take something physical and remake it in the digital space. we are trying to design something in the digital space that is uniquely digital”
Input Form Design (Iteration #1)
Iteration #2
The type NEEDED more thought. I’ve been in love with this monospaced italic Vulf from ohnotype. We are going for: more playful, more delightful, and more thematic. Moving to a center alignment definitely helps.
Following iterations should definitely concern the copywriting more.
[Nov 26] To be revisited…
Tablet Experience
Our design approach to creating an immersive, intimate, playful experience end-to-end at the kiosk is to approach the whole experience through the lens of storytelling, or making a game.
Our first iteration takes a stab at using “scrolly-telling” and the parallax effect.
The main concept is that it takes the mixed media of the input and scatters non-text (image, video) in between text. The text sits in a grid and the mixed media pages break the grid, to add little moments of delight/surprise, as well as visual relief and asking the user to slow down.
…
“You gotta kill your darlings” — what’s always ringing in a designer’s ear at this phase of a project.
I’m very comfortable with the parallax effect and confident that it works to achieve the effects I want from the user.
However, I think I’ve also known and need to confront the fact that maybe this isn’t the exact best treatment of text for this purpose. It looks good, but it doesn’t work well.
Realistically, the type of text I’m working with doesn’t work well broken up into blocks. The design compromises integrity to the original text.
Back to the drawing board… Non-scroll web interactions
I explained the multi-media design I was trying to achieve to a classmate and she recommended I look at the game Papers, Please for inspiration.
In this game, you move the papers on the table around to view the different assets. Very skeuomorphic.
It’s fun, but I think it’s too skeumorphic. It lacks maturity and visual direction. It’s trying too hard to imitate something in the physical world digitally. But we wanted to make something that felt more elegant and bespoke.
I am so stuck.
The moodboards need to be revisited and there needs to be a stronger visual direction.
I’m working on the 8th floor of Gates, and I’m looking out the window, and something feels very beautiful.
I really love how the screen thing distorts light and color. It also feels weirdly digital. It also reminds me of the Windows desktops and that kind of utopian nature look.
Reaching even further back than Windows desktops, I’m taking a lot of visual inspiration from Hypercard and Susan Kare. Their designs balance digital-ness with delight of physical objects/the world.
To achieve a more elegant look than “just” pixel art (I love pixel art! pixel art is just fine on its own, just not right now), I’m going into Photoshop to find a more unique style for this project and also achieve more visual cohesiveness.
The icons are directly taken from Hypercard right now. After a round of validation/critique, I’ll go in to illustrate some new and original assets.
Type Explorations
I’m also enjoying the new directions I’m going with the type. For labels, I’m using PF Das Groto Mono which is just such a wonderful contemporary grotesque typeface.
For body and headings, I’m using my friend Elise Chapman’s pixel typeface L’Anno that I remembered she made for our type class this semester! I love the pixel type, but wonder if this one right now feels too textile.
I’ve also just been in love with Plain Form lately, and may play with using something less readable, still pixel-y, but with a more just slightly more contemporary and digital feel.
PT. III: Prototyping with Code
Use code to add motion: make the bird fly across the screen, have the halftone effect move across the screen.
PT. IV: The Kiosk Experience + Physical Artifacts
