Mariando Airlines
Airline Product and Design System Development
Role
UI Designer
Year
Fall 2024
Tools
Figma
Objective:
The challenge was simple but ambitious: to create a design system for Mariando Air, a new premier airline in Ghana, while leveraging Figma’s advanced features like variables, components, and modes. This solo project wasn’t just about building reusable components—it was an opportunity to explore the fundamentals of creating a scalable, accessible system. Along the way, I needed to establish the airline’s branding, design a functional flight booking app, and master semantic naming for developer handoff—all while keeping everything simple, cohesive, and future-proof.
Process
I started by establishing a brand identity for Mariando Air, using Illustrator to craft logos, colors, and typography. With the branding set, I moved into Figma to develop wireframes for a flight booking app that would demonstrate the power of the design system.
One of the more challenging aspects was creating a functional flight schedule for Mariando Air’s four regional airports. Using Figma and Google Sheets, I mapped out the logistics—this required input from classmates to ensure the schedule felt realistic. With the structure in place, I shifted my focus to building the system itself.
I adopted an atomic design approach, breaking components into the smallest building blocks and organizing them into a cohesive library. Design tokens handled colors, typography, and spacing, while a base-8 grid ensured consistency. Accessibility was a priority from the start; I relied on the Stark plugin to meet AAA compliance standards and used a 60-30-10 rule for the color palette to ensure harmony.
Collaboration was simulated by asking classmates to walk through the system and app design over three sprint cycles. Their feedback helped me refine both the usability and the documentation, ensuring the system was intuitive and easy to adopt. By the end, I had a working design system and a frictionless prototype for the flight booking app.
Key Takeaways:
This project reinforced the value of simplicity and scalability in design systems. By focusing on essential components and adhering to standardized practices, I was able to create a system that was both functional and adaptable.
Lessons learned:
Speak both “design” and “dev.” A single source of truth, like a design system, bridges gaps and simplifies collaboration.
Documentation is everything. Clear documentation keeps a system scalable and easy to maintain.
Feedback drives success. The sprints with classmates gave me a fresh perspective and helped identify gaps I might have missed.
My biggest challenges—figuring out Figma prototyping and creating a realistic flight schedule—taught me the value of persistence and problem-solving. If I were to revisit this project, I’d aim for even cleaner branding and a more polished UI.
Skills Applied:
This project pushed me to master several tools and techniques:
Design Tools: Figma (variables, components, and prototyping), Illustrator, Photoshop.
Methodologies: Atomic design, semantic naming for developer handoffs, and a base-8 grid system.
Accessibility: Stark plugin for AAA compliance testing.
Collaboration Tools: Google Sheets for managing the flight schedule and peer feedback for iterative improvements.
AI Tools: ChatGPT and Photoshop Generative Fill for asset creation and content development.
Outcome
Mariando Air’s design system brought everything together: a scalable, accessible framework and a functional flight booking app prototype. The app utilized all the system’s components seamlessly, demonstrating how a well-crafted design system can simplify workflows and elevate user experiences.
This project proved that design systems don’t need to be complicated to be impactful—they just need to work.
