After having read the design brief, I tackled the "sign petition" screen first as requested. So when tackling a feature set, I like to walk myself through a series of questions to make sure everything is aligning to the value prop of that particular screen.
I pick one feature, for example the summary explanation of the petition, why is it there? It's there to give information to the potential signer so they can make a judgement call on whether or not they want to support the cause. If you dig even deeper, you're really trying to provide something that moves users emotionally to support a cause.
After that I wrote a quick scenario. "Sally the surgeon is lying in bed with her cat. She's browsing Facebook on her phone before bed, and she sees a post about how "Cats are being tortured for their fur". It has an image, a title, a 2 line description, and the title and picture depict a cat being tortured. She looks at her cat lying next to her, feels empathetic, and feels compelled the save the other cats from torture, so she clicks through."
So using this scenario, and the value prop in my head, I went through the different features that already existed on the screen and double checked which ones I wanted to keep and then did a very quick wireframe of how I might lay it out. I did some thinking about whether or not I wanted a sign in button, what were the most compelling features that would make people want to click through, and also trying to address the issue that was in the brief around having extremely long petition titles.
So, this image on the far left, is what imagine users to see first. So thinking about the scenario of somebody who is already interested to some extent by the Facebook post, I imagined two types of users at this point, one person who has complete buy in and was so emotionally moved by the Facebook post that all they want to do is sign.
The second type of user to accommodate is the person that just wants to know a little bit more before they sign.
Keeping those in mind, I'm going to walk through the screen and logic behind why i laid out everything the way I did.
Obviously at the top is the logo for locational context, depending on the phone you're using, maybe the address bar doesn't exist.
Most compelling feature at the top is the large image. i think large images always are good at evoking emotion and human connection.
Then the organization or person you're petitioning - this is a lot smaller, almost took it out but then thought about how the organization you are petitioning might stoke some sort of fire in somebody
Then the actual title of the petition in pretty large type - for the user who is just there to sign and go, I was trying to create visual hierarchy where the eye is led from the image to the title, to the button, or even just the title and button. I also allowed a really large space here, and I know that there are possible issues with really long petition titles in other languages, so I literally tripled the current title and showed what it might look like if I had created some logic around shrinking down text with longer copy.
Then underneath that I have this progress bar. so I know this already exists on the Change.org website, but on the mobile website all you have is how many people signed the petition. Between the two I felt the progress bar was so much more powerful. The number of signers alone mean nothing, but in that context has a lot more likelihood of motivating somebody to do something.
Then the screen on the right is what it would look like if you scrolled downwards. This is obviously for that aforementioned user that just needs to know more which usually can be quite compelling. From the few petitions I looked at they spend a lot of time writing something really moving. Although I did find that the "letters" that they were sending were often duplicates of the title and felt like an afterthought. And it just felt like to much text.
Also one of the bigger decisions that I made, that I'm not sure what the repercussions are in the big picture user flow. But I did opt to remove the sign in button. I felt that asking the users to create an account or sign in was an added step of friction, that i know I have personal pain point for and have often just bailed because I just couldn't be bothered, or couldn't remember my password, or the authentication didn't work. I noticed that you might need a name and an address?
but I worked under the assumption of, if you could just sign your name, this would be a better experience for people to quickly sign.
So after that, I tackled the screen that immediately appears after signing a petition. I did a shorter version of this value prop, scenario making. What I concluded was that this page should reaffirm that you've done something good, and that the user should feel good that they've made a difference.
You want the user to be motivated in some way to share that good feeling.
This screen I actually had a much harder time with - I did a lot of explorations on how do you visualize change to somebody.
Sure you can show the progress bar and show that it has moved one signature more, but that would actually be demotivating because maybe you feel like you really haven't made a difference.
Would it be better to show the same data as percentage? Does knowing that you're 40% of the way there feel motivating in some way?
Also thought about messaging - I'm no copywriter, Imply that somebody is thanking you for something great, and that you really did make a difference.
First I'll talk about the messaging that I ended up with - again not a copywriter - but I think it hits the high points. You want to say, acknowledge them and tell them they've made a difference, and then encourage to continue making difference.
I started thinking about apps that had interactions that felt delightful, and created emotion that would motivate users. One of the good examples I thought of was on the lyft app. You know how when it comes time to pay, they have a little balloon man that gets happier and moves up as you tip more.