Figma Design Systems - Variables and Conditionals
Design System Research
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.
Flight Patterns and System Planning
Inspired by my study abroad trip to Australia, I was attracted to the marketability of Australian stereotypes.
Planning flight time iterations and patterns with 3 different planes in 4 different locations along the east coast of Australia.
With precise planning, timing, and aligning planes with layovers, I calculated and mapped out a few iterations of times and flights with connected layovers and at least 1h and 30m between for flight cooldown and getting ready for the next passengers. All 3 flights are within a 24 hour time span and each one heads to and from every location.
After several calculations and keeping track of each plane, the first flights all come from the home airport in Gold Coast and end the end landing back to their home airport.
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.
The intent is to give kids a sense of comfort and safety taking off.
Though the actual kid will not be booking the flight, a parent can show their kid that their process of going on a trip to ensure security and excitement.
Taking a unique approach to a traditionally professional system takes the perspective of a child’s fear of flying, either distracting them from the trip or building their excitement to come back to Pouch Airlines as their first preference.
As we all know, most parents want their child to feel as if they aren’t in danger on long trips to soothe their worries and will considerably influence said child to choose Pouch Airlines as an airline they wish to board in the future (potentially swaying their parents interest in a unique airline tailored for their child).
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.
Following Accessibility Guidelines
Text must not span across the entire screen due to confusion of sentences and misinterpretation of words. Maintaining a larger height than font size ensures that letters have room to breathe and better legibility.
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.
How to use
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.
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.
Corina Lougie
corina.lougie@gmail.com
