Part Two - Portfolio

Posted on by arnott2021

Introduction

Garden Quest is an application that allows users to experiment with Augmented Reality by placing 3D plants and structures into their gardens. The app will educate, teach, and reward users as they take part in their own ‘Garden Quest.’ It will help the users engage in activities in their garden by providing inspiration, education, and goals to the user.

Research

David Attenborough’s VR experience

Figure 1; The Green Planet AR experience, a screenshot from the website advertising the new experience.

Viewers can experience digitally enhanced AR worlds with David Attenborough. This is an example of how AR assets and information can be used to create a unique educational experience.

Viridi- Ice Water Games

Figure 2; Viridi trailer showing some of the plant assets and in-game play.

Viridi allows the user to grow succulent plants, which change and grow over time. Inspiration will be taken from the plant’s simple but visually effective designs when designing the plants for Garden Quest.

Potioneer: The VR Gardening Simulator

Figure 3; Potioneer, the VR Gardening Simulator.

This VR game allows users to tend to their virtual gardens and grow plants. Inspiration will be taken from this game by using the 3D plant and structure assets to inspire the growth of plants in the user’s gardens instead of in a virtual reality space.

Aims

The main aims of the project are as follows;

  • To create an app that allows users to view 3D assets of plants and structures in Augmented Reality.
  • Create brand UI kit and determine typography and colour schemes.
  • Create a low-fidelity app with wireframes and conduct user testing. Collect feedback before creating a high-fidelity app.
  • Create an app that has multiple functions and purposes of keeping the user engaged (e.g. live chat, community chat forums, news, seasonal to-do diary, and tasks.)

Idea Generation and Research

The screen map displays the page screens of the app and their contents. The map breaks down the app’s key features and functions to plan the first low-fidelity prototype.

Figure 4; Initial app screen map layout

User Flow Journeys

The user flow journey explores the different paths users take in the app based on their needs. In the first example, flow 1 is based on a user wanting to place an AR tree in their garden.

Figure 5; App user flow Journey Flow 1

In the second example, flow 2 features the user flow when a user wants to contact a horticulturist.

Figure 6; App user flow Journey Flow 2

Mid-Fidelity Prototype

The onboarding screen shows what users will see when they first open the app, it gives an introduction to the features available.

Figure 7; Mid-fidelity app on-boarding screens.

The user screens show the different pages on the app within the menu, including; Home, Search, Camera, Account, and Learn.

Figure 8; Mid-Fidelity app user screens.

Usability Testing

A test group of participants were provided with tasks to conduct within the mid-fidelity app prototype, these are listed below;

  1. Locate the Live Camera View and select the add 3D plant option.
  2. Locate the Learn page and start a live chat with a horticulturist.
  3. Locate the Account page and create an account on the app.

Figure 9; Usability Testing results, created in Miro.

Participant feedback is listed below;

  1. 90% of participants prefer navigating the icon menu at the bottom of the screen instead of the hamburger menu.
  2. 80% of participants would prefer to skip the onboarding screens.
  3. 60% of participants would like a video chat with a horticulturist instead of a live chat.
  4. 30% of participants would like a diary planner page to keep up with the care of selected plants.

High Fidelity Prototype

The onboarding screens provide users with an introduction to the experiences available within GardenQuest. There are limited screens to retain the user’s attention and keep them engaged. The users can skip these screens if needed to go straight to the app’s main content.

Figure 10; High-fidelity app on-boarding screen.

The main purpose of the primary screens is to direct the user to create an AR scene. Additional screens have been added to retain users by providing in-app engagement. In particular, the ‘Chat’ screen will engage users by providing a social aspect to the app where users can join a local community forum, attend weekly socials, participate in events, and showcase their gardens.

Introducing a social and community aspect to the app is intended to provide positive social functionality in the form of local support groups for individuals to connect and make friends with other GardenQuest users. This addition was inspired by Sarah Wakefield et al in the study ‘Growing urban health: Community gardening in South-East Toronto‘ which suggests;

“Community networks and social support were developed through the gardens. The gardens were seen by many as a place where communication with people from other cultures could begin, using food and shared experience as a starting point for understanding. This was seen to help to bring people out of isolation, and served as a starting point for broader discussions of community issues”

Figure 10; High Fidelity app main user screens.

User Flow – Adding VR Plant

Figure 11; Adding an AR plant user flow app screens.

The user flow demonstrates the amount of screens used for the user to add a 3D plant to their garden. The number of screens will depend on whether or not the user wants to save their scene to their account or not, if it is just a casual browse then the user will only see three screens (add 3D plants>scan area>place 3D plant.)

Wireframes in XD

Figure 12; Wireframes of the app prototype.

The link to test the prototype of the wireframes can be accessed here;

