Tweak homepage design

[kytrinyx]

Right now the homepage solves some important problems, but has some significant issues.

Good:

• we actually explain what exercism is
• we address the three target groups that actually use exercism, and we are very specific as to which pain this solves for them (and a bit about how)

Bad:

• the most noticeable thing on the homepage is the shout-y pink color. It's used for the background... and the background is the least important thing.
• walls of text

I think the most important change would be to remove all pink where it is currently used, and then use it for two things:

1. the three "call to action" buttons, one for each type of person who exercism is for, and
2. the newsletter sign up (we could totally improve the call to action for that, as well)

The second-most important change would be to break the wall of text into more airy bullets and use highlights.

[kytrinyx]

Ref: #34

What do we want people to do on the frontpage?
Here's what we currently have:

1. logo - go to home
2. languages
3. donate
4. notifications (bell icon)
5. login to github
6. 30 different languages
7. write code like it's prose
8. become fluent in a new language
9. master the art of clean code
10. signup for the "behind the scenes" mailing list
11. about
12. contribute to exercism
13. help
14. how it works (new devs)
15. how it works (experienced devs)
16. the command line client
17. github - exercism.io
18. twitter - exercism.io
19. newsletter (the mailing list)
20. heroku
21. bugsnag
22. rackspace
23. fastly
24. shopify
25. profile (exercism.io)
26. account (exercism.io)
27. API key (exercism.io)
28. recently viewed (exercism.io)
29. logout (exercism.io)

[kytrinyx]

@gusseting I'm not sure what the purpose of this list is—it puts every single link on the same level, but the things that we ask people do is a function of design, not existence.

@kytrinyx the purpose is to take stock of what is on the frontpage, and to see how we can best communicate those links within that space - for example, there's a mailing list form and 2 links on the frontpage. In the future, could it be worth considering having one method to communicate the mailing list, which is generally the standard for a front page?

It's not uncommon to do a stocktake like this before reconsidering a frontpage. For example, http://www.studiothick.com/ did exactly what I've done for: http://www.artsaccess.com.au/ in order to take stock before changing the front page. I'm checking with them re: mailing list form twice (unusual!) on their front page.

I've noticed that others eg: http://www.alistapart.com simply have a link to "email" which takes them to the signup form - perhaps because they wanted to provide options which would take up too much space on the homepage:
http://alistapart.com/email-signup/

Does that help?

[kytrinyx]

the purpose is to take stock of what is on the frontpage, and to see how we can best communicate those links within that space

The header and footer links are header and footer links. The menus are menus. There's a huge difference between a link within a dropdown (e.g. API Key) and a call to action on the homepage that includes a form. I don't understand how it helps make decisions about the usability of the homepage to list out everything at the same level of abstraction.

[troubalex]

Jumping in here, to get the ball moving again. I have been thinking about how I would approach this kind of thing in the given time frame. I hope this makes sense, and helps @gusseting further on her way.

Steps

1. Strip all styling from the page, including icons, font styles, and colors, to really only focus on information architecture and content. This can be done in any kind of word processor.
2. Rank what is on the page by importance. (Hint: some elements may have the same rank)
3. Work on visual hierarchy based on the ranking. Which elements have to be at the top, what should be bolded, do we have enough or too many headings? What is the main call to action on the page, and where should it be placed? Is there content that needs improvement, e.g. clarification, shortening, updating, or a plain rewrite?
4. Move to your design tool of choice, and start wire-framing in black and white. Play with rhythm, typography, layout, device sizes. If your comfortable enough with HTML and Sass/CSS, jump right into your editor, and start prototyping. Still no colors, only black, white, and grey. If you want to add images or icons, use placeholders so as to not distract from the IA.
5. Add color and other visual elements, and adjust as you move along.
6. Once you're happy, transfer your protoype over into the app.

Why am I proposing a prototype? By limiting the scope to the front-page and your own code, you will be able to focus on the actual page, and won't have to deal with the added complexity of a full-blown web application. Basically, you're decoupling the tasks, and focus first on the design, then on the implementation. Especially when considering the short amount of time you still have, you will be able to "deliver" something useful to the project at each step of the way.

