Create project content for landing page & video

xmatthewx commented 9 years ago

Discussed content options earlier with @vazquez @secretrobotron

Step 1 - write up or sketch a few ideas
Step 2 - produce one high fidelity project
Step 3 - bring other ideas to community

Things to consider:

photos of people are great
avoid illustrated assets
bonus points for a project that looks good in map view

Progress on this is less important than UI revisions for Alpha build, more important than UI for Beta build.

vazquez commented 9 years ago

Sketches

1. Spotted on the Street: Graffiti

Description

A visual essay that shows exemplary works of graffiti art in Brooklyn, Portland, and Toronto. Each page contains a photo, title, and description.

2. The Bucket List

Description

The Bucket List is a collection of an individual's desire to visit certain places and live through distinct experiences. Each page contains a title, photo, and brief description as to why this is a unique place/destination.

3. Happy People (Happiness on the Streets)

Description

A visual documentary of candid photography involving people smiling and having a good time. Watching people smile makes one smile, so I expect this project to address the human aspects that our app is trying to bring. Each page contains a photo and metadata such as location found, time of day, weather.

vazquez commented 9 years ago

Looping @thisandagain into the discussion since one of these projects will be used on the video and landing page.

thisandagain commented 9 years ago

These are great! I really like how the first two are non-linear. The subject matter of the third feels really nice with our brand though. :smile:

secretrobotron commented 9 years ago

Gotta say, I love those mini-maps.

secretrobotron commented 9 years ago

Graffiti

Great opportunity for nice photos.
Good model for people on the ground who can re-make this project for their own locale.
Love that it can double as a walking tour.
Each path should have its own title screen to display city name (thinking about users that just swipe and disregard those buttons).

Bucket List

Enjoying the ability for the list to grow over time.
The order implied by the tile layout is a bit strange. Some meaning in that?
- Maybe better to represent personal milestones? e.g. Find an interest, finish school, get a job, buy a house with pool, etc.?
- Thinking: maybe one side represents things to do, and the other is things done?
What would this look like as just a sprawling web of ideas? Like a mind-map?

Happiness

Really like how this could extend to be a "pass it forward" sort of thing.
- Then, the order of it makes sense.
Great opportunity to show photos of happy faces (esp. local ones; friends).

xmatthewx commented 9 years ago

I suggest we pursue happiness. Let's discuss. It seems like it'd be the quickest to build and the most valuable for promotion.

It also connects to an opportunity @flukeout and I discussed in Toronto. This project could serve as a friend list. If a friend is also on Webmaker, add a button to a project of theirs with all their friends. It's a very flexible way to build groups w/o the platform dictating the nature of relationships.

secretrobotron commented 9 years ago

:+1: agreed.

I'd say Graffiti is a contender though: people can link to each other's stories/tours. Equally easy to build (if we focus on areas of a city instead of many cities), great opportunity for nice images to display the places in which people live and use Webmaker. Seems to a have a bit wider application.

vazquez commented 9 years ago

I will bring these at today's critique for further feedback. From that point, I will start designing.

In the meantime though, if you find photos of happy people, pleease share them :)

secretrobotron commented 9 years ago

img_20150506_112820376 img_20150506_112916198 img_20150506_112958788_hdr img_20150506_113024026

vazquez commented 9 years ago

Design Update

@LauraReynal has fantastic photos so I decided to use them to make up this content. I separated the narrative geographically.

Kenya & Bangladesh
Rio De Janeiro
Elsewhere in the world

Map View

screenshot 2015-05-07 14 16 11

Page View

screenshot 2015-05-07 14 21 27

Next, I'm going to make a cluster of photos in one of the corners of the map. I only have enough photos for one corner however.

screenshot 2015-05-07 14 28 46

xmatthewx commented 9 years ago

Great progress, great photos. Would love to see some clustered pages and avoid a cross †. The pages feel stiff with so much text. This is a good project to populate our gallery, but for the landing page and video, something more collaged will probably work better. Also -- the tool is good for tilting pictures and overlaying text, not very good for creating template-like pages. Have some fun with your layout.

vazquez commented 9 years ago

Modified the structure to cluster more. I will wait for you to let me know if this is good to go before I begin modifying content as it very time consuming.

screenshot 2015-05-07 15 01 24

