889486 - Design User Profile page

Status: RESOLVED FIXED

(Webmaker Graveyard :: webmaker.org, defect)

Description

[Cassie McDaniel [:cassiemc]]

Initial requirements were gathered during our work week and documented here: https://etherpad.mozilla.org/webmakeruserprofile

Some of this will likely change based on results of user testing.

Requirements:
	•	Lives on yourname.webmaker.org
	•	Lists your makes
	•	User has ability to hide 
	•	visually emphasize the makes
	•	Your gravatar
	•	How to change image
	•	hackable thimble page
	•	similar to teach guide
	•	really nice leading template
	•	Display your likes
	•	Description
	•	level: e.g. mentor
	•	Should work really well on mobile
	•	Think of how people will share stuff
	•	Ability to start making from these pages/some way to get back to Webmaker
	•	Can't be 1 step away from being logged in and using a tool other than by following a link; 
	•	Content can still come from our tools
	•	Can't use sign-on system
	•	Can't load up tool in that page
	•	Could use different bar (anything with iframe embeds) or same bar
	•	Expose learning opportunity of having hackable profile template in compelling way

Could come later:
	•	Your makes # views
	•	ability to sort it
	•	Media sync
	•	github
	•	youtube movies
	•	photos on flickr
	•	Location
	•	ability to turn off
	•	Mobile app to take pictures and add directly to your profile

Post-mvp:
	•	various styles/designs
	•	UI to customize your templated profile
	•	make-related badges
	•	events attended
	•	comments
	•	ability to follow
	•	categorize by diff. types of groups / tags, eg. #Javascript, #design

Comment 1

[Cassie McDaniel [:cassiemc]]

Adding Jon to this bug, so that the functionality matches the design. Jon, as I understand it you're starting to implement the back end on this already?

Will aim to create a wireframe for this week.

Comment 2

[Cassie McDaniel [:cassiemc]]

On IRC from Brett:

* List looks mostly good, but I dont think it should be a thimble page. i think it should mostly be auto generated

* i think it should basically be your photo, desc, and sequential listing of your makes by date.

* bonus points if you can hack it. think myspace (the old one). you want to be able to trick it out. you should be able to change the background

* should feel similar to the make details bar.

Comment 3

[Cassie McDaniel [:cassiemc]]

Just wanted to update this bug with some updates over the past couple of days.

I did some sketches here: http://cl.ly/QiGS/o
Gavin did some sketches here: http://cl.ly/Qjue

Then we talked about it and came up with some MVP requirements (logged here: https://webmaker.etherpad.mozilla.org/userprofile):

Name
Bio/Description
Tell people what gravatar is
Link to other profiles? (flickr, twitter, )
    -manage your links
    -me elsewhere
    -blogroll esque
-# of makes
-# of likes
-1 hackable element
    -personalizable
    -fun
-hero image
-set profile to public / private (maybe)
Gallery of makes
- thumbnail w/ image + desc (like /teach)

Next step was to come up with some more detailed sketches so we can hack at this next week.

Comment 4

[Cassie McDaniel [:cassiemc]]

Attachment: Layout A.pdf

Here are some rough comps for a single layout (easier for me to work in photoshop than pencil, nothing is sacred though!)

Didn't get a chance to do the intermediate layout, as I was playing with a few other ideas and layouts – will upload those next.

Comment 5

[Cassie McDaniel [:cassiemc]]

Attachment: desktop.jpg

An alternative layout, very similar to A, and probably the same mobile layout would work for this.

Comment 6

[Cassie McDaniel [:cassiemc]]

Attachment: 02-logged-in.jpg

This direction is more pie in the sky, but was designing with "what if" in mind. Was thinking the profile page could be less of a "community" type page and more of a stats view for the user (when they're logged in, logged out would need a diff view). Also integrated ways of messaging or annotating certain makes, and thinking about how we can reward users for their progress and dedication to the site - as well as providing more effective ways to join in making with others.

Comment 7

[Gavin Suntop [:gvn]]

I need to do a deeper dive on this, but one thing that jumps out is the header. This isn't a sub-page of webmaker.org, but a new property entirely on a new domain. Let's tie it back to webmaker.org (probably just the linked logo as you have it now), but not re-use the entire header from it.

We should certainly stick to the style guide, but I like the idea of differentiating this from webmaker.org.

Also, if we can come up with alternatives to the masonry layout I'd like to explore them. Packery and the various JS masonry solutions are fairly CPU heavy...

Comment 8

[Brett Gaylor [:brett]]

I think that this should live on user.makes.org, which definitely raises that question of how the header/nav should work.

Generally i love this direction. I like the direction implied in the logged in/ stats view as well.

One thing I'd like to see is some indication of what a "mentor" might look like - somewhere to indicate that we are recognizing them as such, but potential other indicators of how they have helped someone etc.  (bugzilla is terrible for design feedback but wanted to weigh in here as these are awesome).

Comment 9

[Jon Buckley [:jbuck]]

We can't have user logins on *.makes.org if we also run arbitrary javascript on *.makes.org.

Comment 10

[Cassie McDaniel [:cassiemc]]

The design is being sorted out in the build prototype Gavin and Kate have going, so am going to remove myself as assignee... Gavin, Kate - feel free to close this bug if these tasks are covered elsewhere.

Comment 11

[Brett Gaylor [:brett]]

feedback!