Status Update: Clickable Wireframes

Collaboration Workspaces Software Development
#1

Over the next three weeks we are building, and testing the user experience and user interface design for the app.

Goals:

• To develop a hi-fidelity prototype of their mobile application
• To test the prototype with users in order to fix any potential points of friction before the design goes into development

Programs used

• Interactive prototype (Figma and potentially also Protopie)
• Usability testing (Maze, Zoom, Google Meets)

Aspects to Consider

• The activist must be able to clearly find all information about the various projects so they can identify if it aligns with their values and if they have the resources to carry it out
• The activist must have clear instructions on how to carry out the video so the reviewing process is clear and legitimate
• The activist must understand that the incentives increase as they complete more steps in the project
• The validator must understand the impact of their actions in order to motivate them to keep contributing to the community
• Elements of gamification, with an emphasis on status and education, should be implemented
• The onboarding experience should be informative and also get users excited about the benefit it can bring to them and their communities

Deliverables

• Hi-fidelity Prototype and wireframes
• Style Guide
• Insights regarding usability testing and user feedback

Scope

• September 27 to October 1: Design of lo-fi wireframes, and execution of a first round of moderated and unmoderated usability testing
• October 3 to October 7: Iterations based on usability testing, development of hi-fidelity prototype, including development of style guide; second round of usability testing; further iterations based on usability testing.
• Should there be a need for further testing and iterations, there is a possibility to extend into the week of October 10-14.

Approach/Process:

  1. Empathize & Define: Already done in developing the project concept

  2. Ideate:
    • Sketches
    • Wireframes
    • User flows

  3. Prototype:
    • Multiple prototype iterations
    • An interactive prototype (Figma)

  4. Test:
    • Evidence of user testing and results
    • Evidence of implementation of user testing results or a plan for how to implement the results.

  5. Presentation:
    • Discuss process and recommendations
    • Discuss design decisions and iterations

Status of Mockup

30.9.2022

  1. Clickable Wireframes Activist View

  2. Clickable Wireframes Validator View

1 Like
:green_book: Climate Gains Tech Manual
#2

POINTS TO CONSIDER

  • The activist must be able to clearly find all information about the various projects so they can identify if it aligns with their values and if they have the resources to carry it out
  • The activist must have clear instructions on how to carry out the video so the reviewing process is clear and legitimate
  • The activist must understand that the incentives increase as they complete more steps in the project. Those who are proven to be trusted are up for first dibs on paid opportunities, field visits, and community incentives.
  • The validator must understand the impact of their actions in order to motivate them to keep contributing to the community
  • Elements of gamification, with an emphasis on status and education, should be implemented
  • The onboarding experience should be informative and also get users excited about the benefit it can bring to them and their communities
  • Validators need different rewards: Thanks for approving this action, OR, if they refuse - ‘thank you for signalling this and avoiding greenwashing.’

What to communicate to get users excited about the concept:

  • The current state of the art includes extremely high barriers to entry. This application cuts out the middle-man (the consultant who gets 20.000) and time taken by institutions. Currently funds are paid retroactively - so activists need 20.000, to invest in all the impact, and then they are reimbursed later, if it goes through. It is hard to measure the reduction of the emissions yourself. Process takes up to three years. Only people who are already wealthy who could afford to do it.

This app:

  • gets rid of the form, making sure that the money ends up in the hands of those who are actually doing the work.
  • allows users to A. stop money from going to greenwashing. B. have a positive impact for communities. C. ensure that money is going straight to climate action and not to middlemen.
  • limits barrier of education. Equipping communities, giving them access, to other options.
  • gives a sense of pride, accomplishment, power (over living conditions, over the future)

The target validator:

  • is mad that nothing is happening and that so many of these resources are going to scammers and greenwashers

-is someone rather young and well-meaning, more likely to be early adopters. Perhaps college students, genuinely want to make a change. They really worry about the future for their community - drought, changing climate. We need everyone in the planet to contribute.

The target activist:

  • wants alternate methods of making a living that will improve quality of life for their community and for the world’s climate goals
  • wants to help their community generate income. They care about making their communities more RESILIENT and changing the conditions so that the long-term threats are diminished. Helping communities survive and be more resilient in the long run. Building islands of resilience, where climate action becomes a legitimate economical route. Giving other prospects - both immediate and long-term.

