Status

RESOLVED FIXED
6 years ago
6 years ago

People

(Reporter: cassie, Assigned: jfong)

Tracking

Details

(Whiteboard: uxdesign, uidesign)

Attachments

(2 attachments)

(Reporter)

Description

6 years ago
Iterating on feedback/input from bug 866695

Useful resources:
* http://openmatt.org/2013/04/30/hackable_kits/
* https://webmaker.org/en-US/kit-prototypes/
* draft documentation on how to earn a Webmaker Mentor badge: https://teach.etherpad.mozilla.org/badges-mentor
* draft technical documentation: https://etherpad.mozilla.org/Mentor-Badges-technical-documentation
(Reporter)

Updated

6 years ago
Whiteboard: uxdesign, uidesign
Created attachment 749469 [details]
Teach v2 dirty mock-up
@ Cassie: I created this mock-up to try and get it straight in my own head a bit.
* key challenges / questions: 
* is this roughly what you have in mind for the gallery?
* how do we surface community and the mentor mission more? suggested a crude stamp approach -- but might be something better that takes up less real estate?
* suggested showing Mentor badge on this page next to "become a Mentor button." to tease it / make it more visual
* Still working on copy for CTAs in blue carousel.
@ Laura: FYI on how new /teach page is shaping up. Implementation of the "everything's a make" approach to the teaching guides / kits gallery.
(Assignee)

Comment 4

6 years ago
This is for Cassie, Brett and Mike:

So I noticed some inconsistencies with this design and the homepage design. Cassie, Brett, Mike can you verify the changes before I do any implementation?

A couple of things where I need clarification:

1. Cassie - The white half discs at the top of each teach item - are they only for teach? Since the makes on the homepage don't have this, is this still ok, or would it be best to simplify and not have it where some have discs and some don't.

2. Brett, Mike - does the Make API return avatars for users? If not, where are we getting these avatars from? Will there be both retina and non-retina versions in the response?

3. Brett, Mike - what are the dropdown options for the teach page in 'sort guides by'? Are these all ready in the Make API? If so, what is the search call for them?

4. Cassie, Brett, Mike - Where does the 'Become a Webmaker Mentor' link to? And what is that popcorn icon that is beside it? Does it only appear when you hover over or is it always there? What happens to that icon once you're in mobile view since it'll be cut off from the edge?

5. Cassie, Brett, Mike - Is that graphic of the Webmaker team a stamped item?

6. Cassie - The 'Load more' button is inconsistent with the one on the homepage. It seems like it would make sense if they were both in the same style - which should this page have?

7. Cassie, Brett - Are there limitations to how much text displays in the description per teach item, Level and Skill sections? If someone writes a lot of text it will break the layout of the element unless we force a strict height. If we force a strict height, long text will be cut off. The CSS 'text-overflow: ellipsis' only works for horizontal limitations not vertical.

8. Cassie, Brett - What happens when the dropdown for sorting changes the content? Does the stamped item always stay and the other items are replaced? Or does it go away?

9. Brett, Mike - What is the search filter for teach items? I've been told it might be 'kit' but this hasn't been confirmed. Please let me know what the final term is so that I can test with it. And I will need actual content on the staging server to pull from that I can also sort on (e.g. need them to be tagged with the proper teach tag and in the various sort options).

So it looks like I can't start working on this until most of these questions are answered since this current mock is unclear to me at the moment.

Thanks!
I'll leave this to Mike and Cassie, but I did create a series of makes tagged as "guides" that you can use to start the basic gallery design.
1. Cassie to decide. My $0.02 is that these are special types of "makes" and ought to have a different visual appearance to let people understand that they are ... different.

2. Not presently, but I think it will have to. Right now our SSO solution pulls images from Gravatar, and we have a "no avatar available" image to use. Based on the other design mockups I've seen, we're going to need to have a user-level avatar, and the MakeAPI will need to be able to return it. For now, I think you can leave a spot for the image to go and just leave it blank.

3. Same as the Make Gallery; if you want a more reasonable subset, though, I'd go with "Title", "Creator", "Date" - should all be in the MakeAPI already.

4. I'm pretty sure the Popcorn Maker icon is a placeholder until we get the Mentor badge design finalized (see bug 863934) For now it should point to /# - eventually it'll be a static page that has the basic content to be provided by Matt.

5. Yes.

6. Cassie to answer; I'd sync with the latest homepage mockups, though, as that's where her focus has been.

7. No limitations at the API level, let's go with a strict height and risk the cut off. Damn you, CSS.

8. Stamped item should go away, IMO, but up to Cassie.

9. As Brett mentioned, the tag is "guides"
(Assignee)

Comment 7

6 years ago
Just chatted with Cassie:

1. The half circle is not part of spec, so it will not be included.
2. Stamped item only appears on initial load - if sorting happens, it goes away.
3. Since gravatar functionality will not be ready by June 15th with a guarantee (as discussed with jbuck) we will likely not include avatars for this launch.
4. The popcorn icon by the top is not going to be used
(Assignee)

Updated

6 years ago
Assignee: cassie → jfong
(Assignee)

Comment 8

6 years ago
Brett, I'm doing a search on the make API for ['featured', 'guides'] and it returns nothing. I also tried just ['guides'] and even ['kit'] - any idea why it might not be showing up?
Flags: needinfo?(brett)
Apologies - I tagged the content as "guide", singular.  Try that?
Flags: needinfo?(brett)
(Assignee)

Comment 10

6 years ago
That works - thanks!
(Assignee)

Comment 11

6 years ago
Matt, do you have the original image of the group shot in the mock? Can you add it to this bug? Or attach your PSD? Thanks!
Flags: needinfo?(matt)
(Assignee)

Comment 13

6 years ago
Brett, where do I get metadata from the make API to output the 'level' and 'skills' information? I don't see anything in the current response that matches.
Flags: needinfo?(brett)
(Assignee)

Comment 14

6 years ago
Created attachment 752942 [details]
Add teach page changes
Attachment #752942 - Flags: review?(ross)
Comment on attachment 752942 [details]
Add teach page changes

Made a couple of comments - none too big to stop this landing, up to you on if you want to go with them
Attachment #752942 - Flags: review?(ross) → review+
(Assignee)

Comment 16

6 years ago
The changes in this code only change the main page and do not include the search filter or the CTAs on the footer. These will be consolidated in https://bugzilla.mozilla.org/show_bug.cgi?id=873154
(Assignee)

Comment 18

6 years ago
merged in: https://github.com/mozilla/webmaker.org/commit/0b03a34dd714243728e4aceb7e0cf1834a920d22

I'll need the update from Brett about the make API skills/level metadata but I can submit that as a separate commit if different from my default. Currently, I assume I can get a data.level and data.skills from the response but I suspect it might not be the same.
Jen, here are the criteria we need to be able to filter by:

    recommended/highlighted - (tagged as "featured")

    recently made (list curated by admins) <-- calling "most recent"

    For popcorn (tagged as "guide:popcorn")

    For thimble (tagged as "guide:thimble")

    made at an event (tagged as "guide:event")

    Title
Flags: needinfo?(brett)
(Assignee)

Comment 20

6 years ago
I think this is complete?
Status: ASSIGNED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.