Project Overview
Creating a trustworthy and kid-friendly Airline System tailored towards helping kids overcome their fear of flights. I created an Airline and Design System for a working prototype of a fake airline that flies along the east coast of Australia.
DURATION
10 weeks
SOFTWARE
Adobe Illustrator, Figma
TYPE
Figma Design Systems - Variables and conditionals
FLIGHT PATTERNS AND SYSTEM PLANNING
Inspired by my study abroad trip to Australia, I was attracted to the marketability of Australian stereotypes.
MAPPING OUT VARIABLES AND CONDITIONALS
I made a working Tic-Tac-Toe Board in Figma using their variables and conditionals. A project made before Pouch Airlines, it was important to get to know the Figma infrastructure and capabilities before applying it to a dedicated project.
Using interactive components inside each other and if statements, the game is able to have a dark and light mode, score reset, score tracker, and labels that tell you which person's turn it is.
Components
Each component represents a changing state. Components inside other components created more complicated interactions, such as the pop-up win conditions if more than 1 thing was happening at the same time for 1 interaction. In this case, I had a boolean and different variables changing depending on the player's turn and who's turn it was.
Conditionals
Every single space in the 3x3 grid had if statements for every possible move.
Light and Dark Mode
Utilizing the variable system, creating 2 sets of the same variables to switch from by using conditionals simplified the process of keeping variables the same state rather than just using frames and noodles.
Variables
All the interactive and changing statuses have different initial values. These scores move up or resets based on conditions of wins or losses for either side. The FinalGameStats helped me keep track of the win conditionals if one side were to beat 2 times best out of 3.
FINAL PROTOTYPE
Using the same type of system as the Tic-Tac-Toe board, I stored more conditionals and variables to make a design system to be used across different platforms.
Colors, typography, spacing, and assets were all assembled into conditionals for easy reuse of the system.
Home Screen
Adding subtle motion to each page added life to the design, making it seem more fun and whimsical. Using bounce and easing animations, I created the subtle feel of floating in the air and "hopping" along with a kangaroo.
Search Screen
Because the branding is to feel silly inside a kangaroo pouch, airplanes are considered as "Kangaroos" and the user must select a Kangaroo flight from a preferred location to another.
Date Picker
The calendar uses variables and conditionals to make each date work no matter which one is chosen.
Pouch Selector
Though a kangaroo only has one pouch, since an airplane has multiple seats, the user will get a choice of a few tickets to suit their trip needs.
The alternating background colors are a design choice to reminisce between night and day, moving forward through the sky.
THE JOEY SYSTEM
Pouch Airlinesโ Design System that sets the guidelines for each and every design decision that breathes life into Pouch Airlines.
Have you ever watched your parents book flights to places far far away, feeling the adrenaline of the fear of heights and the anticipation of the trip?
Kids love to be in their parentsโ business, and to satisfy their curiosity increases the bond and trustworthiness a kid feels towards them.
Pouchโs ultimate goal is to include a child-friendly design system that is functional while attractive to a younger audience.
How to use
All text is based on a 4pt and 8pt scale. This includes a minimum size type of 12pt font and a max of 96pt font to ensure consistency and legibility throughout different webpage resolutions. Letter spacing is scalable to ensure consistency through any size.
Quicksand Regular Font 36pt (the current one this paragraph is typed with) uses 0% letter spacing and 48 line height - a ratio of 3:4 from font size in points to line height.
i.e. 12pt font has a 16pt line height, 16pt has a LH of 20px (because it is a decimal dividing by 3, round down to the nearest whole number, even if it is closer to the higher number).
(Font size/3)(4) = Line height used for font size.
Joey Buttons
How to use
The same rule applying to buttons, padding between buttons must either follow the Joey Grid or the 4px/8px spacing system.
Depending on the size of the text, the button will expand its padding as follows:
32pt text must have AT LEAST 32px of size between the edges and the text. It is preferable for wider buttons to have more padding between the text and edge.
Buttons cannot be pointed. It is imperative that every corner is rounded. Subtle corners must be at least 4px, larger can be up to 32px.
Joey Grid has margins of 100px on each side. It is recommended there is at least 42px space between the top and bottom margins, giving the content space and reduce crowding.
On a standard 14 inch Apple Laptop screen, (1512px wide) 12 columns stretch from the entire width of the screen minus 100px padding on both sides. Gutter is 20px.
Mobile versions will adhere to the base-4 and base-8 spacing and grid system, similarly to the desktop version.
JOEY ILLUSTRATION
Accessibility Considerations
Always provide alt text
Maintain strong color contrast ratios
Combine Icons with text labels, especially for critical actions
What Joey taught me
A lot of thought and care goes into design systems to make it the most accurate across stating your brand and building around use cases. Though my project did not go into the deepest details, maintaining brand consistency and creating assets specific to the purpose of my design took a lot of concentration and reasoning behind each decision.