Motivators for validators:

  • you reduce greenwashing, but also see the footprint reduction as a result of your actions
  • at the end, you can download a report about the status of the program - how many projects are ongoing, how far along is the program, how large is the impact in terms of emissions reductions or contributing to STG’s. You should be able to review the videos so you can trust the process. You can also see what others have validated. If there are question marks, etc. a video can be flagged. Payments would be blocked if a video is signalled as suspicious - admin would look at it.
  • Validators can do just one step of the process - no need to follow the whole process.
  • you don’t want to enable collusion but you want to make information available about how others did the project users know how to implement them.

Future considerations: people could offer donations for certain activities.

Payments:

  • the first payment unlocked on trust - video submitted first, validator says project makes sense. They get a small budget to do the essential to get that started. If they haven’t implemented it you are: 1. locked out of the program, or they have 30 days to do it and for validators to understand why it hasn’t been done yet, leading to course correction.

When opening the app for the first time:

Do you want to:

  • supply materials or services?
  • be an validator to reduce greenwashing
  • carry out actions?

Flow for the first-time activist:

  • onboarding screens

  • dashboard of all actions that have been pre-approved

  • action page: how much will you make, who is funding, timeline, video description, perhaps possible suppliers of materials and equipment needed. List of materials and equipment that would be needed and reviews (stars and comments) system of suppliers to know who is trusted. Breakdown of steps and funding for each step. Choose your action, choose your supplier (free field if they have someone else)

  • Apply for this

  • give permission for location

  • video recording instructions. Multiple questions to respond to - one video per question.

mapping: answer 1 done, answer 2, edit those videos or follow up, etc.

  • Video upload screen - with live questions

  • in order to send, we need to have sign up - Name and phone number and/or email

  • Confirmation screen - what’s next (staircase)

Flow for the activist who already has an account:

  • Sign in

  • Personalised dashboard: shows which projects you’ve applied for, what stage of their funding they’re at, whether or not the stages have been validated or not

  • Screen to unlock payment

  • Settings page (with video inbox)

Flow for first-time validators

  • onboarding screens, showing their potential impact

  • dashboard of actions needing approval

  • action page: how much will you make, who is funding, timeline, video description, perhaps possible suppliers of materials and equipment needed. List of materials and equipment that would be needed and reviews (stars and comments) system of suppliers to know who is trusted. Breakdown of steps and funding for each step. Choose your action, choose your supplier (free field if they have someone else)

  • Video review tips

  • Video screen - approve, reject, or request further information. Questions either to the project itself, or to a domain expert.

  • give permission for location

  • sign up

  • option to add values, types of initiatives, budget they feel comfortable approving, etc.

Flow for active validators:

  • Sign in

  • Personalised dashboard: your personal impact (how much bullshit they’ve busted and that impact), shows which projects they have validated, what stage of their funding they’re at, whether or not the stages have been validated or not

  • settings: video inbox; check their level and see which initiatives they can unlock at certain levels. Explore the ideas of leagues and education - ie gaining expertise on a certain kind of project, evaluating cookstoves for example, lands you on a leaderboard for that type of expertise. Also explore the idea of training - watch videos, get badges, that would help them on the leaderboard.

Flow for first-time suppliers:

Landing page

Link to the website where they can sign up to be a verified supplier

This leads to 30 wireframes in total.

1 Like
#3

first time activist:

If there are no actions available:

  • post about the needs in your local community

  • see what other similar communities ask for, so you can join up with them (new programmes are more effort, need minimum size).

sign-in:
Activists will also need to provide payment info.

Action Page:
This is longer and more specific than the other points. Tradeoff between “myspace” and “amazon” in how much structure we want to force on action pages. I guess this is one for user testing.

Love the “link up to an education thingy with badges (and more importantly, ongoing discussion fora)” and pointing to https://www.climate.university :slight_smile:

Broader thoughts:

Wondering if “Validator” is the right name. Following the Matt comment about “solving classes of problems” → Generalized problem: Third parties should be able to leave comments, including the ability to leave verifiable credentials on the project data entries (e.g. to authorize under some external programme on the proposed actions.).

Those can be activist validators for small projects, but could also be Governments approving actions e.g. for specific Carbon Markets can do so by leaving an official stamp (private key signature).

