Classroom Home Page and Classroom Desktop Landing Page Updates

[srinjoym]

This issue is for tracking updates to the Classroom Landing pages for the Classroom Desktop Launch. Working with @brandonrosage to showcase the new feature and provide a page for users to download the app.

Let me know what y'all think about the current design! cc @johndbritton @mozzadrella @d12

Classroom Home page (http://classroom.github.com)

Classroom Desktop Page (http://classroom.github.com/desktop)

[johndbritton]

I'd suggest updating the desktop screenshot with more realistic user data. Test accounts without real names set don't look the best.

I wonder if including the full download link on the homepage is necessary. Maybe we just list the desktop app as a feature and include a link to the desktop page.

Similarly, for the /desktop page I don't think it's necessary to include the classroom homepage description but could be convinced otherwise.

[srinjoym]

I'd suggest updating the desktop screenshot with more realistic user data.

Definitely need to update the screenshot just using this one as a placeholder with all of my test accounts 😄 do we have any large scale test classrooms, or even real classrooms I could use for the screenshot?

I wonder if including the full download link on the homepage is necessary.

I could update the homepage to have a link to the desktop page with a smaller picture. We could also add some other features of Classroom in similar sections to fill out the homepage. @brandonrosage what do you think?

[brandonrosage]

1. I think the Desktop page should include breadcrumbs to indicate its relationship to the rest of the website.

2. I'd suggest including the "See how it works" and "Sign in to get started" links in the general Classroom content area at the bottom of the Desktop page. Truly have the two pages be mirrors of each other, with respect to content and functionality.

[srinjoym]

@brandonrosage and I discussed the design further during our weekly Classroom standup. As far as I understand, the motivation behind the two pages being mirrors of each other is two fold:

1. On the homepage, we're directly linking to the download button for Classroom-Desktop because there isn't really any other content on the Classroom-Desktop landing page for the user to see. If we linked them to the Classroom-Desktop landing page, users would essentially just see the Desktop Landing page module again with the Download button included. If we decide to highlight more things about Classroom-Desktop on the landing page, linking to the Desktop page from the homepage might make more more sense.

2. For the desktop page, we're thinking about including the "See how it works" and "Sign in to get started" links at the bottom of the page since users might end up on the desktop page without ever having used Classroom. First-time users of classroom could end up on this page from search results or any promotional media where we link to the desktop landing page.

@johndbritton and @mozzadrella what do y'all think? once we're all onboard on the design going forward, I'll make the final tweaks to the design and open the PR.

[mozzadrella]

@srinjoym working on these copy issues today

[mozzadrella]

I'm going to put these comments in buckets, so hopefully we can peel off and use.

Classroom splash content

Please work from this document.

Desktop content

I suggest mentioning this in the "Why try Classroom" H2, and then pulling out into a separate H2 with an anchor and a download button CTA, and that is the link we use to "launch it." IMHO desktop is a feature of Classroom, and not robust enough (yet) to be framed as its own product.

I will write this H2 if we all agree. Pls thumbs up or thumbs down with a comment.

Demo account for screenshots

@srinjoym and @brandonrosage you can use the CS1 Classroom account I've invited you to. The teacher is Dr. Root, and the students are all plants and veggies. It is a challenge to use "real" students because of FERPA, so this is my workaround.

[srinjoym]

The Classroom Splash Content looks great! ✨ @brandonrosage if you can update the wireframe with the general layout of what that we want the content to look like, I can update the webpage according to that. I'll also grab new screenshots of the Desktop app with the Demo account and replace the images.

@mozzadrella For the desktop content, I think it'd be easier to have a separate page for desktop since we don't show the Classroom Home Page unless the user is logged out. We're also linking to the Desktop Landing page when the user clicks "Download Repositories" on their assignment and we detect that they don't have Classroom-Desktop installed. Maybe we could mention it in the "Why Try Classroom" H2 and then instead of linking to another H2, link to a page similar to what we have right now?

[brandonrosage]

Homepage wireframe:

Note that I've omitted the "How it works" section since the illustration content is a dependency.

Also, the quotes would be displayed in cards very similar to those used on the GitHub Education "Stories" page. I'm happy to build those.

Desktop page wireframe:

[srinjoym]

Just got around to fully updating the homepage to match the new wireframes. Getting it to also work on mobile was a bit of a challenge, but I think I've got it to a pretty good point. Here's what it looks like now:

Homepage

Homepage Mobile Version

On google drive to preserve the formatting of this issue: https://drive.google.com/open?id=1k5ojFjixivNX0GXFuipp_RZyStZ9_tND

I had a few of questions/points, @mozzadrella and @brandonrosage let me know what y'all think

1. The links aren't working yet because of Rails yml shenanigans but I'll find a way to get those to work
2. I left out the "See how it works" video to match the wireframe, are we intending on replacing that with the new "How it works" section?
3. The page is pretty much all white and gray right now, not sure if we want to throw some green on any components to set it apart from the education website.
4. Do we have the real pictures we want to put on the landing page (in place of the placeholders)?

[srinjoym]

@mozzadrella Here is a screenshot of the tweaks @brandonrosage made to the page. What are your thoughts?

[mozzadrella]

@brandonrosage you are a magician.

[mozzadrella]

@srinjoym a few tweaks:

1. H2 in "Why Try Classroom" first paragraph typo "straight to the material."
2. Please strike the paragraph "You're not alone."
3. In the paragraph "Download all repositories" please insert: Download all repositories with the click of a button When you're ready to grade, download assignments to your machine from GitHub Classroom, or use our new desktop client, Classroom Assistant.
4. "Are you super advanced" link is broken.
5. Under the h2 "Get started with your first GitHub Classroom" all three paragraphs under that have links in markdown that aren't rendering.
6. Classroom Assistant box: I would say

   Classroom Assistant downloads all of your repositories with the click of a button. Download for Mac OS.

@brandonrosage would we include the 🍎 on that button?

7. If we can swing that visualization, here is what I would include (possibly in the "What teachers are saying" section).

[Visualization on right][Text on left] [Classroom Users Count] of teachers use GitHub Classroom to distribute course work. Students have created [Classroom Assignment Repos Count + Group Assignment Repos count] repositories when they learn to code GitHub and GitHub Classroom.

@tarebyte has a few ideas about how to store and present the data.

@srinjoym onward to the splash for Classroom Assistant :)

[mozzadrella]

Classroom Assistant page:

Classroom Assistant Download all of your Classroom assignments in one click. Classroom Assistant is a desktop application to help you get student repositories for grading.

Below the screenshot. Classroom is open source. Please file any bug reports or feature requests in the Classroom repository 💖.

Same question about the 🍎 for @brandonrosage above ✨

[srinjoym]

@mozzadrella Here's my updated version of the homepage, i'll post the desktop page next. @brandonrosage I just realized you also pushed an update to blur the cards, let me know if this version works as well

Changes

1. Fixed all the issues with the links and typos (I think)
2. Modified the cards with a blur + darken so that it's easier to read the quotes
3. New visualization with the stats for teachers + repos created. @mozzadrella and @brandonrosage let me know if y'all like the layout/wording of this (the numbers are off because this is running locally)

Things left to do:

1. Replace placeholder images with real images
2. Modify visualization layout with feedback

[mozzadrella]

Design feedback for our Monday meeting:

• Overall, design-wise it is feeling to me like a wall of text with little connection to what Classroom actually does--I've tried to solve this problem with copy and I'm not sure I've nailed it. @brandonrosage ideas? Would icons and breaking up the different features help? (I may or may not be thinking of a certain visual walkthrough of a product).
• Some H2s are flush left, some centered. Intentional?
• What is the placeholder image 250 x 200 for?
• "See what Classroom Looks like in Action" should probably be the last section as far as a CTA goes.
• Let's talk more about this Monday 🍑 ✨

[srinjoym]

Just dropping a screenshot of the desktop page updates I have made here, we can discuss more in the standup today!

cc\ @brandonrosage @mozzadrella

[johndbritton]

@srinjoym You might want a Back to Classroom at the bottom of that page in the Classroom section.

[brandonrosage]

RE: Wall of text

Generally speaking, I think these web pages are missing illustrations of the product in use. Basically, a smaller-scale version of what https://github.com/features is doing. Or, you know, what that knucklehead at Ushahidi did to their homepage 😛

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. Thank you for your contributions.