UX / UI
About the Project
In 2019, I designed the UX / UI for a hypothetical airline ticketing platform. Unlike most contemporary websites that return hundreds of flight options for price-conscious flyers, this experience targets users that value a laid-back and hassle-free journey more than a cheap ticket. Built during a 24-hour hackathon, the web app pulled realtime flight information from Expedia along with airport congestion data in order to display a single round-trip ticket suggestion for the leisure-seeking traveler.
The UX Concept
We spent an hour coming up with a concept and sketching a few notes to build upon. In typical web development, this process usually happens over days or weeks.
The idea for the UI was very simple. Users would enter in their flight dates and destination, then the app would do the rest of the work.
We spent some time brainstorming environmental factors that might contribute to a person's travel itinerary. We sketched out an algorothim that would factor in a user's sensitivity to price and travel time.
Look & Feel
When establishing an aesthetic, I like to start by choosing a typeface. This usually takes anywhere from 30 minutes to 2 hours. During a hackathon, that's a really long time. However, I think it is an extremely crucial part of my design process and it sets the tone and personality of a product. I wanted to use typefaces that were as "bouyant" and "delightful" as possible.
I chose to use Soleil as the primary typeface for it's extra tall x-height and round, geometric letters, and Bree as a secondary logo typeface.
I expanded on the motif of "blue skies", and sketched a rough color palette:
I got my inspiration for the illustrations from the quirky characters in the Headspace app, and from the character Alfur, a stick-figure elf in one of my favorite cartoons Hilda.
In terms of UX inspriation, I really love OpenCare, the platform that allows you to book a dentist in a matter of minutes through their delightful, simplified UI.
Dropping placeholder Headspace illustrations into the UI along with my selected typefaces and colors gave me a look and feel that I liked:
I quickly sketched my version of Alfur, then created final art with a color palette that matched the UI.
If I had more time, I would create smooth vector art and animate the characters with CSS. These illustrations were done quickly in about 20 minutes in Adobe Draw, then cleaned up in Illustrator.
The final core piece of the UI was my favorite. Airline ticket design is something print designers always drool over as a wishlist typography project. I jumped at my chance to make it a reality.
I created a quick 5-minute mockup of the results/itinerary layout which would feature a huge pair of round-trip airline tickets, then the traveler's full itenerary. Since I was short on time, I just used blocks of color to indicate text in a layout. I would finalize the verbiage in the actual implementation.
The Final Product
The UI was definitely a collection of things that I really wanted to create as a designer, though I think it all came together nicely and with focused purpose. I'm extremely proud of this project as a fun, visual showpiece that was completed in less than a day.
What I Learned
I had so much fun building Flight Plan. It was just Jon and I at the hackathon, though it was so fun to be able to build a tiny, fully complete project over the span of a weekend.
Unfortunately, we had so much fun building that we didn't put enough time into our final presentation. The non-technical judges favored the presentations with exposition and slide decks filled with hypothetical business plans. It was disappointing, though now we know what to expect at this event.
Nonetheless, I am proud of what we created. I think it is a solid demo.
In the future, we intend to compete again with a different idea. Next time we will be equipped with a full team including a presenter, a UX researcher, and people who have actual airline industry experience.