E.g. Gov could then also provide list of accredited keys (instead of orgs) and let them leave their stamps directly on the project (instead of emailing back and forth).

Not sure this is relevant for us, but it is for the UNDP Registry thing.

#4

Noted. This is probably for the next batch of wireframes though, no?

1 Like
#5

Some more detailed observations (small ones):

  • Please delete the word “offset” from your head and replace it with “reduce”. I think I’ve said that several times before. Offsetting is a very narrow frame of application and heavily criticized, inter alia by Vanessa. So the 270 tons CO2 on the first page are reduced, not offset.

  • “With every step you are paid a larger amount than before” => Makes it sound like a pyramid scheme and also not always true - Maybe just delete, as the next point explains it better? Every step unlocks a future opportunity, you need to complete some small steps before unlocking bigger opportunities.
    =>But they don’t get ever bigger over time.

  • Could you give me write access so I can double check all the numbers add up? The 350 kg co2 doesn’t match the 1670 EUR… 100 tCO2 per year and 3000 EUR would work.

  • I don’t understand how “have todays date available” is supposed to work. Didn’t we want to confirm timestamps by sending random phrases to be repeated on video?

  • I’m no big fan of the “download contract as .pdf”. Can’t we just go with an “accept terms & conditions” instead?

On the validator end, I like everything I can see so far, except again the carbon and money numbers being slightly off again :wink:

1 Like
#6

Ux test #1: Results for clickable wireframes version 1.0

What follows is a synthesis of main insights and things to modify from perspective of first batch of testers:

  • Sign-in should be moved to before recording/validating the video

  • Onboarding is successful, but could be lightened up (use of animations should help this)

  • Some users feel like maybe they’re not qualified, or that they would have to physically check the progress

  • People like the rewards and tutorials, but some users would be more motivated with monetary rewards

  • Flow is clear but time could be noted better. Also, consider a map view for the activist and rethink the document signing process. (perhaps only once it is validated and they would have to actually sign?)

  • Home screen should have access to rewards and tutorials rather than just in profile.

  • Badges are unclear, and people don’t know what the fist icon means

  • Question prompts could be clarified, also not all users like the obligation of video communication

  • Main takeaway: Users are skeptical about the security and would prefer to upload their ID - all testerssaid that they would be reassured and not deterred with more user identification.

Full affinity map available here.

1 Like
#7

ok @owen @matthias @OmaMorkie - the second iteration of the clickable wireframes is up

Validator : https://www.figma.com/proto/mnY8ouWK8J4l9n4A5RHpfL/Climate-Gains?node-id=216%3A3105&scaling=scale-down&page-id=1%3A12&starting-point-node-id=216%3A3105

Implementer: https://www.figma.com/proto/mnY8ouWK8J4l9n4A5RHpfL/Climate-Gains?node-id=5%3A20&scaling=scale-down&page-id=0%3A1&starting-point-node-id=5%3A20&show-proto-sidebar=1&hotspot-hints=0&hide-ui=1

2 Likes
#8

