P2PU UX / Design Plan
The goal is to improve the user experience and design of the P2PU website, and more specifically the P2PU School of Webcraft.
Inspiration
http://www.twilio.com/ (rollover blocks with content appearing)
http://www.kickstarter.com/
http://github.com/
http://www.waitingforsuperman.com/action/page/what-you-can-do (for the "Contribute" page)
Ongoing
Fix issues w/ new SoW design & how its effects the other school's pages [Anyone]- Get feedback from P2PU community about changes
Week of August 29th
- Start implementing new ux / design changes in Lernanta [Zuzel] [Arlton]
Finish rough footer design [Arlton]Get community buyin for footer [John]- What feedback did you get?
- What part of the feedback was integrated into the implementation?
- It is ready for final touches and merge by Zuzel?
Finish rough header design [Arlton]Get community buyin for header [John]- What feedback did you get?
- What part of the feedback was integrated into the implementation?
- It is ready for final touches and merge by Zuzel?
Finish rough draft of new P2PU homepage [Arlton]- Get community buyin for content [John]
Finish SoW landing page design [Arlton]Start conceiving Challenges / Courses page changes [Arlton] [John]
Week of September 5th
Updated / mostly final group page on alpha [Arlton]- Start conceiving the landing pages for "Learn" and "Contribute" [Arlton] [John] [Crystal]
Week of September 12th
- User testing of the new design changes
- Start conceiving the updated login / register forms [Arlton]
- Add Facebook login option [Zuzel]
- Start collecting content for "Learn" and "Contribute" pages [John]
- Start redesign of "Learn" landing page [Arlton]
- Start redesign of "Contribute" landing page [Arlton]
- Start reconceiving the forms on P2PU [Arlton]
- Start rough redesign of the forms on P2PU [Arlton]
- Add cookie to site to allow for banner to be visible to non P2PU users [Zuzel]
- Banner is hidden to users
Week of September 19th
- Revisions of Challenge page based on feedback (see below)
- Completing a Challenge - [John to talk with Erin and Chloe]
- As you complete tasks, progress bar fills
- When you finish all the tasks the greyed out "Done / Show your work" button next to the progress bar activates
- After clicking Done, user is prompted to submit work (using a modal box with either a text box or wysiwyg editor), the entry will be logged in the user profile and will be available for community review.
- Need input from Jessica (maybe Erin/Chloe) on how to validate work
- After work is submitted, user congratulated and prompted to adopt the challenge / share
- How will they share a challenge? Facebook, Twitter, Email?
- After work is validated, award a badge / achievement
- Should be badge be greyed out until work is validated, or should it not even be present?
- IDEA: Self-awarded badges vs community verified. You're awarded the badge, but it's different somehow.
- Related to http://pad.p2pu.org/badge-implementation
- https://gomockingbird.com/mockingbird/#m5ase18/p49bKq -- You are missing insentive to review each other work. If the user just submites the work and don't checkout other solutions peer-review will not happen.
- What is the functionality for the twitter, facebook and email icons.
- John wanted the ability for people to share their work and I agree.
- What is the functionality behind Start Next Task? -- Wasn't this going to happen when the user completed all the tasks?
- Sorry, it should have read "Start Next Challenge"
- After a user completes a challenge, gains "completed" status, comments in the challenge are distinguished with color or similar as special
- Do this comments are somehow used as part of the work submition? I imagine users will want us to display them when they are preparing the work for submition so they can copy paste stuff they have done for the different tasks (doesn't the evidence for the badge come from the work done in each task?)
- Freshness -> expose activity on tasks (faces)
- Mentorship
- Adopting
- Special after finishing
- possibly a small icon (done this before) or highlighted comment text in discussions in this challenge
- Need help -> request mentor
- You're not alone, here are other people that can help you.
- People by your side
- People who've finished this challenge
- People offering help
- Get Help
Week of Septeber 26
- Contribute page -> "how it works" -> p2pu story
- IDEA: Webcraft navigation top bar, push people through challenges
- User Profile
John is doing user testing with 15 people unfimiliar with P2PU.
Jamie should have the Webmaking 101 content ported over by the end of the week.
Chloe Feedback
- I think that the option that says review your peers work should come earlier before you get the congratulations message, because all of Jamie's challenges require you to give feedback to your peers as part of the challenge rather than afterwards.
- To the point above and to encourage even more peer-participation we could include as part of the challenge and the required task list a:
- request a badge task (from the badges available for the challenge)
- nominate a peer with a badge (from the badges available for the challenge)
- then you could have the congratulations message and the options to adopt another challenge or review more peer work. The laguage for that could be something along the lines of "you have unlocked the power to review others work/ you can now adopt a challenge etc etc"
- It might be nice to have a "what is the goal?" type of block or a target above the tasks, so that you know what is the end project you need to do, and whats the benefit, i.e. you are going to make an awesome web-page.
- Question: once I submit my task, where does my post go? to the activity wall? Is there a way for others to like my post? OR if I post it on facebook, is there a way to show in the activity wall how many likes I have from facebook? This could come handy if we introduce the stealth "social legend" badge or just to encourage participation.
Challenge Updates
"Need help? Peers that can help you with this challenge:" - people who offered a hand and have finished before or request a mentor... here are some questions others have asked that you can help with\
something that conveys freshness on each task, take it or leave it type information
--------------------------------------------------------------------------------------------------------------------------------
------------------------------------------ What still needs to be done ------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
Schools branding need to be worked on and approved- A thumbnail needs to be created for each of the schools
- Updating all P2PU schools landing pages with clearer messages and call to actions
- Remove helper text from forms
- Add Facebook sign in fuctionality
- Redesign all forms on the site
- Remove Captcha from signup page or make it invisible
- (just remove. making invisible means you have an addtl http request that will slow down the page unnecessarliy)
- Consolidate notifications after signup
- Login should redirect to homepage
- (i thought we were going to leave the user on the page they already were on so as to not interrupt their task)
- I do recall us deciding that. That will be something for Zuzel of Jessica to implement
- Consolidate display name and username when signing up
- Remove OpenID
- Create "Join P2PU" div block for when visitor is not a member
- Determine correct word for Contribute/Teach/Mentor (contribute sounds like you're asking them for money)
Courses / Challenges page
- Add functionality that will strike out tasks that have been completed by user
- Using Javascript
- A user has that ability
- This is the per user complete task feature (no details on how other users will see which tasks their peers marked as completed) Yes
- we should expose this in a future release (five friends completed this task)+1
- Wonder if "check off" is a more positive experience than strike out (+1)
- Don't like that after strike out it's harder to read what the challenge was+1
- I'm fine with us not using a strikeout - I could see it being a problem. Although I would like for the task to fade slightly when the checkbox has been clicked.
- JL: I think Arlton said he was coding up front and back end for this
- I fine with holding off on coding. I just like to get me hands dirty. We can discuss what needs to be coded out and what Zuzel, John, and you want to hand off to me.
- Remove concept from site of courses / challenges being "Open" and "Closed"
- Not sure what they are talking about here
- I assume all challenges are open?
- Signup?
- Maybe they mean when users click Enroll (changes the name of the Participate button) they are automatically added and no need to answer signup questions.
- This is about removing the requirement of applying to a course, in the case of webcraft everyone is accepted automatically.
- also I think that it is possible to have a course that has "ended" and can't be worked on anymore, this shouldn't be the case in the webcraft challenges
- List Tasks for course
- Done? Task list but probably means: display full task list in the group home page.
- show all tasks, not just the first three. in general this is more useful than just a preview
- and show its status -- which I think Arlton is working on. status: done or not
- checkbox + slight fade of task
- I'm just working on the design and how the user experiences the task changing from being done or not done. I'm not coding out the logic.
- Are we going to have subtasks?
- Not for now - just (level 1) challenge, with (level 2) tasks - and we consider "Webmaking 101" a set of challenges
- Remove Tasks from sidebar
- easy
- I think the sidebar should only include the graphic, challenge title, description, enroll button + the course statistics underneath. Anyone feel differently? Am I missing anything?
- Add subheader description to each tasks
- Not sure what this means
- http://webmaking101.p2pu.org/alpha-challenges/all/
- each challenge has a name and a short description
- the group short description that we have now? take a look at the mock below in mockingbird opening it again -- the lorem ipsum?
- The "This is the subheader of the task that describes the task" under each task
- Avatars below the course sidebar block
- People avatars? done?
- yes, people avatars. they are more prominently displayed, on the main section of the course page. larger avatars (removed from sidebar)
- Do I also see avatars of people working on the same task / those who have adopted the task? (maybe for later release)
- agree, later release... most social things should be exposed with avatars+1
- If we're going to have as many avatars as in the mockup, we really need to make it faster. Maybe drop gravatar lookup or find a better/faster way. That could be a really slow painful load. Can we cache the gravatar url if it's a performance issue? That way we only have to look it up once. I believe so. we should only do that if necessary
- Add discussion space for each task
- Comments / Questions / Etc.
- done?
- I'm assuming that's what we will be using right now.
- Needs to be lightweight
- Not sure what this means exactly
- This was a point that John made. It would be great for him to expand on what he meant.
- Is this just the general comment/discuss feature we have for tasks right now?
- I'm assuming that's what we will be using right now.
- Add a way for the user to see their progress
- Maybe program a way to determine the # of tasks completed?
- Can be added above the task list?+1
- yes, definitely
- please no percentages / just 2/5 for now or nothing - if all the tasks have checkboxes it's fairly easy to see where you are. don't disagree, why?
- percentages are not meaningful if tasks are not the same size, and just create a fake perception of being scientific. not really important ;)
- makes sense
- I see your point. Agreed.
- completed x of y / completed x/y - sure+1
- Add a place to submit your work / "get the badge" -- ok then this is badges logic
- Not sure what this means, can it be like the work you submit for signup?
- How will the visibility of the submition work?
- People should be able to add comments to the work?
- right now I think this can just be a comment on a submission page or something. this isn't totally clear.
- I need this to be clear so I can implement it, who should I ask for details?
- it's not the 'submit for assessment' task?
- -> Chloe to figure out with Erin and Jessica
- I've been confused about this as well.
How will email notifications work for the Challenges?
What about using a lightbox to show the full description of the challenge?
Courses / Challenges Wireframe: https://gomockingbird.com/mockingbird/#m5ase18/epp0iO
Create a Course / Challenge form
- Remove sidebar
- Remove "Clone existing course" from course creation form
- Remove "Import from Old Site" from course creation form
- When is this going to be disscused in an open space (mailing lists, community call?)
- I haven't done anything yet. It's just something John, Crystal, and I have discussed.
- We can't just move away from courses (and remove these features)
- Discussing this and making decisions on how it should work will take more time than we have right now - that's why we need to figure out a way to let us create / edit challenges without removing all this functionality
- How often are these features used? Do we have any stats? Just curious.
- Challenges are an additional option (not a replacemenent) for now
- Clairification. Thank you.
- I was thinking it will be a new radio button on the kinds section. Can someone write a one sectence description of what a challenge is? Similar to what we have for study groups and courses?
- Remove helper text (except for tags)
- Remove "Other" from the Kind section
Profile page
- Logged in
- Right side of the page
- Courses you're enrolled in
- Courses you've created
- Option to create a new course / challenge
- Option to explore courses / challenges
- Badges user has earned
If user has never created a course
- Prompt to sign up for a couse / challenge
- Goes away when user starts a course
- Prompt for user to start a course / challenge
- Goes away when user starts a course
Learn page
- P2PU Schools prominent at the top
- Walkthrough of how the user can particiapate in a course / challenge
- Prompt to Login or Signup
- Prompt to Browse courses / challenges
-------------------------------------------------------------------------------------------------------------------------------
------------------------------------------ What has been done, so far -----------------------------------------
-------------------------------------------------------------------------------------------------------------------------------
General
- Adjusted the typography to use san serif typefaces - Helvetica, Arial, etc. - rather than slab serifs. This will be easier for users to read.
- Removed the repeating stripe background from the site and used a soft grey in its place
- Removed the backgrounds from the footer navigation and headers
- Switched out the "My Profile" when logged in to be the username of the user
- Adjusted code to accomodate for longer usernames
- The username at the top nav now has "My Profile", "My Settings", "Log Out"
- The users picture and username now link to the users profile
Header
- "Help" goes to help.P2PU.org
- "Learn" goes to the browse page
- "Contribute" goes to the create page
- It would be better if there was an intermediary page that explained what it meant to be a Contributer - this should be a new page explaining all the ways to contribute (low prio, after sow)
- Removed "Beta"
- Adjusted the kerning in the logo graphic
- Logo directs people back to the homepage
Footer
- Moved language selector to the footer
- Added About P2PU section
- Adjusted layout
Courses / Challenges page
- Renamed "Participate" to "Enroll"
- Moved "Report Abuse" to the bottom of the sidebar
- Removed "View Full Description"
- Removed "View" link from task
- Removed Activity Stream
- Removed "View All Tasks" link
- Removed Task Counter from bottom
- It should display all tasks on the Courses page now
- I need a developer to confirm the code is correct
Profile page
- Removed Activity Stream
- Moved "Chat" and "Inbox" from the dropdown nav to the profile page
- Placed "Chat" "Inbox" and "Edit Profile" next to the users profile picture
Dashboard page
Home page
- Removed large buttons on the right side
- Removed blog feed
- Added additional "Featured Courses"
- Removed Activity feed