User Experience -- want to help with design? We need help at every possible level.

[kytrinyx]

This is a project that is for and by developers... and it shows. The front-end has received all too little attention.

If you're curious about any particular discussions that we've already have that touch on design, check out the issues that are linked to below.

Since I don't know design, I don't know the best way to work with designers, or how to best help designers contribute. So I'm starting this conversation as a way to figure that out.

A bit of background on exercism:

There are basically three groups of people that use exercism, and they use it because of completely different pains and motivations.

• newbies, learning to program (language is kind of incidental)
• polyglots, experienced programmers who want to ramp up in a new language
• artisans, experienced programmers who are digging deep into design, readability, trade-offs, etc

The homepage mostly reflects this, and the onboarding does a little bit, but we have not at all thought through the major user flows etc from the perspective of these different users. I could definitely use help with even the most fundamental thing: Asking better questions.

At the second level, we have some features that we've kind of sewn into the site, but that might not be really solving the real problems. It would be nice to rethink these.

Then we have features that I think basically work, but that could use a lot of help visually to make it easy for people to understand what is there, and how to navigate.

And then finally there's visual consistency. Each page kind of lives alone, and while some work was done a year ago to try to normalize things (whitespace, grid, fonts, etc), we've done a lot to mess this up, and some things were never really thought through properly.

In terms of design, I really like the logo, and I like the basic colors:

• pink #D81D4E
• charcoal #212121
• some shades of gray between charcoal and white

I'm not married to this, but I think it's a perfectly reasonable starting point. I'm not married to any design decisions... I think. I'd love to discuss every aspect of this with someone who knows design.

The features that basically work are:

• The activity stream (both at the track level, and team level)
• The code/discussion page

I'm sure there are tons of improvements that could be made, but I feel like step one would be to simplify around what we already have, solidify the user experience, and then iterate and enhance this core of functionality.

[ghost]

I'm interested in working on this as part of learning about the front end for RailsGirlsSOC. I need to talk this over with Ramya + the team, and get more information from you, Katrina, before making a decision.
I do think it would be super helpful for you to have a styleguide, which maps out the basics of what colors are used where, what fonts, what patterns, as outlined in this article from alistapart:
http://alistapart.com/article/creating-style-guides.
Something that I'm interested in doing as a learning project just to find where the .css files are and how/where to edit them, is to change the chosen navigation colour in languages (and whereever else it's used, such as the CLI installation instructions - here's an example in C#) from facebook style blue and white to something more in line with Exercism's current color choices of

• pink #D81D4E
• charcoal #212121
• some shades of gray between charcoal and white

Is that ok with you to go ahead as a small learning experience whilst we're getting a handle on statistics, how the site works, etc?

[kytrinyx]

I am hesitant to work on a style guide, before we've figured out what the styles should be, but if you have good arguments for why now is the right time, I'd like to hear more. We can take this discussion offline, too, and report back here with our learnings.

[ghost]

grays = #eeeeee (pale grey) + #cbcbcb (darker grey)
I thought these greys had a slight touch of pink/red in them, due to the way that they were showing up in photoshop, but they don't. It does however have me thinking that it could be a good thing to trial at a later date, and it's a nice salute to the "devil in the details".

I'm fine to have a shot at implementing the above next week in order to remove the blue/white nav and replace with the more in line dark grey/red.

[kytrinyx]

I really like this! Thanks for running with the experiment.

I thought these greys had a slight touch of pink/red in them, due to the way that they were showing up in photoshop, but they don't. It does however have me thinking that it could be a good thing to trial at a later date, and it's a nice salute to the "devil in the details".

Yeah, that would be a neat thing to try out, at some point.

[Insti]

I'm really disliking the grey buttons. It makes them all look like they are disabled all the time.
Can we have a bit of color back in them please?

[ghost]

@Insti just to check - which buttons where are bothering you? The grey is a temporary solution in line with the current colour scheme of exercism, so I'd love to hear your thoughts.

[Insti]

The submit comment button on the submission page: http://exercism.io/submissions/f72e42aa0c244a33a2e9e738cf2bc349

Also on the 'edit comment' page, but that's harder to link you to.

[ghost]

@Insti thanks so much for your feedback - I agree, the grey buttons for submitting + editing comments are something that need to be fixed asap, and I'm onto it.

[ghost]

@Insti now a pull request: exercism/exercism#3030
so you should have colours back soon.

[kytrinyx]

We're doing a massive redesign as described in #113 and #154.

We'll continue to post here in this repo for feedback and input as we define and refine our questions, insights, and experiements.