https://xd.adobe.com/view/6fee065e-8c91-411d-a5cd-46248bf12a84-3abd/

Figure 13; Screen Capture of the app prototype.

Logo Design

The final logo for Garden Quest and the variations in design ideas are shown below.

Figure 14; Logo Design 1; The logo uses imagery of a garden fork and spade sticking from the “G” and “Q.”

Figure 15; plain text with no garden-specific imagery.

Figure 16; Final Logo Design, the Garden Quest logo features a Serif font, a garden sickle for the “G” and a watering can for the “Q.”

Graphic Standards

Figure 17; Graphic Standards of the app.

The colors used signify recognizable earth and nature tones. The word “Garden” is a lush spring green colour which suggests growth and new beginnings. the word “Quest” is brown and signifies the soil and growth. The typography is bold, serif, Cooper Black, which is easily readable and familiar to users which will initially create trust and familiarity with users.

Software Proficiency

Maya software was used to create the 3D assets, these will be exported to Adobe Substance Stager to add texture and colour. The final task will be to test the assets in Adobe Aero and experiment with them live from a smartphone camera.

Maya

Figure 18; Experimenting with Maya asset library.

Figure 19; Adding leaves onto a drawn path on an apple tree.

To create the tree asset, a brush tool was used from Maya’s asset library, leaves were added in sections by attaching the leaves onto a path drawn around the branches in a cluster. These leaves were given varying sizes and growth directions to add to the realism of the tree.

Figure 20; More paths and leaves added to the tree.

Figure 21; A greenhouse created in Maya.

The greenhouse was created using different polygons and shapes, this created an asset that has a traditional cottage garden aesthetic.

Figure 22; A raised bed created in Maya.

The raised bed was created using different-shaped cube polygon meshes, the edges of the pieces are beveled to give it a prestige and custom-built aesthetic.

Figure 23; A plant pot created in Maya.

The plant pot was created by sinking the face of a cylinder polygon and then adding beveled edges, this is now ready for textures to be added.

Figure 24; Climbing Ivy wall created in Maya.

The climbing ivy wall is intended to create boundaries, provide a privacy screen, and add an evergreen plant to the user’s garden, this can be used to create walled-off sections within the user’s gardens.

Figure 25; Roses brush asset in Maya.

The roses are part of the Maya brush assets but may be useful for users to create a thick ground cover with a perennial plant as a visual guide to view how a patch of soil may look with plants there.

3D Maya Assets Screen Captures

Figure 26; A video showing the 3D assets in Maya.

Maya UV Unmapping

The models will be UV unmapped to allow the polygons to be corrected and adjusted so that any textures applied will not be stretched or distorted in the next stage.

Figure 27; UV unmapping on Maya.
Figure 28; UV unwrapping the apple tree.

On models that used brush strokes from the Maya library, some adjustments were needed to UV unwrap. Initially, the brushes had to be converted to polygons to UV unwrap the shapes for exporting.

Figure 29; Converting brush strokes to polygons.

Figure 30; UV unwrapping the ivy.

Figure 31; UV unwrapping the hanging basket.

Substance Painter

After exporting from Maya as an OBJ file, the assets can now receive texture and colour. There are some limitations to this regarding foliage as there are not too many options available.

The greenhouse has a few possible options when it comes to texture, the users may want a traditional wooden cottage-style greenhouse, or the more commercially known aluminum framed greenhouse, both are explored in Substance Painter below.

Figure 32; importing the model into Adobe Substance Painter.
Figure 33; Experimenting with textures in Substance Painter.
Figure 34; Experimenting with textures in Substance Paiter.

Figure 35; Importing the apple tree into Substance Painter.

As there were limited options for foliage, the apple tree was given an autumnal leaf colour, as this created variation in the leaves as well as a better realistic visual compared to block green leaves.

Figure 36; Adding texture and color to the tree in Substance Painter

A wooden grain texture effect was added to the raised bed.

Figure 37; Importing the raised bed to Substance Painter
Figure 38; Adding texture to the raised bed.

Maya Adding Texture Map

The textures were added to the original model in Maya by assigning the material as Lambert, then choosing the file from Adobe Substance Painter and applying it to the model.

Figure 39; Importing the texture set into Maya.
Figure 40; Importing the texture set into Maya.
Figure 41; Importing the texture set into Maya.

Adobe Aero

The AR assets can now be viewed in Adobe Aero, this allows for the final stage of setting the correct size for the assets to appear in the live camera scene. A QR code is generated on the share option which can be used to view the assets live from a smartphone camera.

