"Papillon" means "butterfly" in French. I wanted to capture the simple beauty of butterflies with a minimal yet colorful app that looks and feels good to use. I hope that this app can be a hub for those who appreciate butterflies the same way that I do. ​​​​​​​
Goal: Design a butterfly app that allows users to learn more about the insect and have a unique app branding.
Timeframe: 4 days
Tools: Adobe Illustrator, Adobe Photoshop
PAPILLON USERS
Inspired by bird watching apps, I wanted to create a butterfly app that teaches its users about different butterfly identities and creates a comfortable space for them to learn more about the insect. 
This app is mostly geared towards people who are just starting out to learn more about butterflies and want to find them in-person. However, experienced butterfly watchers may benefit from this app by seeing their favorite butterflies uniquely illustrated. 
The look and feel of the app is especially important. I wanted to create a modern-looking hub that lets the butterflies' designs shine the most.
APP SKETCH IDEAS
These were some beginning sketches that I drew to get the layout of the app.
Rounded edges were important! They pair with the roundness of butterfly wings well.
WHAT IS PAPILLON?
Papillon helps you find butterflies with three of its main features.
HIGH-FIDELITY WIREFRAMES
Welcome Screen
Welcome Screen
Saved Butterflies
Saved Butterflies
Butterfly Identifier
Butterfly Identifier
Butterfly Search
Butterfly Search
Indexed Butterfly
Indexed Butterfly
A specific color palette and two typefaces were chosen to create a professional yet modern interface. The main goal was to make sure that the unique characteristics of the butterflies will shine through. The Peacock butterfly (on the very right) is a wonderful example of how its rainbow-like colors pops overall on the interface.
MOCKUPS
MOTIVATIONS FOR PAPILLON
This was an ambitious project that I've finished in 4 days. Do you ever get so inspired that you just have to make something? That's what I felt while I was designing Papillon. 🦋
I knew that I wanted to make something that will showcase the understated beauty of butterflies. That's why I've illustrated each butterfly with as many details without simplifying them too much. Real life photos were avoided in the butterfly index to invite those who may not stomach them so easily. 
A lot of my friends are deathly afraid of butterflies, but these illustrations will ease their fears. They also make the app more inviting, creates a strong branding for the app, and encourages people to search for butterflies in real life.
LESSONS LEARNED
Along with app design and illustration, I've exercised my skills in microcopy on the UI.
It was especially hard trying to word titles in the indexed butterfly screen. If I were to make improvements, I would change "Occurrences" to "Locations" instead. I've learned that "Occurrences" can be mistaken with a number of times. 
A glossary would be a great feature to add into the app since some people may not know what "eye spots" means along with entomological jargon (aka scientific insect terms). <-- You see what I mean? There's a need.
Back to Top