cassiemc commented 9 years ago

Would think fewer pages to make sure the idea is really straightforward and the concept is easy to grok quickly. What is the minimum number of tiles to get the idea across?

Also, as I mentioned yesterday, try to get this content to really emphasize the benefits of building something in this format / structure vs. in google docs, prezi, blog post, etc. It's still not clear to me how this concept is benefited by this structure. Maybe need to go back to the ___ in a __ exercise.

xmatthewx commented 9 years ago

One way to address @cassiemc's concern is to think about scale and cropping within each composition. A page with just a big smile. A page with 4 small photos collaged. A page with a huge word collage filling it (Clap along if you feel like happiness is the truth?). You could place the same picture 3 times transformed to different scales. Play around a bit before you methodically update the whole project. Make a page or two in picCollage to zero in on how it feels to make this on mobile.

secretrobotron commented 9 years ago

+1 to trying this out in piccollage.

I really like the idea of simplifying though. Maybe just one city's happy people. Still shows off the same concepts (layout, pictures, text; button to skip back to beginning), but is much simpler to digest for FTU. Could link out to other projects (featuring other countries) when the cross-project-link button feature is implemented.

cassiemc commented 9 years ago

As a user, I'm not sure why I want to browse happy people though. What is this telling me? That happiness is universal around the world? Is there some kind of story connecting the people? what's the concept? I might just be grumpy :) but 'happy people' doesn't read to me as a concept. Maybe it is more "Happy expressions look the same on every continent" or "Happy people make a difference in the world" or "There's a lot to be happy about". Those are cheesy but you see where I'm going? A riff on the Happiness song would have been cool, and maybe there is even a more contemporary version of this that we could build on. Maybe you could work with Paul or Kevin to tweak the copy and pin this concept down, then you can work on simplifying.

xmatthewx commented 9 years ago

The urgent task in this issue is to create content for the app landing page and video. If this project lives on in the app for remixing, that's a bonus, but that secondary goal should not slow us down.

In these contexts, our audience will just see a fragment of this project zipping past. People don't need to understand the whole project. Their focus is on the platform and what it can do for them, not the project.

The content should say to them: Webmaker is a place where you can meet cool people, capture the best moments of your life, and share all that with friends. Photos of smiling people are the quickest way to achieve that.

I wholly agree that happiness and smiles are cheesy in writing (though Pharrell might disagree). On faces, they're nice.

lauradereynal commented 9 years ago

What about the stories that users in Chicago designed on paper ? Would that be interesting to look at ?

the pro:

they are real content ideas from teens
they are short and might be quick to design

the cons

one is leveraging the non linear structure
2 are not

vazquez commented 9 years ago

Progress

We reduced the scope of this project to only have a few pages
We changes the aesthetic of the project to be more accurate to the things you can actually make with the app.
We added rotations, wild colours for a more scrapbook feel.

Github is not processing images right now, so I'm posting a hard link to the screenshot of the project: https://www.dropbox.com/s/it76zpc3wq5h58y/Screenshot%202015-05-19%2015.22.25.png?dl=0

Note Neighbouring Tiles are still unaccurate

vazquez commented 9 years ago

![Uploading Screenshot 2015-05-19 15.22.25.png…]()

thisandagain commented 9 years ago

Hey @vazquez looks like your most recent comp never came through. Now that adding new projects and the discovery API hookup has landed, do you want to take a crack at building this on-device?

vazquez commented 9 years ago

@secretrobotron Here are the assets along with a map view for reference - https://dl.dropboxusercontent.com/u/43783651/Mozilla/Android/App%20Content.zip

Feel free to tweak it and make it robotronesque :rocket:

secretrobotron commented 9 years ago

Yay :D. Thanks @vazquez.

secretrobotron commented 9 years ago

Tried doing a bit of this just now. Need to hold off on creating this project until a couple of bugs are fixed (listed below).

thisandagain commented 9 years ago

Great. Thanks @secretrobotron. Two of these have been flagged as critical and we are trying to resolve them now. #1999 is not a bug, and thus we'll need you to work within the constraints of the UI/UX. /cc @flukeout @xmatthewx

secretrobotron commented 9 years ago

We have a few good examples to choose from now. :)

mozilla / webmaker-android