Green Spot

Mobile app

2024

A geo-location-based app focused on the theme of sustainability. It promotes local cafes and restaurants, along with popular landmarks by highlighting their ‘green’ practises.

Project Overview

A geolocated narrative mobile phone application that uses simulated geolocation data, mobile camera data and audio data.

Users are required to visit the 10 different locations selected for that level, and earn ‘green stars’ at each of the location to be rewarded exclusive vouchers and special offers at Melbourne’s local cafes and restaurants, which is redeemable at the end of the level. 

  • Figma (prototype), Adobe Illustrator, Adobe Stock

App Objectives

Visit 10 sustainability-driven locations to learn about businesses’ ‘green practises’

Support and promote local businesses through rewards and information

Entertain users with AR interactions and incentives to encourage eco-friendly tourism

Target Users

Melbourne locals and tourists who enjoys discovering newness in the city, especially individuals who supports local businesses.

User Aims:

→

→

→

Get rewards and discounts

Explore Melbourne inner-city

Connect with friends or themselves

1

Research

Melbourne city is celebrated for its multiculturalism, culinary scene and coffee culture.

Recently, there has been a noticeable emphasis on businesses’ corporate social responsibility as  public values around sustainability and ethics deepen.

Two focus group sessions, with three participants in each session, were held to understand user experiences with geo-location app and discover any pain points they have encountered

FOCUS GROUPS

↳

▶

▶

▶

INTERVIEW SAMPLE QUESTIONS

When was the last time you use used a geolocation app?

What did you like/dislike about it?

How was your experience with AR technology?

FINDINGS

↳

100%

used geolocation apps on a daily basis

67%

used geolocation apps for social and entertainment purposes

83%

found geolocated apps useful in discovering new places

33%

were shocked to experience AR technology during their shopping

Common User Needs

📍

📍

  • Clean and simple interface for easy navigation

  • Social feature to connect with family and friends

  • Discover new places through the app

2

PERSONA

Two personas were developed from the focus groups’ findings.

↳

SARAH JONES

LUCY LEE

↳

3

USER INTERACTION FLOW

FLOW CHART OF INTERACTIONS

↳

STORYBOARD

↳

4

WIREFRAMES & ITERATIONS

Low and high fidelity prototypes were developed based on the user interaction flow

WIREFRAME OF MAIN SCREENS

↳

HIGH-FIDELITY ITERATIONS

↳

LOCATION SPOTTED

Prototype 1.0

Problem from usability tests:

  • no back button available, can only proceed once the green star is clicked

Prototype 2.0

Problem solved:

  • ‘back’ button was added to the ‘location spotted’ screen

  • pop-up to confirm with user that they are wanting to exit when the ‘back’ button is clicked

TEXT-TO-SPEECH BUTTON

Prototype 1.0

Problem from usability tests:

  • text-to-speech button was only available on the introduction screens

Prototype 2.0

  • text-to-speech button was added to all the sustainability information screens that had the green star mascot to look like it is narrating the content

  • button also improves accessibility whilst enabling user to listen to the content while walking, so the information is not skipped - a main observation from the field test

Problem solved:

PROFILE

Prototype 1.0

Problem from usability tests:

  • profile was plain and visually unappealing

  • no option to ‘share’ profile - a suggestion from the field test

  • layout was inconsistent with elements not aligned appropriately and aesthetically on the screen

Prototype 2.0

  • profile shows an automatically created account for user so that they can start playing the game first, and verify their account to keep their progress in settings later on - ‘Green Spot ID’ to identify user

  • ‘Share to’ button was also added per field test feedback, as well as a QR code scanner to allow users to quickly add their ‘green friends’. 

Problem solved:

FAVOURITES

Prototype 1.0

Problem from usability tests:

  • no option to ‘save’ a location if a user found it interesting or wanted to look back at it later

Prototype 2.0

Problem solved:

  • ‘bookmark’ icon was added on the ‘green practises’ screen as this is the key information and the screen before the user returns to the map

  • each location are automatically ‘bookmarked’ (can remove this by clicking on the bookmark icon) which will show up in the profile under ‘favourites

Final Design

INTRODUCTION

Tutorial

  • tutorial appear automatically

  • simulated GPS location tracking

Simulated GPS location tracking

  • location pin appears

  • ‘nearby’ notification

SPOTTING GREEN STAR

  • notification to hint user to move around as the camera is a simulated feature

  • Spot ‘green star’ to reveal ingredient using AR

Simulated Camera / AR

Green Practises

  • information is automatically bookmarked

LEVEL COMPLETE!

Video

  • baking video is used as a loading screen

  • the virtual ingredients collected makes a real recipe

  • user can check their progress by clicking on the recipe button on the bottom right

  • the green star will be filled in once user has collected the respective virtual ingredient

Recipe Button

REDEEM REWARD

  • step-by-step tutorial to guide user to the rewards page after unlocking their voucher

Rewards button

Redeem

  • unique voucher code

  • notification to indicate reward has been activated and expiry countdown has started

PROFILE - LEVEL COMPLETED

Tabs

  • sliding animation when switching from ‘mission’ to ‘favourites’

Scroll

  • levels and favourited locations can be scrolled

SHARE

  • simulated scanning screen to scan QR code to quickly add ‘green friends’

Scan QR Code

  • unique QR code

  • sharing options available

  • notification to indicate it has been shared and/or image has been saved

Share To

REFLECTION

📌

Throughout the development process, I learnt to use variables in Figma to create a seamless experience, such as the green stars on the map changing into the icon of the ingredient collected at that location. I also tried to experiment with different animations where possible to increase interactivity, such as the sliding in of the QR code scanner screen, and notifications sliding down from the top of the screen. 

I think that the data gathered from the field tests, questionnaires and focus groups were helpful in aiding my decision-making when I update my app. 

Overall, the application functions well but I think that the interface and visual design of the app could be improved further if there was more time.