Here’s a random list of observations about and proposals for the general concepts and for the first iteration of the wireframes, as they are discussed above:

  • Keeping processes flexible. It seems that so far, no decision has been made about what the process should be in case there are delays in the project implementation. I think that decision does not have to be made now, or once and for all. The same applies to oter parts of a process. Rather, when the ClimateGains software potentially sees more widespread use as part of the UNDP platform later, the exact process for delays and for other details would have to meet requirements of the funders of the respective climate action.
      We can already prepare our software for that in a way that is both efficient and stays compatible with the UNDP ITMO platform, as follows: the UNDP ITMO software is form based and allows to piece together whole processes as a sequence of steps, most of which are then made up from form components. We want to re-use that part of the software. To do that, the ClimateGains app would automatically convert these forms to video prompts that activists answer while recording a new video; forms offer quite some clues for doing that, so I think it’s possible even though it has never been done before. Basically this lets people answer forms in a video rather than forcing them to fill a form. More fun, and more verifiable. I am not sure we’ll be able to implement that full process flexibility with the initial Prototype Fund funding, but I’ll take care to prepare the software for that extension as well as possible.
      This relates to:

  • Passing on a validation request. The general rule that any UI should always have an option to cancel the process should also apply inside the validation process. Currently the process is:

    To implement the “cancel” option here, in addition there should be an option called “pass”, for declining to take an action on this video. A validator might simply not feel comfortable to make any decision, and would want to leave the task to the next one.

  • Officials as validators. Here, the current proposal by Tim is:

    I agree that we should aim to keep the process flexible, allowing different types of validators with different tasks. However, I don’t think that private key signatures are a good solution for this, even if some UNDP Registry uses them currently in an e-mail based approval process. Private key signatures require the data to be signed to be available in a serialized form that never changes, as the signature becomes invalid with every such change. Both serialization and immutability are not well compatible with storing the data in a database of a web application that will receive frequent software updates, which might cause migration / adaptation of records already in the database.
      Instead, I propose to have verified validators: anyone claiming a role with special powers as a validator would need to have their identity and position verified. Similar to the blue checkmark system in Twitter. That account verification process might benefit from the private key based process outined by Tim above: users would prove their position by proving to possess the private key associated with their position. Which is done simply by signing a random string provided by the platform.

  • Hybrid forms / video prompts. Concerning this:

    While not proposing to implement this, I’ll note that the software architecture and its alignment with the form-based UNDP ITMO software would allow users to choose between answering questions in video vs. in a traditional form. (Of course, that choice cannot be given for questions to show the physical process, but it could make sense for questions to enter certain data, numbers etc…)

  • Physical checks on projects. Concerning this:

    Again, not proposing to implement this at this time, but: physical checks, or already just the “risk” for activists that they can happen, could be a major motivator to keep reporting truthful. That “risk” can be created easily by putting into the terms and conditions that project sites must be open during normal business hours for validators to physically visit the site. With a friend, I once thought about a similar scheme to replace the self-serving and much too costly organic certification scheme for small farms in low-infrastructure regions of the world.

  • Monetary rewards. I would guess that enough activists can be found who are motivated by the benefits of climate actions in their communities (improved schools, more trees etc.). With validators, that could be different. It’s rather tedious and uneventful work, done for free for projects that handle lots of money. A moderate compensation for their worktime, as a lump sum per decision, might be needed. Perhaps only after the first 10 or so decisions that were confirmed by others, to make sure the app rewards only skilled validators and sifts out the others. This relates to:

  • ID uploads. Simply uploading a scan or photo of a government-issued ID does not improve user identification, as people could simply upload an ID photo found online or created with Photoshop (or GIMP). As a solution, ID verification should undergo the same validation process that is applied to projects themselves. For example, a validator would compare an ID card photo with a video where the user holds up their ID card, repeats random phrases from the video prompt to exclude using pre-recorded material, and also tilts the ID card back and forth in the light or does other steps as needed to show that the ID card has all its anti-forgery measures in place.

    Alternatively, people might be challenged to sign a random string with their ID card’s associated digital signature. If that is practically possible depends on national ID card specifics, such as if users will need a card reader or not. It is also a nightmare to implement, as all existing ID card signature schemes use incompatible software, key infrastructure and so on. So I propose to start with the video verification of physical ID cards as outlined above.

Feedback on specifics in the second iteration of the wireframes will follow shortly.

#9

Thank you so much @matthias !

Re: Keeping processes flexible. Delays are a topic we have not discussed yet @nadia - that is on the agenda for a walk. For the points @matthias is making, I’m not fully sure what you mean by “form”. It sounds like you are applying a very specific definition?

First thoughts for delays in big government donor projects:

(Warning economic design nerd thread incoming) → At least under the current Swiss setup, delays have real financial and political consequences - Which is critical, as they also have real climatic consequences. Basically, goals are defined with a fixed deadline (first in 2025, next in 2030), so delays increase price per accountable reduction unit & increase likelyhood of missing the political goal.

Having established delays as real financial risks - Who is carrying that risk?
→ At least in my understanding of this weird fuckup neoliberal philosophy dominating the Swiss Discourse, this risk should be carried by gamblers (aka private investors), but made overall attractive by the government payment (i.e. gov to ensure highly profitable price for ITMOs, paid on delivery only.) The smaller the minimum viable unit of a bet (e.g. 1 school), the more likely we get risk-seeking bets, as people should only put into it what they are ready to lose, especially the first payment to a new activist is on trust only and will sometimes get stolen - but also establishes a contact that can generate a mutually profitable relationship.

