Week Four
Project #1: Airline Mobile UI & Wrap Presentation Reflection
This week marked the official conclusion of project #1, in which students were assigned to create a luxury airline sub-brand for Delta Airlines. The goal was to develop an airline that reflected Delta's design principles. The deliverables included Figma files for the mobile and widget screens, a brief branding guide, process materials, and a plane wrap that served as a physical extension of the brand.
The project was inspired by Delta airline's current branding, particularly its mobile app and ticketing system. The goal was to create a luxurious experience for passengers. Inspiration was drawn from Delta's current and past branding, vintage illustrations, and imagery from the 1920s to achieve a sophisticated and glamorous look and feel. In summary, Noble Horizons is Delta’s new line of luxury airliners, catering to passengers seeking a comfortable and regal air travel experience. It introduces award-winning services and top-tier amenities, aiming to provide a seamless travel journey. Noble Horizons sets a new standard for luxury air travel by combining timeless sophistication with contemporary innovation. Every aspect, from spacious seating to elegant exteriors and gourmet dining, is designed to enhance the journey. Whether crossing continents or soaring through the skies, Noble Horizons guarantees an extraordinary experience, as exceptional as the destinations passengers seek to explore.
Starting with the mood board, I found images from Delta's current and older branding, particularly the crown and iconic triangle logo marks. I also looked for typography from their current branding, as well as other images that capture the look and mood of 1920s glamour and sophistication without being too specific to the Art Deco style. Moving on to the initial sketches, the logo mark for Noble Horizon was inspired by vintage airline pins and the aesthetics of the golden age of air travel. I took inspiration from Delta Airlines' logo and played around with angular shapes and triangles to create a mark that reflects the Art Deco style of Noble Horizons. The word mark is a customized Whitney Medium typeface that is slightly thinner than Delta's current word mark, paying homage to Delta as the parent company without looking too similar to Delta's current branding. The thinner typeface also presents a sort of luxury and royalty aspect. The logo mark pays homage to Delta's current logo mark but is more elevated to look sophisticated, reminiscent of the angles often seen in 1920s art deco, and is also in the shape of an airplane and a runway. The colors of the logo mark are light and dark gold to show depth and similarity to the current Delta Airlines logo mark (light and dark red).
The mobile screens display the UI design of the airline app and its widgets. The app itself has a clean look, with a subtly faded continuous background that features a more geometric style of Delta's current logo. Delta blue is integrated consistently throughout the app to maintain a unified branding identity across all screens. While these screens are not exact prototypes, viewing my designs on an iPhone 13/14 screen was helpful for assessing the text sizing and legibility. The mobile screens include medium, small, and large widgets, as well as welcome and booking screens, trip summary, departing, and ticket screens. All these screens maintain a continuous, clean, and easily navigable look and feel. The airplane wrap itself is a continuation of the branding identity. Overall, this project provided me with valuable experience in using Figma. Am I prepared to work on prototypes for the next project? To be honest, I'm not entirely sure, but I'm definitely up for the challenge and excited to see what project #2 has in store.
Figma Module 3: What is Prototyping?
The required reading for this week discusses the use of prototyping in Figma, how to prototype, and why it is still essential to learn. In reviewing my experience with prototyping from Assignment #3 and playing around with the prototype features for Project #1, this action is a very helpful feature in allowing designers to see how their designs look on various devices, whether an iPhone, iPad, Macbook, etc. While this is a helpful feature, learning to prototype seems daunting and, at times, impossible to do. However, I must learn how to prototype if I am going to complete and succeed at accomplishing the goals and requirements of Project #2, and this module couldn't have come at a better time.
To summarize, prototyping involves creating a digital model of a product for designers to test and receive feedback before final production. It's a way to transform sketches and wireframes into interactive simulations, often without coding, to evaluate user interaction.
Prototyping helps save time, money, and energy in the long run by enabling developers and designers to gather user feedback, obtain early validation, and refine features and improve communication skills. Prototypes help ensure that a design works well for users by allowing for early feedback, making it easier and cheaper to fix issues before investing in full development. Prototyping also validates early concepts, aligns stakeholders, and provides a realistic view of the product before it's built.
While reading this article, I'm beginning to understand the difference between low-fidelity and high-fidelity prototyping better. For instance, a low-fidelity prototype is used early in the design phase to validate concepts with minimal time investment. This prototype serves as proof of concept to test ideas and functionality. In contrast, high-fidelity prototyping is closer to the finished product, with more detailed design, interactions, and functionality. This prototype is typically used in later design stages to test specific features or flows. Initially, a designer begins creating prototypes using paper to create quick, rough sketches of architecture, functionality, and flow. These sketches are easy to change but lack interactivity. Next, the designer moves on to developing a low-fidelity prototype, providing a working model of basic UX/UI elements without coding. Lastly, the designer creates a high-fidelity version of the prototype, which includes realistic design details, polish, and complex interactions. This prototype is used to test the product in a near-final form, including hardware functionality if needed.
Overall, low-fidelity and high-fidelity prototypes have their place in the design process, and the choice depends on the specific challenge. After reading this article, I find this information incredibly helpful, and it's making me understand prototyping a little easier. Am I an expert? No, not by a long shot. However, prototyping doesn't seem as scary or intimidating, which I consider an absolute win.