Figure 42; Importing the model to Adobe Aero.
Figure 43; Sharing the model as AR and generating a QR code.
Figure 44; Importing the model to Adobe Aero
Figure 45; Sharing the model as AR and generating a QR code.
Figure 46; Importing the model to Adobe Aero.
Figure 47; Sharing the model as AR and generating a QR code.
Figure 48; Importing the ivy into Adobe Aero.
Figure 49; Sharing the model as AR and generating a QR code.
Figure 50; Importing the model to Adobe Aero.
Figure 51; Sharing the model as AR and generating a QR code.

Live Camera Scene Testing

The video demonstrates the different AR assets in a live scene, showing their size and design variation, this will be useful for users to visualize how a plant or structure will appear in their garden.

Figure 52; Testing the VR in a live camera scene.

Software Testing and Complications

Figure 53; Refering to the Gantt chart to check task progress.

When looking at the Gantt chart, the tasks were completed on time and effectively except for the creation of the AR assets which took a significantly longer period due to software shortfalls and complications, some of these are explored further below.

Figure 54; The greenhouse was not sized correctly in Adobe Aero before sharing.

When testing the assets live it is important to size them correctly or they will not be realistic to the original vision, for example, the greenhouse above is far too small to create the correct visuals for the user.

Figure 55; Error when trying to export the ivy from Maya.

After multiple attempts to UV unwrap the ivy wall, it seemed that only one path within the group of plant stems would be available for adding texture in Adobe Substance Painter, therefore specific leaf and stem texture and colour could not be added, resulting in the ivy being solely one colour instead which was added in Maya instead.

Figure 56; Unsuccessful UV unwrapping means the model can’t be painted correctly.

After UV unwrapping the basket it seems that in Substance Painter only a small section could be coloured, this resulted in the basket being coloured in Maya instead.

Figure 57; Unsuccessful UV unwrapping means the model can’t be painted correctly.

Figure 58; The basket can only be placed on the ground, which is not its designed purpose.

The hanging basket is intended to hang from height, however, Adobe Aero only allows assets to be placed on the surface, meaning the basket can only be placed on the floor. Also, the size of assets can’t be adjusted in the live camera mode meaning that assets must be sized appropriately in Adobe Aero before sharing.

Garden Quest App Prototype with AR View

To the XD prototype, additional screens have been added to show different pathways that the user can take when selecting an AR asset. This now includes the live camera view of an asset being added to the scene.

Figure 59; Gardenquest app with additional screens for adding a VR asset.
Figure 60; Wireframe update for the app.

User Flows

The screens a user will see from left to right, showing the amount of steps needed to complete the action of adding an AR apple tree to a live scene, this is repeated further in the two photos below.

Figure 61; Adding an AR apple tree user flow

Figure 62; Adding an AR greenhouse user flow.

Figure 63; Adding AR climbing ivy user flow.

Garden Quest App Prototype

The link below will demonstrate the Garden Quest App with the different paths available for selecting, adding, and saving an AR scene.

https://xd.adobe.com/view/4f714775-f851-4c3a-9a2d-53ca6ae51746-1a22/screen/8520c877-09ec-4bd2-913e-7e7efc1edc1c

Further User Testing

The same testing group was used in the final prototype testing. The users were asked to use the app without instruction and make notes of any issues with navigating or app functionality.

One of the participants suggested rewards for creating engaging AR scenes that could have a ‘like’ button for other users on the community page to engage with. This would create brand trust and familiarity with users as most social media already have the ‘like and comment’ functions.

Forward-Thinking

Further ideas for developing Garden Quest include;

  1. Create 3D four-season assets, showing a change in colour and foliage based on the time of year
  2. Enable resizing of objects in the live camera and the ability to add more than one asset to a live garden scene at any one time.
  3. Add a plant and tool page within the Garden Quest community, this means users could swap excess plants or tools with each other locally.
  4. Create relationships with retailers and garden centers to provide an online shopping page.
  5. Create an in-app reward scheme for different garden achievements.
  6. Create merchandise such as garden DIY kits for beginners, tools, and accessories to promote the brand.

Ethics

Ethical guidelines can be located in the Research Proposal.

References

Online – The Green Planet AR Experience (https://thegreenplanetexperience.co.uk) Published January 2024 – Accessed 07/01/24

Online – Potioneer: The VR Gardening Simulator – Focus on Fun Games (https://www.youtube.com/watch?v=cu0CGMWqqqU) Published January 2017 – Accessed 25/01/24

Online – Viridi Steam Release Trailer – Ice Water Games (https://www.youtube.com/watch?v=5TK3SfJR8Gs&t=43s)

Online – Images for Prototype (https://www.shutterstock.com) Accessed 01/01/24

Online Journal – Growing Urban Health: Community gardening in South-East Toronto; Sarah Wakefield et al. Published 26 February 2007 (page 100) – Accessed 10/01/24

Adobe XD Icons Plug-In