PlantStreak

• 

  PlantStreak's flower information popups.

• 

  PlantStreak's Garden Organizer mode in action.

Inspiration

Our main inspiration behind PlantStreak was the feeling you get when you see your very own plant growing from a little sprout to a blooming flower. We think it’s a beautiful feeling and we wanted to inspire others to try it. And not only that, but we think that more people should understand the importance of nature in our world. Of course growing a real plant takes time, patience and persistence in care, but hopefully our project conveys the feeling of accomplishment you get from the process.

What it does

PlantStreak is an educational & interactive World AR lens. The experience allows you to unlock different flower species and arrange them in a virtual garden, while simultaneously providing you with educational information about the flowers. The lens features 5 different flowers from different regions that can be unlocked by reaching certain milestones.

As mentioned earlier, our main inspiration for PlantStreak was the feeling you get when looking after plants. We really wanted to make users understand that growing a plant isn’t quick and requires patience and persistence. To achieve this, we made it possible to only plant a single flower sprout every 6 hours. After that time has passed, opening the lens greets you with your sprout fully grown into a blooming flower and allows you to plant a new sprout.

Consecutively planting flowers increases your streak, which you can share with friends, and not planting for more than 24 hours results in resetting your streak. In the beginning you’ll have only a Rose unlocked. To unlock each new flower, you’ll need to tap the plant button 4 times. That means that if you plant once a day, it will take you 4 days to unlock the second flower.

You can also decorate your own virtual garden with already unlocked flowers. This garden is automatically saved to your device. Feel free to take snaps of it and show off your flowers to your friends!

How we built it

PlantStreak uses a lot of Lens Studio features. The whole project’s backbone is the Persistent Storage - without it, user progress would be lost every time the lens is closed. The plant’s unique cartoonish look is achieved by a cartoon material that was easily modified with the Material Editor. Furthermore, we improved our visuals by taking advantage of the VFX Editor. Lens Studio’s new Physics System made developing a flower placement script for our garden edit mode easier than ever - by accurately shooting a ray cast from the middle of the screen and placing the desired flower on the hit coordinates.

Our plant models were made with Blender, we did our best to optimize them to fit in the 8mb limitation. This imposed some constraints upon us, but we believe some limits breed creativity and that helped us focus on the core look of the models. Our UI/UX was prototyped in Figma and thoroughly improved & iterated with time. We also employed Adobe Photoshop & Illustrator in order to help us make our designs consistent and pleasurable to look at.

Challenges we ran into

Like every great thing, developing PlantStreak took some time and made us face a couple of challenges. While we dealt with most of them, we really wanted to list those two.

Our initial idea was to have 10 flowers with realistic textures. Unfortunately Lens Studio’s 8mb file size limitation made us drop down to 5 flowers and switch to a toon shaded look for the flowers. Even when optimized, our realistic textures were too heavy.

Another thing that really had us stuck at one point was the UI. Snapchat runs on a lot of mobile devices and all of them have very different screen ratios, so sometimes when testing the lens on different devices, we’d find parts of our dynamic UI blocked by Snapchat’s in-app UI. Also for the tech nerds out there - our UI moves around in certain situations so the “Safe Render Target” mode in Lens Studio couldn’t help us solve this issue. Another solution we thought of, is converting our lens to a Connected Lens as that removes most of Snapchat’s in-app UI.

However, we quickly scrapped that as we wanted to give the users the ability to take snaps/photos/recordings, and converting would take that away. Finally, we had to compromise and just make the UI fit the most amount of devices out there. This also made us move around UI elements we initially didn’t want to as they obstructed / got obstructed by things around them.

Accomplishments that we're proud of

We’re really proud of how we managed to fit so much content within our lens while keeping it all under Lens Studio’s 8mb limit. Here’s a couple of other things we’re really proud of:

Our Local Save System is built upon Lens Studio’s Persistent Storage and works like a charm.

Even after we scrapped the realistic looking plant textures because of file size limitations, we still managed to include 5 unique and cool looking plants. The toon shaded look gave them the extra “cool” needed!

We think we did a really good job at developing a very complete and high quality experience.

The project’s total amount of code equals to around 5000 lines of it.

We have a friendly & easy to understand UI/UX, that even features a dark mode.

What we learned

Working on this project made us learn how to optimize textures, 3D models and sound effects to fit in the 8mb limit. It also improved our understanding of design and UI/UX. Apart from that it made us see the full potential of Lens Studio’s powerful VFX Editor & Physics System.

What's next for PlantStreak

Hopefully in the future, Lens Studio’s innovations are going to let us expand on our vision for PlantStreak. We’d love to fill the experience with even more flowers, content and educational information.

Built With

• adobe-illustrator
• blender
• figma
• lens-studio
• photoshop