top of page

Augmented Reality Mobile App:
Sprout & About

Spent five weeks creating a mobile app that teaches users about ecologically significant plants at the University of Toronto Mississauga.

Overview

I spent five weeks designing and developing a mobile app for students at the University of Toronto Mississauga (UTM), with co-collaborators Colleen Tang Poy and Maurita Hung. Watch the video above for a summary of our project.

 

Our app, “Sprout&About”, uses augmented reality to enhance user experience with nature. Sprout&About encourages exploration of UTM’s nature park trails and teaches users about the local flora's ecological significance. The augmented reality feature allows users to view and collect plants (virtually) from UTM’s parks. This project was completed as part of BMC’s Advanced Media Design class with Professor M. Corrin. 

Roles: Lead Designer. 3D asset developer.

Tools​: Adobe Illustrator, XD, After Effects; Unity; Autodesk Maya

Date​: Spring 2019

Read about our design process below.

Overview of Final Product
Design Challenge

Target & Challenge

The University of Toronto Mississauga (UTM) is constantly striving to raise awareness about its plethora of surrounding park trails and nature. Knowledge about native flora and their ecological significance is valuable information to share and disseminate for many faculty and conservationists. 

Research & Design Strategy

However, most patrons of UTM know very little about the surrounding trails and plants and usually don’t have reason to venture outside campus. There also aren’t many ways to learn about the plants encountered when visitors do go exploring. Existing trail signage has inherent limitations: physical restrictions, an inability to update information, and a static/unengaging nature.

 

How do you encourage visitors to explore and learn about plants in a fun and engaging way, all while minimizing disruption to said ecosystems?

We wanted to create a potential solution using modern and universal devices (mobile phones) with exciting new technology (augmented reality). 

UX & Wireframing

Design Process

Wireframing

We went through several rounds of sketching and wireframing. Through this intensive and fast-paced brainstorming process, we settled on four key features of our mobile application:

1. Augmented reality (AR) viewer with phone camera.

2. Map functionality.

3. Ability to collect AR plants in a library, and read about them anytime.

4. A social function encouraging sharing and interaction with others.

Wireframe sketches 

Rapid Iteration & Prototyping

With a medium-fidelity prototype, we guerrilla tested our app design with a handful of users and experimented with different layouts. 

 

We initially reasoned that, because of the simplicity/straightforwardness of our app's features, we could omit a navigational menu in order to keep design minimal and focussed on the camera/augmented reality. However, testing showed us how easily users lost orientation; this data informed our final design which included a main navigation bar.

Guerrilla testing app layout with low-medium fidelity Adobe XD prototype

Our initial navigational menu was designed to emphasize the camera/augmented reality feature. But after testing, feedback, and prescriptive expert review sessions, we realized that this design overly favoured a single user group. Specifically, the initial design favoured users that were already in front of a Sprout&About locator/QR code; their main user goal would be to launch the camera and use the augmented reality feature right away. However, another main user group included active explorers whose goals would be to use the map to search for Sprout&About locators/QR codes and explore surrounding trails. 

This feedback informed our final design, which de-emphasizes the camera/augmented reality feature. It includes a simple main navigation bar allowing users to toggle easily between other main features; this makes it easier for different user groups (such as active explorers) to access other features. I kept the design elegant and minimalistic so as to not draw attention away from the app screen (where the augmented reality viewer would be).

Development and Usability Testing

We developed our high-fidelity prototype in Unity using Vuforia.

My role was in modelling, texturing, and optimizing our 3D plant models for Unity/augmented reality.


Using our high-fidelity prototype built out to an Android phone, we conducted usability tests with six real users to evaluate the (1) app design and (2) AR functionality. You can read our full usability report here. 

The main findings from our tests showed us that users found the app design intuitive and enjoyable to use. Some users struggled with using the map feature, which informed icon and layout changes. The results from our augmented reality testing tasks will be used for further development/improvement of the augmented reality experience.

Final high-fidelity design

Impact & Lessons

Mock-up of final app design

Impact & Lessons Learned

This app is a proof-of-concept prototype for the University of Toronto Mississauga's continuing endeavours to enhance awareness of surrounding plants and park trails.

 

With this project, we have demonstrated how UTM can use universally available technology (mobile phones) to enhance visitor awareness and experience with nature, all while educating users about ecology.

 

Some benefits of Sprout&About over traditional resources include the ability to easily grow and update plant databases, take advantage of social media/social networking to attract users, and encourage in-person interaction in nature.

Additionally, many studies have shown the positive impact of nature on mental health; Sprout&About might encourage potential users (many of whom are stressed undergraduate students) to take healthy breaks from work by heading into nature.

I've learned so much about rapid iteration, user testing, and interpreting/incorporating user feedback throughout this project. I've realized that sometimes, despite your best design intentions, user goals can be unpredictable. That's where user testing in both informal and formal conditions really saves the day. I've also simultaneously learned about some of the limitations of formal testing conditions (ecological validity, testing restrictions, etc) and have honed my ability to interpret and analyze user data. 

bottom of page