Green Spot
[UX/UI Design]
[Geo-located AR Mobile Game] [2024]
Overview
A narrative-driven mobile game using simulated geolocation, AR, camera, and audio, where users explore ten Melbourne’s curated spots, collect ‘green stars,’ and unlock rewards while discovering sustainability initiatives.
A narrative-driven mobile game using simulated geolocation, AR, camera, and audio, where users explore ten Melbourne’s curated spots, collect ‘green stars,’ and unlock rewards while discovering sustainability initiatives.
Problem
Melbourne’s cafés, restaurants, and landmarks embrace sustainability, but users often overlook it — this project engages and educates through interactive experiences.
Softwares Used
Figma
Adobe Stock
Adobe Illustrator
Theme
Sustainability
Food
Project Duration
12 weeks
Stage 01 :
Who we are designing for
I used focus groups to uncover user experiences with geo-location apps and AR, creating personas and storyboards to visualise interactions and guide improvements.
"I use geolocation apps every day, like 'PTV' when I had to catch the train this morning to go to class."
"I like geolocation apps because I can connect with my friends and discover new places on Instagram."
"I have tried AR technology with Pokémon Go. I am very introverted, and this mobile game helped me to get outside to socialise."
"The geolocated apps I use are pretty simplified and easy to navigate. They look the same as every other map."
"I usually find cafes on my Instagram explore page, check the tagged location for details, and if it looks appealing, I add them to my visit list."
"I use geolocation apps every day, like 'PTV' when I had to catch the train this morning to go to class."
"I like geolocation apps because I can connect with my friends and discover new places on Instagram."
"I have tried AR technology with Pokémon Go. I am very introverted, and this mobile game helped me to get outside to socialise."
"The geolocated apps I use are pretty simplified and easy to navigate. They look the same as every other map."
"I usually find cafes on my Instagram explore page, check the tagged location for details, and if it looks appealing, I add them to my visit list."
"I use geolocation apps every day, like 'PTV' when I had to catch the train this morning to go to class."
"I like geolocation apps because I can connect with my friends and discover new places on Instagram."
"I have tried AR technology with Pokémon Go. I am very introverted, and this mobile game helped me to get outside to socialise."
"The geolocated apps I use are pretty simplified and easy to navigate. They look the same as every other map."
"I usually find cafes on my Instagram explore page, check the tagged location for details, and if it looks appealing, I add them to my visit list."
"I use geolocation apps every day, like 'PTV' when I had to catch the train this morning to go to class."
"I like geolocation apps because I can connect with my friends and discover new places on Instagram."
"I have tried AR technology with Pokémon Go. I am very introverted, and this mobile game helped me to get outside to socialise."
"The geolocated apps I use are pretty simplified and easy to navigate. They look the same as every other map."
"I usually find cafes on my Instagram explore page, check the tagged location for details, and if it looks appealing, I add them to my visit list."
[Focus Group Interview Results]
100%
83%
67%
used geolocation apps on a daily basis
found geolocated apps useful in discovering new places
used geolocation apps for social and entertainment purposes
[Key Findings]
Clean and simple interface for easy navigation
Social feature to connect with family and friends
Discover new places through the app
[Common User Needs from Qualitative Analysis]
Target Users
Melbourne locals and tourists aged 18–40 who enjoy uncovering new city experiences and actively supporting local businesses.
How the User Interacts
Visualising the user journey through storyboards and flow chart of interactions to reveal how the experience unfolds.
Storyboard of the User Journey
Flowchart of Interactions
Storyboard of the User Journey
Flowchart of Interactions
Storyboard of the User Journey
Flowchart of Interactions
Storyboard of the User Journey
Flowchart of Interactions
Storyboard of the User Journey
Flowchart of Interactions
Storyboard of the User Journey
Flowchart of Interactions
Storyboard of the User Journey
Flowchart of Interactions
Storyboard of the User Journey
Flowchart of Interactions
Stage 02 :
Design development
Turning insights into wireframes and prototypes, then refining them through observed behaviours and usability-test feedback to enhance clarity, flow, and usability.
[Wireframe of Main Screens]
Hi-Fidelity Iterations
I conducted field testing on Prototype 1.0, gathering insights through pre- and post-test forms, observation, and participant feedback.
Using qualitative analysis and Jakob Nielsen’s 10 Usability Heuristics, I translated these findings into UX-driven refinements that shaped Prototype 2.0.
Prototype 2.0
The ‘back’ button was added to the ‘location spotted’ screen
Pop-up to confirm with the user that they want to exit when the 'back' button is clicked
[Prototype 2.0]
[Prototype 2.0]
Prototype 1.0
No back button available, can only proceed once the green star is clicked
[Prototype 1.0]
Problem from Usability Tests:
LOCATION SPOTTED
[Green Spot 1.0 vs 2.0]
Prototype 2.0
Added text-to-speech to all sustainability screens, enabling mascot narration
It enhances accessibility and on-the-go listening, fixing a usability issue where users skipped the content - field test observation
[Prototype 2.0]
[Prototype 1.0 & 2.0]
Prototype 1.0
Text-to-speech button was only available on the introduction screens
[Prototype 1.0]
TEXT-TO-SPEECH BUTTON
[Green Spot 1.0 vs 2.0]
Problem from Usability Tests:
Prototype 2.0
Auto-generated Green Spot IDs enable instant play, and circular level icons improve visual clarity.
A “Share to” button and QR code scanner were added based on field-test feedback to make adding ‘green friends’ faster and easier.
[Prototype 2.0]
[Prototype 2.0]
Prototype 1.0
[Prototype 1.0]
PROFILE
[Green Spot 1.0 vs 2.0]
Problem from Usability Tests:
Visually unappealing; the layout was inconsistent, with elements misaligned
No option to ‘share’ profile - a key suggestion from the field test to connect with friends and family
Prototype 2.0
Bookmark icon added to 'Green Practices' to flag key information before returning to the map
Locations auto-bookmarked in favourites, with the option to remove via the icon, supporting easy revisits and user control
[Prototype 2.0]
[Prototype 2.0]
Prototype 1.0
Users can’t save interesting locations, limiting their ability to revisit favourites and reducing engagement
[Prototype 1.0]
FAVOURITES
[Green Spot 1.0 vs 2.0]
Problem from Usability Tests:
Prototype 2.0
The ‘back’ button was added to the ‘location spotted’ screen
Pop-up to confirm with the user that they want to exit when the 'back' button is clicked
[Prototype 2.0]
[Prototype 2.0]
Prototype 1.0
No back button available, can only proceed once the green star is clicked
[Prototype 1.0]
Problem from Usability Tests:
LOCATION SPOTTED
[Green Spot 1.0 vs 2.0]
Prototype 2.0
Added text-to-speech to all sustainability screens, enabling mascot narration
It enhances accessibility and on-the-go listening, fixing a usability issue where users skipped the content - field test observation
[Prototype 2.0]
[Prototype 1.0 & 2.0]
Prototype 1.0
Text-to-speech button was only available on the introduction screens
[Prototype 1.0]
TEXT-TO-SPEECH BUTTON
[Green Spot 1.0 vs 2.0]
Problem from Usability Tests:
Prototype 2.0
Auto-generated Green Spot IDs enable instant play, and circular level icons improve visual clarity.
A “Share to” button and QR code scanner were added based on field-test feedback to make adding ‘green friends’ faster and easier.
[Prototype 2.0]
[Prototype 2.0]
Prototype 1.0
[Prototype 1.0]
PROFILE
[Green Spot 1.0 vs 2.0]
Problem from Usability Tests:
Visually unappealing; the layout was inconsistent, with elements misaligned
No option to ‘share’ profile - a key suggestion from the field test to connect with friends and family
Prototype 2.0
Bookmark icon added to 'Green Practices' to flag key information before returning to the map
Locations auto-bookmarked in favourites, with the option to remove via the icon, supporting easy revisits and user control
[Prototype 2.0]
[Prototype 2.0]
Prototype 1.0
Users can’t save interesting locations, limiting their ability to revisit favourites and reducing engagement
[Prototype 1.0]
FAVOURITES
[Green Spot 1.0 vs 2.0]
Problem from Usability Tests:
Prototype 2.0
The ‘back’ button was added to the ‘location spotted’ screen
Pop-up to confirm with the user that they want to exit when the 'back' button is clicked
[Prototype 2.0]
[Prototype 2.0]
Prototype 1.0
No back button available, can only proceed once the green star is clicked
[Prototype 1.0]
Problem from Usability Tests:
LOCATION SPOTTED
[Green Spot 1.0 vs 2.0]
Prototype 2.0
Added text-to-speech to all sustainability screens, enabling mascot narration
It enhances accessibility and on-the-go listening, fixing a usability issue where users skipped the content - field test observation
[Prototype 2.0]
[Prototype 1.0 & 2.0]
Prototype 1.0
Text-to-speech button was only available on the introduction screens
[Prototype 1.0]
TEXT-TO-SPEECH BUTTON
[Green Spot 1.0 vs 2.0]
Problem from Usability Tests:
Prototype 2.0
Auto-generated Green Spot IDs enable instant play, and circular level icons improve visual clarity.
A “Share to” button and QR code scanner were added based on field-test feedback to make adding ‘green friends’ faster and easier.
[Prototype 2.0]
[Prototype 2.0]
Prototype 1.0
[Prototype 1.0]
PROFILE
[Green Spot 1.0 vs 2.0]
Problem from Usability Tests:
Visually unappealing; the layout was inconsistent, with elements misaligned
No option to ‘share’ profile - a key suggestion from the field test to connect with friends and family
Prototype 2.0
Bookmark icon added to 'Green Practices' to flag key information before returning to the map
Locations auto-bookmarked in favourites, with the option to remove via the icon, supporting easy revisits and user control
[Prototype 2.0]
[Prototype 2.0]
Prototype 1.0
Users can’t save interesting locations, limiting their ability to revisit favourites and reducing engagement
[Prototype 1.0]
FAVOURITES
[Green Spot 1.0 vs 2.0]
Problem from Usability Tests:
Prototype 2.0
The ‘back’ button was added to the ‘location spotted’ screen
Pop-up to confirm with the user that they want to exit when the 'back' button is clicked
[Prototype 2.0]
[Prototype 2.0]
Prototype 1.0
No back button available, can only proceed once the green star is clicked
[Prototype 1.0]
Problem from Usability Tests:
LOCATION SPOTTED
[Green Spot 1.0 vs 2.0]
Prototype 2.0
Added text-to-speech to all sustainability screens, enabling mascot narration
It enhances accessibility and on-the-go listening, fixing a usability issue where users skipped the content - field test observation
[Prototype 2.0]
[Prototype 1.0 & 2.0]
Prototype 1.0
Text-to-speech button was only available on the introduction screens
[Prototype 1.0]
TEXT-TO-SPEECH BUTTON
[Green Spot 1.0 vs 2.0]
Problem from Usability Tests:
Prototype 2.0
Auto-generated Green Spot IDs enable instant play, and circular level icons improve visual clarity.
A “Share to” button and QR code scanner were added based on field-test feedback to make adding ‘green friends’ faster and easier.
[Prototype 2.0]
[Prototype 2.0]
Prototype 1.0
[Prototype 1.0]
PROFILE
[Green Spot 1.0 vs 2.0]
Problem from Usability Tests:
Visually unappealing; the layout was inconsistent, with elements misaligned
No option to ‘share’ profile - a key suggestion from the field test to connect with friends and family
Prototype 2.0
Bookmark icon added to 'Green Practices' to flag key information before returning to the map
Locations auto-bookmarked in favourites, with the option to remove via the icon, supporting easy revisits and user control
[Prototype 2.0]
[Prototype 2.0]
Prototype 1.0
Users can’t save interesting locations, limiting their ability to revisit favourites and reducing engagement
[Prototype 1.0]
FAVOURITES
[Green Spot 1.0 vs 2.0]
Problem from Usability Tests:
Stage 03 :
Final Design
At the final iteration, I tested the prototype with a second focus group to assess the user experience. Their insights shaped future design recommendations.
WELCOME TO GREEN SPOT
Tutorial
Tutorial appears automatically
Simulated location tracking
Simulated location tracking
Location pin appears
'Nearby' notification
Key Features:
SPOTTING GREEN STAR
Simulated camera / AR
Notification prompting users to move around
Spot the 'green star' to reveal the ingredient in AR
Green Practices
Information is automatically bookmarked
Key Features:
LEVEL COMPLETED
Video element
Baking video is used as a loading screen
Recipe button
Progress is viewable via the bottom-right recipe button
The green star fills after the ingredient is collected.
Key Features:
REDEEM REWARD
Rewards button
Tutorial guides users to the rewards page after they unlock a voucher
Redeem function
Users receive a unique code to redeem the reward
Notification indicates the reward is active and the expiry countdown has begun
Key Features:
PROFILE - LEVEL COMPLETED
Tabs
Sliding transition between ‘Mission’ and ‘Favourites'
Scroll
Scroll through levels and favourited locations
Key Features:
SHARE WITH FRIENDS
Scan QR code
Simulated QR scanning screen to quickly add friends
Share to
Unique QR code with sharing options; notification confirms share or save
Same share feature on ‘Green Leaderboard’ to invite friends
Key Features:
WELCOME TO GREEN SPOT
Tutorial
Tutorial appears automatically
Simulated location tracking
Simulated location tracking
Location pin appears
'Nearby' notification
Key Features:
SPOTTING GREEN STAR
Simulated camera / AR
Notification prompting users to move around
Spot the 'green star' to reveal the ingredient in AR
Green Practices
Information is automatically bookmarked
Key Features:
LEVEL COMPLETED
Video element
Baking video is used as a loading screen
Recipe button
Progress is viewable via the bottom-right recipe button
The green star fills after the ingredient is collected.
Key Features:
REDEEM REWARD
Rewards button
Tutorial guides users to the rewards page after they unlock a voucher
Redeem function
Users receive a unique code to redeem the reward
Notification indicates the reward is active and the expiry countdown has begun
Key Features:
PROFILE - LEVEL COMPLETED
Tabs
Sliding transition between ‘Mission’ and ‘Favourites'
Scroll
Scroll through levels and favourited locations
Key Features:
SHARE WITH FRIENDS
Scan QR code
Simulated QR scanning screen to quickly add friends
Share to
Unique QR code with sharing options; notification confirms share or save
Same share feature on ‘Green Leaderboard’ to invite friends
Key Features:
WELCOME TO GREEN SPOT
Tutorial
Tutorial appears automatically
Simulated location tracking
Simulated location tracking
Location pin appears
'Nearby' notification
Key Features:
SPOTTING GREEN STAR
Simulated camera / AR
Notification prompting users to move around
Spot the 'green star' to reveal the ingredient in AR
Green Practices
Information is automatically bookmarked
Key Features:
LEVEL COMPLETED
Video element
Baking video is used as a loading screen
Recipe button
Progress is viewable via the bottom-right recipe button
The green star fills after the ingredient is collected.
Key Features:
REDEEM REWARD
Rewards button
Tutorial guides users to the rewards page after they unlock a voucher
Redeem function
Users receive a unique code to redeem the reward
Notification indicates the reward is active and the expiry countdown has begun
Key Features:
PROFILE - LEVEL COMPLETED
Tabs
Sliding transition between ‘Mission’ and ‘Favourites'
Scroll
Scroll through levels and favourited locations
Key Features:
SHARE WITH FRIENDS
Scan QR code
Simulated QR scanning screen to quickly add friends
Share to
Unique QR code with sharing options; notification confirms share or save
Same share feature on ‘Green Leaderboard’ to invite friends
Key Features:
WELCOME TO GREEN SPOT
Tutorial
Tutorial appears automatically
Simulated location tracking
Simulated location tracking
Location pin appears
'Nearby' notification
Key Features:
SPOTTING GREEN STAR
Simulated camera / AR
Notification prompting users to move around
Spot the 'green star' to reveal the ingredient in AR
Green Practices
Information is automatically bookmarked
Key Features:
LEVEL COMPLETED
Video element
Baking video is used as a loading screen
Recipe button
Progress is viewable via the bottom-right recipe button
The green star fills after the ingredient is collected.
Key Features:
REDEEM REWARD
Rewards button
Tutorial guides users to the rewards page after they unlock a voucher
Redeem function
Users receive a unique code to redeem the reward
Notification indicates the reward is active and the expiry countdown has begun
Key Features:
PROFILE - LEVEL COMPLETED
Tabs
Sliding transition between ‘Mission’ and ‘Favourites'
Scroll
Scroll through levels and favourited locations
Key Features:
SHARE WITH FRIENDS
Scan QR code
Simulated QR scanning screen to quickly add friends
Share to
Unique QR code with sharing options; notification confirms share or save
Same share feature on ‘Green Leaderboard’ to invite friends
Key Features:
Stage 04 :
Reflection
At the final iteration, I tested the prototype with a second focus group to assess the user experience. Their insights shaped future design recommendations.
During development, I used Figma variables to create seamless interactions, like transforming green stars into collected ingredient icons, and experimented with animations, QR scanner slides and notifications drop, to enhance interactivity.
Insights from field tests, questionnaires, and focus groups informed my design decisions and updates. Overall, the app functions well, though the interface and visual design could be further refined with more time.