Airpln-UI

image1

Inspiration

Many airline websites today lack a modern UI, which can lead to poor user experiences and reduced site retention. With this problem in mind, our team started our hackathon project by looking for modern UI libraries that are airline-themed but quickly realized none were readily available. We decided to address this gap in content by combining our technical and artistic skills to create our own set of modern UI components. Our content is specially airline-themed, inspired by the blue from the American Airlines logo. Through this project, we wanted to offer a centralized location for developers to easily access our designs.

We believe that modern UI practices such as responsive animations and attractive design have the potential to transform how users interact with online platforms. By implementing design improvements, airlines can create more enjoyable browsing experiences, ultimately boosting customer satisfaction and driving increased web traffic.

What it does

Airpln-UI is a free UI library featuring airline-themed, modern UI components. Our designs reimagine the icons for processes such as page loading and booking confirmation and were created specifically with boosting engagement in mind. Developers can seamlessly integrate our components into their projects using external HTML elements or by installing our npm package.

How we built it

We built all the UI components using HTML CSS and Javascript. We used the airplane icon from w3.org, and designed the rest on our own. We compiled the UI as an npm package using Node.js and Babel.

Challenges we ran into

We faced challenges compiling our icons into HTML snippets and npm packages. It took several hours of debugging both our code and configurations, as well as refining our front-end design, before we were able to publish the final package.

Accomplishments that we're proud of

We started this 24-hour hackathon with an abstract vision and successfully created a cohesive library of designs by the end. Our team of three consists of a wide range of experiences, including two first-time hackathon participants, Parthib and Amy, who had minimal coding backgrounds. Despite this, we were able to collaborate effectively to create this project. Through the process, Amy received a crash course in front-end (HTML CSS) and was able to build the demo website showcasing the UI components, while Parthib contributed to developing some of the back-end components.

What we learned

While our initial focus was on creating engaging UI, we quickly realized the importance of seamless integration for developers. This insight led us to shift our efforts toward ensuring our designs were cohesive and compatible with other technologies. In doing so, we had to streamline our original ideas, prioritizing a comprehensive and functional final product.

What's next for Airpln-UI

We hope to build more useful components that are fast and easy to render on web apps. Whether our specific designs are used, we wish to share this library with the developer and hope they might be catalysts of inspiration for businesses and individuals to enhance their website UIs for the modern audience.