Design: Privacy tips landing page

[lovegushwa]

Design a landing page for privacy tips to be built next week. Below is a wireframe to kick off the process. A few notes:

• I think we should keep the top bar + nav because we will probably want to localize this content, we may want to create a "safety 101" page eventually which is basically a curation of our most essential tips.

• We need to develop a privacy tips content plan. I'm started a ticket for that here #800

• I'm thinking we will have two kinds of content. The first is basically a paragraph summary of a thing a user should do (like use a VPN) with links to relevant content outside our site. The second is video content which could be deeper dives into privacy / security related topic.

• The small square next to the blocks of tip copy is a placeholder for a cool ass .gif. We may want to consider how this graphic and a social post could be the same thing / or related in a production efficient manner.

Questions:

• user feedback is important, should we include a place for users to comment or ask questions / we can use this feedback to inform future videos or tips?

• should user be able to share individual videos or tips in addition to the site?

CC: @beccaklam @caltrider @hannahkane

[lovegushwa]

@beccaklam I started a project folder, please edit my hacked sketch file and take a stab at UI so we can keep this rolling.

https://drive.google.com/drive/folders/0B2qu3ExKWIlvU3FqUnBhMnp3TTA?usp=sharing

[beccaklam]

@lovegushwa https://drive.google.com/open?id=0BzuBOR2VJQqUZ2o3OXp6bklZUmc <-- exported PNGs https://drive.google.com/open?id=0BzuBOR2VJQqUUEVhY2hmT0Q4ZDA <-- sketch file

[beccaklam]

Here is where we got this week with wireframes. https://redpen.io/p/jg2d65c4dc4205102a <-- redpen for comments

Wireframes:

UI:

[beccaklam]

@hannahkane @lovegushwa @natalieworth @HPaulJohnson I added some first draft UI for the Safety Tips site to this redpen: https://redpen.io/p/kyf3f62200a887e56f I also added some new ideas for the subscription button where users can sign up their e-mail. I did some more research on editorial sites and the convention is to have the subscribe button top right. Will work on fleshing out the UI further Monday (May 8) morning! Also going to drop in the screens here:

[beccaklam]

@hannahkane @lovegushwa @HPaulJohnson @natalieworth Safety Tips UI Design update: https://redpen.io/ngb8baa84428aa19d8

[hannahkane]

I put a couple small comments on the redpen, but just wanted to say here that I'm digging this!

[HPaulJohnson]

I agree with Hannah - really love how these are developing. I think the removal of the numbers on the vids helps and I think the "subscribe" in the upper right hand corner is the best place for that CTA.

[beccaklam]

Added some more modal design options along with some fixes to the comments @hannahkane left above and some alternate UI style options: https://redpen.io/p/kyf3f62200a887e56f CC: @hannahkane @lovegushwa @HPaulJohnson @natalieworth

[hannahkane]

These are all nice options! Will leave to others to decide.

[natalieworth]

@beccaklam @lovegushwa uploaded the UI based on some direction changes yesterday and with a new font (just one version so far—still gotta refine any others) https://redpen.io/ng2ed085bac7c218d1 Font is place holder for now, but the closest I had on my computer to the similar style was Plak @lovegushwa does this UI feel right for what you were thinking? trying to make it feel mozilla-y too :D

[beccaklam]

@hannahkane @lovegushwa @HPaulJohnson @natalieworth Added some alternative inner page options after looking at youtube and vimeo pages more closely. These have the gallery of 'more videos' stacked on the right hand side and are more conducive to successive watching I think. https://redpen.io/p/kyf3f62200a887e56f <-- redpen for comments

[hannahkane]

Latest is here: https://redpen.io/p/eo07ee9db3059d0a00

[hannahkane]

Closing this ticket, as I believe design is done. Can file follow-up tickets for tweaks as needed.