Design for a marketplace where activists are rare and sought after i.e. a sellers market.

Re: Cancel - Agree in principle but don’t understand the difference between “cancel” and “pass/decline”.

Re: Keys and signatures: I tend to use these words as it’s literally the only cryptographic protocol I understand. Sorry me=noob… Any other form of online authentication can do the job.

Re: Hybrid Video prompt: Having both options is kind of standard on the TikToks & youtubes and Instagrammes and their FOSS clones out there. Should be possible to video or text reply to a post.

Physical Checks: Yes it would be nice if it could be combined with a nomad support program (e.g. collect rewards for on-site verification)

RE: ID: Government ID can sometimes be great for that, but only for people who have one. Too many people excluded by mandatory gov ID. Let’s try to make it expensive in terms of human attention needed, Turing-Testy etc. but not actually Sybil resistant. If we have cases of new signups running with the money, we always have a copy of their face from the intro interaction, so we can blacklist based on that. While I got strong opinions about Gov ID optional, I guess this will decided on a case-by-case basis…

1 Like
#10

It just refers to the HTML user interface elements for inputs. Single-line and multi-line text boxes to enter text and numbers, checkboxes, radiobuttons, dropdown, selectboxes and some other stuff. Together this is known as HTML form elements, or “forms”.

HTML forms mimick the forms people have to fill in on paper, which is of course not what we want. But the UNDP ITMO “backend platform” is built around creating forms out of form elements, and letting people fill that. In our call with the Italians, they referred to it as “like Google Forms on steroids”.

1 Like
#11

Mhm, so the “video form” fill in would be “paste link to video on hosting platform”? Or “Upload File”?
Probably both not really good for mobile workflows…

#12

Not at all what I was trying to confer :slight_smile: I’ll make an example:

Say, somebody configures a form in the ITMO software with three text fields, meant for activists to type in something: “project name”, “proposed budget” and “phase 1 deadline date”.

Our app would connect to the ITMO server and fetch that form’s definition, but present it in a totally different form. Namely, it would tell users to “tell us more about your project by recording a video, answering prompts that appear on the screen while you record”. Then users hit “record video”, and see the first prompt “Please tell us your project name”. They tell the project’s name, and either tap “next question” or see the next question automatically: “Please tell us the proposed budget”. And so on. When they finish the video, it is automatically uploaded as seen in the current wireframe workflows.

1 Like
#13

Ok guys here is a video showing the entire flow of the app for both people who implement actions as well as for those who review the videos. I thought it might be helpful for us to catch any issues/ make improvements: Nextcloud

Ping @OmaMorkie @owen @matthias

#14

Ok guys here is the updated password-protected video with some additional wireframes that were missing in it. Password sent in a dm to the team.

1 Like
#15

First some comments as closure for the discussion above, nothing essential here:

There is no difference. The “Pass” or “Decline” button would implement the “cancel” option in the validation process. Clarified in my original post above now.

Understood. Good to know that there is no technical requirement to interface with some kind of UNDP key storage or similar obscure infrastructure :face_with_hand_over_mouth:

Also understood. The interesting point here for me is that you use social media platforms as the paradigm for the software we’re building. So we want to build a data entry / data management software in functionality, but in the style of free-form multimedia-enabled communication software. Will keep that in mind for the further software design.

Maybe I was too quick equating “ID” with “government-issued ID” and you and Nadia were planning to also allow any kind of ID? I would actually like that approach. Driver’s license, bank account, testimony of a friend who already went through account verification etc. – anything goes. Or even, in Eritrea where birth registers are a matter of the church, it would mean that a new user goes to the local church and lets the pastor or church elders tell on camera that yes, this is person so-and-so and they belong to the local community and church.

This kind of anything-goes approach would have to rely not on formal process, but on experienced validators who know what kind of user verification is enough for which case. Interestingly, this kind of freeform process becomes only possible (“thinkable”) once having done away with forms, as forms always call for the same specific information from everyone. The first hidden potential of a software based around video interaction.

2 Likes
#16

Now some actual feedback for the latest interface walkthrough video, as posted by Nadia above:

