[User Profile - Design Implementation] Add Accomplishment Badges

[ri0nardo]

Quick summary:

As we want to build upon gamifying water the trees, adding achievements per task completed promotes users to continuing using the application to reach certain milestones. One goal is to target a younger audience which loves the idea of playing a game. As the achievements are tied to the user, it made sense to put it in the profile section.

Issues:

Current @zoobot is working on building the logic for achievements, and once that is complete, we will need to have a few types of reachable badges for users to test out. I am not sure if the MVP is going to be attached to the same location as the profile or a separate webpage to begin with. I don't see this as a high priority item, as the profile itself is at a rough state.

Get Started:

Get started with our onboarding, https://github.com/waterthetrees/waterthetrees/wiki/Onboarding and read through the epic for relevant details of this ticket. https://github.com/waterthetrees/wtt_front/issues/433

Resources:

• Epic discussion https://github.com/waterthetrees/wtt_front/issues/635
• Design Figma: https://www.figma.com/file/5C3v1LUNwMPQy9JOgnKEtr/Water-the-Trees?node-id=1355%3A9085

New Achievements Tab Design:

Past Summary

See link to doc of names https://docs.google.com/document/d/1yg205GcgpGWbcCtSHFq0b-iF7eHtyvyzXxaWmQY-kJ8/edit?usp=sharing

List badge types to get an idea of how many to include Badges for individuals, organizations, Badges to be laid out in a 2D tree elevation where achievements begin as a tree sapling to when more achievements are obtained the tree grows. Achievements can branch out to other sections with the tree branch. Don't know how that would work when the tree grows with an achievement, but is fun. Also users can see all achievements, but will be locked or unknown. Also there can be underground root achievements (Dark badges, hidden achievements) When the tree grows birds and squirrels will be presents and when going down moles and worms will be present. New idea for background to be the mapbox image of the world either stationary or rotating slowly. -This is similar to a family tree or language tree EX: https://britroyals.com/royaltree.asp EX: https://www.theguardian.com/education/gallery/2015/jan/23/a-language-family-tree-in-pictures

-Tree shaped badge, more of the leafage of a tree -Badges could be inspired by national park pins/patches -Eagle Scout patches -Any sort of collectables See Duolingo for badges or anything related. Different tiers of badges -Bronze, Silver, Gold, Platinum, Diamond, Tree Master Badge names to be tree related. Ex: Arborist Badge, Golden Pail - For watering 1000 trees?, Golden Shovel - dig out 100 tree stumps. I like the idea of tree names sort of relate to the objective. See link to minecraft achievements https://minecraft.fandom.com/wiki/Achievement Mini badges on user profiles, on organization profiles

• Design rare pixel art badge

Tree watering badge Tree care badge Adoption Badge 1 year anniversary badge Join a Team/Organization 1st friend badge

• [x] Begin Adventure - Create an account
• [x] Acquired - Adopt your first tree
• [x] Arborist - Perform maintenance on a tree
• [x] Tree surgeon - Brace, Stake, water, weed, prune and mulch a tree during a visit.
• [x] Tree hugger - adopt 10 trees
• [x] Golden pail - water 100 trees
• [x] Golden shovel - dig out 100 tree stumps
• [x] Am I in California? - Adopt a palm tree

[zoobot]

These are a lot of great ideas!! Let's do this asap!!

[ri0nardo]

@zoobot started a mock up of the achievements. I wanted to start small since alot can be added later on. What do you think of the design and approach? I am currently using the generation art for the little image since its quicker to work that way.

[ri0nardo]

[ri0nardo]

Set the locked badges grayscale.

[ri0nardo]

Ready to build.

[ri0nardo]

will redesign to fit into the user profile under the new tab.

Will be part of milestone 2 or 3 for the time being.

[ri0nardo]

adding achievements onto the user profile. @zoobot do you think this is good enough for an MVP? I dont want to go overboard on the achievements to begin with. If you want have more ideas for achievements can you document them?

The graphic is just AI generated. I had the idea to have a contest for child to draw up graphics that we can use per achievement. (we could just use that as an idea) The graphic can also be more of a trophy system. I haven't settled on any idea currently.

[zoobot]

Looks great!! Why does the AI have such feelings about the arborist tho?

I think the city probably digs stumps out with a stump grinder. What a tough job to dig out stumps with a shovel. I've tried it and it is serious manual labor.

Here's a list of what

• [ ] Liked first tree
• [ ] Found tree sprite
• [ ] Watered a tree
• [ ] Mulched a tree
• [ ] Weeded a tree
• [ ] Staked a tree
• [ ] Pruned a tree
• [ ] Adopted a tree
• [ ] Planted a tree

Add more as we think of them?