Prototype Iteration 2 (of 3) for Cryptoloji

michellenebiolo commented 8 years ago

Due Thursday, Feb. 18th by 10 am PT (7 pm CET) Hoping for feedback/approval by end of Thursday

Adding @Giorgio-Olivero and @abusedmedia to make sure they are in the loop.

OpenMatt commented 8 years ago

Next step: @lovegushwa let's map out next steps on approval process.

Giorgio-Olivero commented 8 years ago

@cassiemc prototype test recap info:

Github page where we post the current issues: https://github.com/todotoit/cryptoloji/issues

Notes to the current prototype:

_mobile only _
benchmark devices: iOS9 (iPhone 5 or 6) / Android 5.x (tested on OnePlusOne and Nexus5). It does work also elsewhere but there could be minor/major issues that we're already knowledgeable about and that will be fixed next week.
the current 'share screen' experience needs to be redesigned, yesterday we ran 5 users test that highlighted a problem with that view. IT's too complex, we're working on it in order to find a solution to the unusual UX pattern of double-sharing (link to the message + cipher key).
there's no backend, so all the share buttons and links are just placeholders
onboarding animation sequence: will be improved next week (designwise and conceptwise)
the landing page will allow users to bypass onboarding and go straight to encryption, after the first visit to the website (we'll use cookies)
there's no Captcha implementation yet
there aren't any of the required security checks (e.g. no JS/HTML/URLs in the input message, that check will be made by the backend so it cannot be implemented yet in the UI/UX)
the emoji list is not in the right order, both in the 'more emoji' panel and in the readymade selector
the emoji count will be decreased, we also need to remove all the similar looking ones (like the two hourglasses, the violin and the guitar, etc)

Attached:

wireframe for the 3 possible landing pages ('normal' homepage / landing from Mozilla's newsletter / or directly from a user-generated message)
wireframe with the steps of the encrypted message lettering animation. The idea is to mirror the cleartext input message with the letters in the blue boxes and then substitute them with the chipered emojis. Hope the storyboarded sequence is clear.

Prototype available here: http://el.s.todo.to.it/cryptoloji/0428/

160218_wireframe_mobile_version_test_animation.pdf 160218_wireframe_mobile_version_landing pages.pdf

OpenMatt commented 8 years ago

thanks @Giorgio-Olivero and @michellenebiolo !
@lovegushwa : next steps for us: deliver feedback for next and final interation.
@lovegushwa let's make sure we have a clearly documented plan here for who needs to provide feedback, when, how, etc. You and I can touch base on that today.

OpenMatt commented 8 years ago

Next steps

[ ] Brand feedback (@lovegushwa)
[ ] Copy feedback ( @HPaulJohnson @KevZawacki )
[ ] General UX / experience feedback ( collecting various and sundry. but decider = @lovegushwa . With help from: @cassiemc can you potentially help here?)

xmatthewx commented 8 years ago

This is great! A few bits of feedback below. Hope some it is helpful...

Key Users probably need some info on the Key earlier in the experience.

"Pick a Key to scramble your message. Share the key secretly with anyone you want to unlock it."

Message box labels These could be optimized to clarify.

~~Your Message~~ Secret Message – This text is our secret that we want to hide from prying eyes.
~~Your Key~~ Key – I'm unsure if "your" makes these labels more clear
- This might fit: Key – scramble & unlock your message
~~Your Secret Message~~ Encrypted Message – We don't have to keep this secret. We can post it to twitter. Could be labeled "Scrambled Message" if you want plain language.

OpenMatt commented 8 years ago

question for @michellenebiolo + @Giorgio-Olivero: what's the deadline for getting this feedback to you?

Giorgio-Olivero commented 8 years ago

what's the deadline for getting this feedback to you?

@OpenMatt it's continuous integration development, so theoretically anytime is good. But the earlier the better. If by the end of today your team could pinpoint any main issue it would be helpful. We'll have still time next week to integrate also newer feedbacks. On Monday's call we'll share with you the wireframes of the upgraded onboarding.

@xmatthewx thanks for the feedback about the copy! It's very useful. We are also semi-revolutionizing the onboarding. Currently it's mainly about setting the mood of the experience whereas it should also be a good opportunity to explain Cryptologji's rationale and some of its key elements (regarding encryption and the webtool itself).

Giorgio-Olivero commented 8 years ago

Here's the user-test report. As you can see both onboarding and sharing need to get back to the drawing board in order to improve the overall UX. https://docs.google.com/presentation/d/1r6qawylZctjcIqqtHbnkag8xDpRsQmKzxlpuhHFgskA/edit?usp=sharing

OpenMatt commented 8 years ago

Key creative challenges we're focused on:

1) On-boarding
- broken into 3 key steps (which @Giorgio-Olivero will list here)
2) Sharing
- to increase virality, etc.
3) Language & Branding
- e.g., use of word "encryption" vs. "cipher"
- @lovegushwa can provide some benchmarks / examples here

valianttry commented 8 years ago

We will need to connect quickly with @shaghdoosti and @Jochai1 to firm up language this week.

OpenMatt commented 8 years ago

@Giorgio-Olivero will share an asset here that helps us collaborate on the on-boarding aspect.

OpenMatt commented 8 years ago

@valianttry lets use this ticket to do that copy review: https://github.com/MozillaFoundation/encryption_campaign/issues/155

