Case Studies

MAGIGARDEN AR

CONCEPT DESIGN + AUGMENTED REALITY

MagiGarden is an interactive mobile application that allows learners to explore the world of plant care

TOOLS:

ROLES:

Ashley Huszti - AR Developer, Concept

Yinglin Chen - 3D Modeller, Concept

Queenly Cheung - UI Designer, Concept

Three Weeks, Nov 2023

DURATION:

OVERVIEW

AR brings materials to life, in an engaging and interactive form, which can be used to enhance the learning experiences, especially for children who are naturally curious. It can help visualize abstract or complex concepts, to make it easier for them to understand and remember information. The objective of this project was to create an augmented reality application to help children explore and discover the fundamentals of plant care.

Problem

Users typically struggle with creating the proper balance for a plants needs. Our user journey aids in learning the three basics through an Augmented Reality experience.

Cactus

Needs lots of 🌞 and little 💧

Flower

Needs a balance of 🌞 and 💧

Mushroom

Needs lots of 💧 and little 🌞

Results

  • A clear, fun and approachable experience to learn fundamentals of plant care for a variety of specific needs


  • Gives the user an opportunity to grow, collect, and visually bring in the plant to your space before purchasing the real thing via AR that features multiple events, assets, and sound effects where the real plant will thrive in your home


  • Successfully creating a SparkAR MVP through iterations solving for size constraints


DESIGN PROCESS

To begin the design process our team began with a storyboard to express the user journey.

STORYBOARD

BRAND GUIDE

A brand guide was developed to communicate our brand fonts and colour palette used in the UI.


  • "Gnomon" was chosen as our primary font and was used in the logo creation to pull inspiration of old school gaming UI while maintaining a clean look


  • Our colour palette is soft and approachable using earthy complimentary tones. It was used as the main colours for the gamification of our chosen plants

We went through many logo iterations that developed as the 3D models were created. As with the colour palette, we wanted to take inspiration from both the plant and augmented reality aspects of the app.

Logo design

Our team then developed low-fidelity wireframes to visualize the apps core features and UI elements that would be simple and easy for for children to use. We created high-fidelity wireframes to further visualize the assets and assist with bringing them into SparkAR

WIREFRAMING

Low-Fidelity

High-Fidelity

Spark AR Breakdown

Interactive Events using the Patch Editor

I was responsible for bringing the assets of our application into SparkAR to create these central AR elements:
World Space, Planes, 2&3D Objects and Assets, Interactions, Animations

Screen & Object Tap


Controlling particle system for care instructions

Screen Tap & Hold


Plays a sound effect for particle system care

Screen Pan


Move 3D Object in World space

Loop Animation


Movement for visual interest in 3D model

UI Elements


Reactive interface to switch views & menus

LEARNING & TAKEAWAYS

In the first version of the app we cycled through multiple iterations in Blender on the 3D models to resize to be compatible with SparkAR.

CHALLENGES:

This first version only featured one 3D model to still communicate the plant in the app, while also compatible within the constraints of exporting a filter to Instagram. Creating a prototype within the 4MB limit to publish the filter on Instagram caused the most issues.


TAKEAWAYS:
After receiving feedback and iterating on the project, we created multiple SparkAR files to include three different 3D models to showcase in the new version of the video walkthrough. This was stitched together to create the illusion of a full prototype without the size limitations.