Finishing the badge system. The leaderboards and badges system, shown at 2:48 in the video, does not feel ready to me … I don’t really understand it, or feel motivated by it. We could of course implement it like that, but if actual use of that implementation then reveals that users are confused or just not motivated by that system, any other implementation is about the same considerable effort again.

I do understand and support the idea of using gamification to motivate validators. I’m just saying that the screens for that portion of the interface are probably meant as a draft of that idea, not yet ready for implementation?

If you already did user testing with a UI prototype of that badge and leaderboard system, forget what I said above of course. Otherwise, here are some questions that might help with finishing this part of the interface:

  1. Where can users find out what that “next level of incentives” is that is promised them with “9 more [badges] to go until you reach the next level of incentives”?

  2. The sentence “You already earned 16 badges! You only have 9 more to go until …” seems to imply that every badge is “worth” the same amount in the system. That is not what one typically associates with a badge, rather thought to be kind of label of recognition that is not directly or quantitatively comparable with other badges. So maybe the concept of “reputation points” or “experience points” is a better fit then?

    A good source of inspiration would be the StackOverflow reputation system – for example, look at my user profile overview page on StackOverflow. Incidentally, they have both reputation points and badges. Reaching a certain amout of reputation points gives you additional privileges, but there is no such effect of badges. For that reason, badges have always been uninteresting to me there.

  3. The “Leaderboards” screen shown in the video implies that the software tries to motivate people to climb on these leaderboards. At the same time, with some thought people will understand that not everyone can be at or near the top of them at the same time, and that this is a silly system to motivate people by appealing to a rather basal competitive nature. There are probably better systems to motivate people. Maybe look into game theory, behavioral economics etc… A system that encourages collaboration rather than competition would also fit better with the huge task of collaboratively saving the climate.

User accounts for multiple roles. Just for clarification, I assume that the same user account may be used to access both the activist, validator and supplier interfaces, if a user chooses to have multiple roles?

#17

This is correct.

This was a helpful reminder, will dig into it.

Agreed. I think of this process (the use of climate gains and the impact generated) as getting onto a common journey. @OmaMorkie and I have been discussing some ideas for fun common journey goals. Whether it is an annual festival or sailboats that stop at harbours and people can join for sections of the trip. Or something else. But I do believe it needs to be social - and that the badges then are connected to making that thing happen and enjoying the fruits of those efforts.

2 Likes
#18

I have to calm myself from going off into UX wilderness when I come across articles like this one :)) This Smart Vest Lets the Deaf 'Hear' With Their Skin

2 Likes
#19

Literally my academic background.

Key takeaway: Build a generic easy to edit system, then experiment a lot.

But also, I have strong opinions about all the nudges and mechanics, so will spent obsessive weeks of fine tuning when we actually have to do this for a few hundret players… (next year i hope)

Also, I’ve seen amazing implementations of complex but intuituitive badge systems (with chatbots) on discourse. In principle we could use the forum as initial badge gaining and track keeping tool?

1 Like
#20

Good fit then. Will go with what you and Nadia come up with, just adding a tech perspective to keep things simple and within budget.

Generic and adaptable: sounds reasonable, and good to know that is a requirement. So I propose for this set of features:

  1. For now we’ll wait with implementing any of the badges or leaderboard stuff.

  2. @nadia (with @OmaMorkie) will come up with a refined proposal for how the initial gamification system could look like. Tech perspective: try to stick to one set of concepts and use it to the fullest. So either badges, or reputation points, or something else, but not all three. Less feature complexity keeps annoyances from bugs, data migration etc. down the line to a necessary minimum.

  3. We implement a generic, adaptable gamification / user motivation system that provides the proposed initial set of gamification features from the last step. Editing will be via config files, and may need some coding – so it needs developer time, but will be much faster that always coding a new gamification feature set from scratch.

I think you can use it for experiments to see what motivates users in the target groups. But since we don’t have login integration between the forum and the app, actually transferring badges etc. collected in the forum to the app will not work. (Implementing login integration does not seem like a good idea since the forum already has login integration with the other Edgeryders Communities forum sites, which is so unrelated to the Climate Gains app that it seems a far fetched idea to try and integrate these. It’s just not worth the technological debt of being tied into a Discourse login system.)

2 Likes