KevZawacki commented 8 years ago

Firstly, this is so cool.

Copy looks great from my perspective -- but will have to please policy + legal, too.

Giorgio-Olivero commented 8 years ago

hello, here's the updated mockup/wireframe sequence for a renewed onboarding. If you feel -as we do- that this iteration is promising we can move it to redpen as @lovegushwa suggested.

220218_wireframe_onboarding.pdf

brettgaylor commented 8 years ago

I like this! It really addresses some of the concerns I've had that we aren't doing enough user education.

I missed today's meeting but I understand that the text will need to go through new drafts - I think this will be important in highlighting the "cypher" part of encryption.

Giorgio-Olivero commented 8 years ago

attached: new mockups for the 'encrytion' view on desktop screens. 160224_mozilla_wireframe_desktop_encryption_02.pdf

these are not fully implemented yet, you can find a progress here: http://el.s.todo.to.it/cryptoloji/0508/#/encrypt

OpenMatt commented 8 years ago

@lovegushwa want to take first pass at reviewing and providing some feedback here?

OpenMatt commented 8 years ago

@Giorgio-Olivero we can get you feedback on this latest iteration by end of Friday. Is that ok for you? It's extremely busy here right now.

Giorgio-Olivero commented 8 years ago

yes, sure. but we need to proceed anyways (theoretically Friday is our deadline, even if I envision that we'll keep finalizing and fine tuning next week).

Giorgio-Olivero commented 8 years ago

(tomorrow we'll post the updated 'sharing' view', it would be cool to prioritize the feedback on that part)

lovegushwa commented 8 years ago

@OpenMatt @Giorgio-Olivero digging into this now.

lovegushwa commented 8 years ago

Let's consolidate the first round feedback in redpen ( @Giorgio-Olivero you don't need to pay to view)

Desktop view: https://redpen.io/p/xzd9ac600aefa383c6

Onboarding: https://redpen.io/p/fq35b78d3e8adb630f

lovegushwa commented 8 years ago

posting feedback in #155

Giorgio-Olivero commented 8 years ago

[@lovegushwa you were right and made me fall in love with RedPen (really cool service/UX)]

so here we go with the 'mobile sharing, modal view screen'

the files already have annotations.

this new sequence is triggered when the user tap on 'share message', then:

the view panel panel slides up
it displays the Google 'reCaptha v2' (less intrusive than any other captcha techniques)
as soon as the captcha validates the user, the robot icon turns into a smiley and all those elements slides up and the blue background goes full screen
it shows the emoji message in the modal view
it only offers only the option to 'share the message' without paralizing the user with two concurrent sharing options (share msg + share key)
the key is 'glowing' at the bottom of the view
the key can be tapped and reveal extra info while hiding the other sharing buttons, to avoid UI clutter
the key is displayed in the default system emoji implementations to suggest its an element that can be copied
we could also add in the key-text a link to just send the key via email

MOBILE VIEW - SHARING SEQUENCE https://redpen.io/p/et16fb9c92f620ff8a (at the end of the sequence you'll find the 'current' share panel for a quick UX comparison)

Giorgio-Olivero commented 8 years ago

If you want to try the new animated (tested only on: chrome / desktop) encrypted message output check this out http://el.s.todo.to.it/cryptoloji/0542/#/encrypt (only test this feature on this link) Try picking few different keys and see how it changes/animates the output. We implemented this solution because it explains really nicely how the ciphering takes the letter as inputs and swaps them with emojis

OpenMatt commented 8 years ago

@lovegushwa from TODO's point of view, this is the top prioritiy ticket right now (even more so than the copy)
they want feedback on the share view that they just added here

lovegushwa commented 8 years ago

@Giorgio-Olivero I left some feedback in the redpen for the share sequence. I love that share how has hints and mini-onboarding. Beautiful. @HPaulJohnson can you take a look at the above and provide feedback on the share experience?

lovegushwa commented 8 years ago

@Giorgio-Olivero how can we get the share working on our end so we can test this?

lovegushwa commented 8 years ago

@Giorgio-Olivero I need to do some thinking about the footer. @valianttry @HPaulJohnson have any thoughts on what this should include?

You can steal some code from us here: https://github.com/mozilla/advocacy.mozilla.org/blob/master/components/footer.jsx https://github.com/mozilla/advocacy.mozilla.org/blob/master/components/footer-icon.jsx https://github.com/mozilla/advocacy.mozilla.org/blob/master/less/components/footer.less

Giorgio-Olivero commented 8 years ago

Check the footer (desktop) on this version http://el.s.todo.to.it/cryptoloji/0578/#/welcome

Sent from my phone

On 26/feb/2016, at 20:21, lovegushwa notifications@github.com wrote:

@Giorgio-Olivero I need to do some thinking about the footer. @valianttry @HPaulJohnson have any thoughts on what this should include?

You can steal some code from us here: https://github.com/mozilla/advocacy.mozilla.org/blob/master/components/footer.jsx https://github.com/mozilla/advocacy.mozilla.org/blob/master/components/footer-icon.jsx https://github.com/mozilla/advocacy.mozilla.org/blob/master/less/components/footer.less

— Reply to this email directly or view it on GitHub.

OpenMatt commented 8 years ago

Closing.

MozillaFoundation / encryption_campaign

Prototype Iteration 2 (of 3) for Cryptoloji #93

Next steps