Things to keep in mind

• It's okay if the front page looks different to the rest of the app for a while, as long as the inner pages don't break. Bigger changes can be rolled out over time (this is where you shout if you disagree, @kytrinyx). The only elements that need to be kept consistent are the navigation, and to some extend, the footer.
• The target audience is developers, some with more experience than others. Design inspiration should come from sites that target a similar audience rather than ... say ... people who love making scrapbooks.
• You will probably need to get some content changes in place. This will be much easier to get done, once it's visible on some kind of page, whether that is in a document or a wire-frame.

Critique

• It's probably wise to discuss your work with your local coaches, and get direct support from them when you need it.
• In addition, post updates and questions here so we can look at it all together, and give you feedback. You will have to publish the page, or at least your code somewhere on the internet for that to work. Ask your coaches or myself for help if you get stuck.

What you'll learn

• Basic information architecture
• Typography for the web
• Responsive web design
• Grids and Bootstrap
• Sass/CSS and a build tool
• Deployment of a static site, and git

Resources

• Dribbble.com is an excellent place to look for inspiration, so is Pinterest. The color search on Dribbble is pretty neat too.
• modularscale.com allows you to play with ratios and font sizes. This article has background information.
• placehold.it lets you work with image tags without the images. There are plenty of other services like this, just pick one.

[kytrinyx]

This is phenomenal, @troubalex!

It's okay if the front page looks different to the rest of the app for a while, as long as the inner pages don't break.

I completely agree!

You will have to publish the page, or at least your code somewhere on the internet for that to work. Ask your coaches or myself for help if you get stuck.

I would suggest plain HTML in GitHub Pages. It's fast, and it's a simple git push.

Adding notes of other issues to assist:
#30 - Onboarding: diagram that shows how exercism works
#53 - Explainer Video and/or images for exercism.io
#64 - How design problems we're having are solved elsewhere

[troubalex]

I thought I'd pick this up again.

Content analysis

content_analysis.pdf

While the content is now grouped by persona (or developer type), the flow of arguments is unsurprisingly similar. Unfortunately, the copy doesn't really address how it all works and hangs together with exercism, even though the process is implicitly repeated three times.

Rough concept

(This is a first brain dump, don't get hung up on the details)

This concept groups benefits for all three personas by the step in the process: doing exercises, improving skills through feedback from others, and finally improving skills by giving feedback. All three steps should be accompanied by some kind of screenshot'y illustration, such as a terminal session and conversations happening on the site.

The reasoning here is that at each step of the way, there is value for the individual user: newbies might already benefit from the process of going through the exercises and making the tests pass while the most expert users might find giving feedback to other experienced developers the most valuable.

Design challenge

Clearly pointing out the benefits of joining exercism to all three personas while at the same time give an idea about the process and steps involved.

Illustrations/screenshots are used to introduce the three different aspects of exercism, and to break up the current wall of text. As a side effect, it will force us to be concise and short in our argumentation, or the layout will break.

I believe a lot of the current copy can be reused, but I'd suggest condensing it down to the core. People don't read on the internet.

Caveat

I read though some of the user research @kytrinyx sent me earlier. Since it has been conducted on an apparently very different, earlier version of the site, it's hard to draw conclusions at this point.

I have a hunch however that the version that was tested took a similar approach. Can someone point me to any kind of screenshots or similar of the old version? I'd like to take a look and see if the concept was wrong, or if it was the design implementation that caused trouble.

[kytrinyx]

Here's the old homepage:

[kytrinyx]

(Sorry, that's in four different screenshots to get the whole page)

[jtigger]

I participated in some of the user interviews, synthesis and ideation that led to the current structure of the homepage.

IIRC, one of the big insights was that the way that each cohorts' (Early Programmer, Craftsperson, Language Nerd) need is best realized was through significantly different appeals, language and level of detail. That insight motivated partitioning the audience as the first step.

I see that the exercism process is conspicuously absent from the homepage. Is there's a way to address both concerns at once: to keep the audience partitioning while (succinctly) illustrating the three step flow?