Redesign entire site to combine training services with teaching resources

[jordanmccullough]

Now that all resources from https://teach.github.com have been migrated and merged into https://training.github.com, the redesign can begin. This effort includes making the teaching resources—outlines, class notes, presentation decks—all available within a unified design in addition to the existing training service event page(s).

[afeld]

Speaking of keeping PRs small... :trollface:

[jordanmccullough]

Ugh! I was so excited to get this out to everyone, forgot a rebase -i. Let me clean this up and use The --force. Hang on!

[jordanmccullough]

Ok, used the --force but a much cleaner history for the redesign effort.

@jglovier Want to lend your :eyes: on this and work some of your design magic on it when you have time?

[jglovier]

@jordanmccullough yes sir! I'm on it first thing this morning. :thumbsup:

[jglovier]

@jordanmccullough I decided to give design feedback first (so you know what I'm thinking and why I'm making the changes I'm making so that you have the chance to argue with my perspective if you like, and also so that there is a historical record of our design process) and then I'll work on addressing as much of it after ward as you'd like me to. This is as much a checklist of things for us to address as anything else. DAT COLLABORATION BABY!! :boom:

Landing Page

So I like the general concept and feel here, but I think we really need to rethink some things.

Site Navigation

• Needs a call to action - Highlight an item as the primary action; from an information architecture standpoint, the site should have one primary goal that users can feel like they are working their way toward, just like in the sales process. Once they get all the information there is to consume they should feel like there is a clear call to action we are asking them to take (whether it's contacting us, booking a training, or something else). The one action that is the greatest purpose of the site should be highlighted in the site nav in a way that gives users a sense for what they are ultimately headed toward.
• Design polish - Some minor design issues need addressed, like the line-height of the links, and maybe increasing the size and spacing of the links, or even setting them to font-weight: 300
• Active class styles - We should definitely add some active class styles to the nav link for the current page, such as the current training site does; also, I'm in favor of keeping the Overview nav item for the home page

Site Footer

The footer really needs some help. The footer on the current Training site feels like it's useful and intentional, the current iteration of the footer in the redesign just feels unfinished. Some suggestions:

• GitHub logo - use logo and make a link back to .com
• Replicate nav - replicate navigation in footer for user convenience, and to list out any subpages that may not be visible through the primary navigation

Intro Area

• Background image - do you have a real image to use here (assuming this is a placeholder image by the low res nature and big white X through it)? While this image is composed well and looks nice in the layout, I don't think it really communicates something strongly related to the content. Not sure exactly what to suggest here yet, but lets think about another image that conveys the point of the site better.
• Text alignment - The <h1> is left aligned but the <p> below it is center aligned, which feels awkward; also the <h1> line height is off, and the text-weight doesn't match our branding (should be font-weight: 300;)
• Link styling - I'm :thumbsdown: on the link styling in the sub-paragraph below the <p>. The whole words should be colored to avoid any user confusion as to whether it's a link or not. Also, the chosen colors for the underlines - while they match the corresponding on the landing page below - don't match any of our actual brand colors. Finally, on :hover text underline is being triggered by default, which results in what ends up looking like 2 bottom borders.
• Layout - So the idea of a full screen intro area is cool - sets the mood and all, but in practice I think it's pretty problematic. Two main issues with it are 1) it makes the site's first impression a very information sparse, and for a site that is nearly 100% informational (marketing) content, I think that's problematic, and 2) it behaves strangely in different circumstances that could potentially be frustrating to the user. For example, full screen on an external display leaves you wondering if there is anything else on the page at all; half screen on an external display (I usually browse this way on mine) results in strange clipping of the image; and only on smaller laptop displays does it actually look right.
• IA/Content strategy - Finally, I think the biggest issue with the landing page its that it doesn't feel like it has a content strategy; right now it just feels like a glorified site navigation. It's a good start but there's room for us to take it much further. I'm not sure the exact strategy, other than that we need to flesh one out further here. For starters I would suggest we can add richer information to the areas that point to other sections of the site.
• Use of background colors & photos - I'd like to steer away from the use of different background colors and photos for each section. It's a bit jarring, and detracts from the content as is. The events area photo is awesome, but the colors there don't have enough contrast on the white text. The resources background image with text really clashes with the content of that section; and the contact section doesn't even have a background photo (guessing maybe you just were still looking for a good one?). In any case I'd like to see us make the colors of these sections more subtle, and keep with one overall theme color for the site - preferably the brand blue that we are using now to bring some consistency with the existing site. Since this is a complete redesign of an existing resource that people are familiar with, maintaining at least one aspect of the existing design will help people feel less disoriented with the new design. So I'd suggest we stick with shades of gray and blue from the existing site.
• Adding supporting images, graphics or octicons - So if we remove the background photos, there are no other visually content clues. Let's add some graphics or octicons that help visually carry the connotation of the content for each section of the site that's being linked to.

Subpages design

A few things really stand out to me about the subpages in general.

• General layout & design - the overall layout is solid, but feels a bit sterile. I think here again the lack of graphic elements beyond the stock hero image is making it feel a bit lifeless. Also, the use of some color would really go along way. The classes page, for example, does make use of the green color as an accent in a few places, but the other pages don't. I think there's a few things we could do along these lines to breathe a little more life into the design
• Hero image - I'd like to see some stronger photography for our hero graphics. I think the stock photos just aren't cutting it. One of the ways we could breathe a bit more life into the design as mentioned above would be to use full width imagery here. For example, the photo of @johnbritton on the classes page could be used as a full-width background image instead of a tilted inset photo. Similarly on the other pages, I'd love to find some better photos to use that could be full-width background images. We have so many great photogs within the training team alone, I'd be shocked if we didn't have plenty of great real life images to use.
• Page titles & URL structure - back to the information architecture of the site, one glaring weakness is that the structure of the subpages is really confusing. For example, the page url, the nav link, and the page h1 should all generally represent the page them so users understand instantly what the them/purpose of the page is. That consistency, however, is currently missing. The /attend page for example has Our Classes as the nav link, and Education from the Experts as the page heading, all of which leave plenty of room for user confusion. At a minimum the url structure and nav links should be identical, and headings should at least contain that word or phrase in them too.

Subpage: Our Classes

• Class types - I'd like to explore some other ways to feature class types that makes them feel a little more like units.
• Registration link - The class registration link is the most important and actionable element on the page, so it needs to stand out more. Even just giving it a button style would go along way to that end.
• Upcoming classes - I didn't instantly understand what the upcoming class sections were, and while I think making the registration link into a button will help, also labeling them as "upcoming" or "being offered next" would help the structure of those sections be more obvious.
• Minor design tweaks - Larger font-size for the call to action buttons in the intro/hero area.

Subpage: Learning Materials

• Unfinished? It looks like this page is unfinished? I'm a little confused because the current resources page has a ton of stuff that I'm not seeing here, so either this page isn't finished or those resources have moved elsewhere and I just can't seem to find them.
• Hero graphic - The pencil is very "education-esqu", but seems more fitting for GitHub Education than training resources. Not exactly sure what to use here (photo of a monitor with a slide deck on screen maybe?) but whatever it is it should clearly communicate the correct connotation, as there is some inherent ambiguity in what these resources will be (i.e. - "Are they going to be resources for learning, or resources for teaching?" will inevitable be something users will have to figure out).
• URL/Title - URL is share, nav title is Learning Materials, and heading is Resources for Education. What do you think about just using Resources everywhere?

Subpage: The Team

• Layout & typography - I feel like the design of this page is a pretty solid step backward from the existing design. The layout and typography isn't nearly as compelling, and the avatars are much smaller which takes away the real personality of this whole section.
• Testimonials - Also why were the testimonials removed? Why not just keep the layout of the existing page with just a style update to match the new design. I'm not at all opposed to a layout update, but I don't think the new layout is as strong as the current one so either lets improve on what we have now, or just keep the existing.
• Hero graphic - Not sure why this page has no hero graphic at all, but I'd love to use a photo of one of our trainers actually in class here, if we have a really good one (fingers crossed)
• URL/Title - URL is team, nav title is The Team, and heading is Meet your trainers. What do you think about using Trainers everywhere? The term "team" is more a description of what we are from an internal perspective, and "trainers" is what we are from an external perspective. I think the latter is more appropriate for the external audience.

Subpage: Talk to Us

• URL & Page Title - So while the conversational tone of Talk to Us is very casual and disarming, the title of the page should be more direct (for sake of ease of recognition in the navigation). This should either become Contact Us or Book a Training. Remember, people read words as an entire shape (which is why all caps is so terrible for legibility), and users browse navigational systems by their recognizable wording. Talk to Us is going to get glanced over far more often than Contact Us because it requires the user to interpret it, whereas Contact Us or Book a Training` will be instantly recognizable as a familiar action.
• Minor design tweaks - larger text size for call to action; call out has awkward top/bottom/left/right padding; secondary section heading should match other heading styles (larger and font-weight:300); greater line height on list items; fix twitter follow button so not floating off to left side (centered); pleez too b changing iPhone photo :-p

Responsive

It's not, and it really should be. Especially since the existing site is responsive it would be a huge step backward to redesign without including styles for lower resolutions. Regardless it's the right thing to do for an information site, so we should really address that prior to shipping.

In conclusion...

I know this was a lot and I swear I'm not just trying to be verbose. :smile: I think there really are a lot of areas that require a fair amount of fine tuning before we can ship this as something we are proud to say is replacing the existing site.

Let's figure out some of the solutions here and bang them out in short order and get this rolling along. I'm happy to address any/all of the things I'm bringing up here, but want to make sure you have a chance to give any pushback or further input since you're the man putting this ball in motion and I don't want to step on/over you in any way. :thumbsup:

[brianburridge]

First, :+1: to @jordanmccullough for jumping in and getting right on this and getting out a first draft that we can iterate from. It's always easier to keep the ball rolling than to get it started in the first place.

Second, :+1: to @jglovier for spending the time to do a design review and articulate some great suggestions for getting the design of this new version of the site to the highest design standard GitHub is known for. Joel has suggested some great improvements that once implemented, will make the site both more aesthetically pleasing, but also, most importantly, make it easier for users to use and thus increase the odds they find it helpful.

[jordanmccullough]

Reviewing today, so just letting you all know I haven't dropped off the map.

Thanks to you all!

[cobyism]

Last night @jglovier asked me to take a look at this and see if I had any feedback, so here’s my thoughts.

---

Design/visual feedback

First, a few visual and design-level comments:

• We don’t have huge number of people viewing the training site on small screens (it looks like its about ~10% on mobiles, maybe ~17% on tablets according to Gauges?), but I agree with @jglovier that not making the experience great on smaller screens from the outset is going to be a big step backwards. It’s the default way sites should have always been, and it’s easy to do, so in this day and age (and for sites like this) I don’t believe there should ever be a question about whether it should adapt to small screens or not.
• A number of sites (community, enterprise, GHfM, etc.) have been (re)designed over the past few months to make more use of full-width imagery as backdrops for sections of content (especially landing pages and hero blocks). I understand the desire to follow suit here, but I just want to make sure it’s being done for the right reasons, and because it’s the right decision for the content of this site. What I feel like this redesign lacks however is passing the "squint test"—if you squint your eyes and stand back a bit from your monitor:
  • Is is recognisable as being this site and not another one?
  • What elements stand out? What elements blur into the background? Are these the elements you want to stand out?
  • Can you tell where the primary focus should be?
  • Can you still tell where the calls to action are?

I don’t believe the answers to these questions are favourable right now, at least compared to the current site. Here’s a crappy example of both of the landing pages blurred compared side by side:

I’m not at all attached to keeping the design of the current site. If it needs to go it needs to go—I’ll be the first to admit that its shitty in a number of ways, but right now I do genuinely think that the way key information is presented throughout the redesign is a regression from the current one.

• I hate stock images with a passion. This is a personal pet peeve, but I’ve always believed that stock images in a design (even as placeholders) are a clear symptom of not having thought through the site’s content and its structure properly. I’m a huge :-1: on things like this:

If we don’t have images of our own that are relevant and deserve to be there (even if blurred as background images), I firmly believe that going with simple, clear headers are infinitely better. Here’s an example:

Remember: Everything added dilutes everything else.

There’s a number of specific small bugs, visual inconsistencies, layout choices and so forth that I’d call into question too, but I’m not going to bring them up here because I don’t think it’s really productive to do so, for reasons I’ll explain in the next section.

---

General feedback

The biggest concern I have is that this redesign seems more focused on new visuals at the expense of the underlying information architecture and content. If we’re merging a number of sites together, some serious thought needs to go into how everything is going to be structured now that the site encompasses a much larger scope. The workflows are going to change, the goals are going to change, and the audience viewing the site is likely going to change too. Do we have a shared understanding of the implications of these things yet? If not, starting to work on the visual design of individual pages is going to be very difficult, as nobody will know what criteria to measure against to decide if a change is going to suit the site’s audience and IA needs.

This redesign is changing a large number of variables at once, so it’s going to invite a very wide range of potentially very confusing feedback. If you try and make changes on all of these levels (IA content) simultaneously, it’s going to make it difficult for people to articulate feedback, and difficult for you as a designer to know how to take feedback and act upon it.

Actionable stuff

Here’s some things I think would be actionable to make this site merger happen such that everyone feels great about the result:

• There needs to be a shared understanding of the new scope of the site, and if/how the site’s audience is going to differ with the new scope.
• We should develop a clear structure of the new site, the goals we want to encourage people towards, and the workflows necessary to get them through the site to achieve those goals.
• I think both work and feedback should proceed at one level of fidelity at a time. It’s pointless to talk about line height and visual polish of elements on a page until we’re in agreement about the need for them to be there in the first place, how important they are, what workflows they need to exist for, and so forth.

All of this is said with :heart:, and as I mentioned above I’m not at all attached to the current site design I did a while back—it’s definitely far from optimal. If people have the time and motivation to move to a new design to suit this multi-site merger then that’s definitely a good thing, but I just think it needs a bit more higher level attention to the structure.

[jordanmccullough]

Thanks to everyone for the insights and observations.

This redesign effort has brought to light that before any redesign effort wraps around the existing data, what should be done is a re-building of the data itself in a more logical, structural aspect.

I'll be opening a new PR, which will cross reference this one, that addresses improved information structure rather than design. That includes re-thinking the templating (such as cleaner ways of event list insertion), page/directory naming (/classes, /resources, etc.), microdata (itemscope, itemtype, itemprop) for better SEO, and more reusable semantic markup (<time>, <article>, <blockquote>).

From there, I'll leave it in the capable hands of designers to freshen up the layout/design once we're satisfied with the data redesign aspect.

Closing this PR for now. Onwards and upwards!

[jglovier]

This redesign effort has brought to light that before any redesign effort wraps around the existing data, what should be done is a re-building of the data itself in a more logical, structural aspect.

@jordanmccullough sounds good. :thumbsup: to moving forward at the structural level. Let me know if I can be of any assistance with UX/IA brainstorming. My markerboard is getting dusty. :smile:

[afeld]

@jordanmccullough Let's just make sure to not take on too much at once! E.g. not worry about SEO stuff until after the duplicate files are removed.

[brntbeer]

@afeld with the constant reminder to ship fast and ship often. Love it