

Codecademy - how not to do a redesign - MichalBures
http://michalbures.com/blog/codecademy-how-not-to-do-a-redesign/
Some thoughts about the recent redesign of Codecademy's courses page
======
zds
I'm the cofounder of Codecademy. Unfortunately, there aren't comments allowed
on the author's blog so I'll comment here (I'm emailing him as well so
hopefully my comment gets posted to his blog).

We've received a lot of feedback on our initial courses page redesign since a
soft launch on Saturday. We're working on making it easier for our users to
find what's important to them and to discover interesting courses among those
available on Codecademy.

I'd love to hear everyone else's feedback - we've been making incremental
changes since the launch of the redesign (we work all the time) and we won't
stop until it's incredibly easy to find the right courses. As the author
mentions, we're starting with gradual changes. Thanks for your patience.

~~~
jcampbell1
Since you asked: When using the product, I see:

"That's correct! Next Exercise" often.

"Next Exercise" should probably look more like a button. It is not obvious
that it is clickable, especially to the 6% of males who are color blind.

~~~
zds
Thanks for this. Added it as an issue in GitHub and we'll start working on it
soon!

------
Karunamon
FTA> "You could say it isn't such a big deal. But if they don't care about
this what else they don't care about? Quality of the courses? User
experience?"

This entire line of thinking really bugs the ever-loving crap out of me.
Slamming the entire service based on a few misaligned elements? Pedantic much?

Edit*

I'd almost argue that the alignment was by design. Having the "start here"
lined up with the middle bar implies that you would "start" by taking some
action on that bar, since most of us read left to right. In this case, a bad
cue. By breaking up that line, you cease going right and look down instead.

~~~
tomcreighton
He's not slamming the entire service, he's slamming the redesign, and rightly
so. The entire purpose of the site is to teach - and the changes to the design
have obfuscated what course you're supposed to take next. The design is
objectively not working as well as it could.

~~~
zds
We've heard comments from both sides of the table and we're working as fast as
possible to create something that's easy to use for _all_ of our users. Thanks
for bearing with us.

------
calydon
Taking a stand on something publicly takes courage so I don't want to be too
dismissive, but respectfully, Michal, I disagree.

I'm taking the Javascript courses and I barely noticed the page had been
redesigned. (That's good design!) I had no trouble finding and walking right
into what I wanted. The layout is clear, logical and looks good. The 'start
here' tag is probably superfluous because it isn't needed. It's obvious where
you should start, depending on what you're after. I immediately got that the
HTML course material had been added, but really it seemed like not much more
had changed.

I think overall, your article was bad advice.

The slight misalignment of a few elements should be corrected, but actually,
why bother - NO ONE but someone with a bone to pick would notice something so
trivial. Build, measure, learn - don't obsess over UI pedantry.

Michal - I looked at your proposed redesign and found it cluttered, hard to
read, and confusing. Codecademy - here's a good example of when to ignore your
vocal users.

~~~
zds
Thanks for your comments, calydon. I'm the cofounder of Codecademy - would
love to hear your feedback via email (and on HN).

------
cesart
For someone very vocal and direct about one specific designer's work, there
seems to be a very obvious lack of work, a portfolio or a link to a Dribbble
profile on his own site.

As a designer myself, I'm always down for critiques and feedback (especially
when it's a tough pill to swallow — this is what keeps me improving), but
Michal, your post was overly critical and not constructive in any way. You
mentioned your youth and ambition — being a designer is all about
communication, whether in creating a product for your users, in pitching
clients, in explaining functionality to an engineer, etc., and in my opinion,
this is not the way to communicate with someone regarding their work, designer
or not. Best of luck in learning this.

Edit: here's an example of someone doing something similar in the right way:
<http://kyrobeshay.com>.

~~~
harlanlewis
If the criticism has merit, the lack of a Dribbble profile (of all things)
should _not_ be used as a shield against critiques. I say that as a huge Dan
Cederholm fan.

To CodeAcademy's credit, they're doing a great job welcoming and acknowledging
feedback without making any specific promises.

The web is full to bursting with design critiques, but the ones that build a
name for their authors always seem to have an air of "how the fuck did you
screw this up!?" While these critiques are annoyingly divorced from workplace
politics and not necessarily a great way to deal with clients, coworkers, or
bosses, us huddled masses love a good controversy. Frankly, that's why I'm
reading this thread - I _love_ seeing someone assert their opinion with an
argument stronger than "looks gross". And while this author's particular
argument may be presented a bit thin, the underlying principles are sound.
Every worthwhile engineer I've ever worked with appreciates concise,
believable, REAL insight into why some designs work and some designs don't.
Worthwhile engineers like learning things.

Keep your confidence up, MichalBures. Keep writing.

~~~
cesart
You're right, that's just what the Internet needs is another sensationalized
and under-credentialed blogger.

------
zdgman
Great to see zds in here actively addressing comments. I was really surprised
to find the site redesigned after not having picked it up in about a week
(been to busy to walk through the rest of my missing tutorials).

I have to agree with the sentiment currently, the redesign throws way too much
in your face all at once and I can only imagine for a beginner that you would
easily be pushed away from the site if it was your first time trying to get
into it.

For me, I would like to be asked up front which path I would like to take: Are
you looking at applications or are you looking at web apps? After that only
show me the lessons that relate to that path and pull back the rest of the
site design to be as minimalist as possible.

What would also be great is if I didn't have to bring up another tab just to
look at the QA section when I get stuck trying to implement a solution.

Finally, would love if the code panels were actually a bit bigger so that when
you have a multi-line program you could view all of it at once. I don't know
what is the most used resolution when viewing the site but I imagine you do
have room to make the console bigger regardless.

Love the product and I am definitely going to keep using it regardless of the
design.

~~~
zds
Thanks, zdgman. Really appreciate the in-depth feedback here - it gives us a
lot to go on for the future.

We're going to simplify things for beginners and existing users. Many users
have chosen their path (Code Year, for instance) so they're seeing different
screens than the majority of HN users (depending on their use case). We'll
start to show people relevant courses to them over time too.

We're actually in the middle of changing some of the editor features to do
what you mention and also to fix QA. Thanks again for your feedback. I'm here
to answer questions (and you can reach us via email).

~~~
zdgman
Glad to hear it zds. Would be nice if you guys published a blog post in terms
of where your road map was going.

I know you all are probably buried under it in terms of work but even giving
people a little bit of detail helps?

Seems like you need a community manager to get the word out / gauge the
performance for you guys:)

------
valhallarecords
I don't care much for alignment. I think it's nit picking for the most part.

The simple list format you had before was much easier to understand than the
new design.

The new design does look prettier at first glance though, but it just becomes
frustrating once I try to actually use it. It's very unclear which course I
should take first. I get no sense of prerequisites. Different types of
activities (ie. projects vs lessons) are mixed together.

~~~
zds
Thanks, valhallarecords. We're working on implementing a mix of the two
designs. As it seems you've noticed, we've worked on pulling together "tracks"
which are the lists from the former design along with new course listings.
We're iterating based on a lot of this feedback.

------
twelvechairs
The author is really making the most of this. Sure, Its not the greatest
redesign I've ever seen, but is it the worst? No. far from it. And his own
redesign is not exactly an earth shattering improvement - some relatively
minor tweaks (which work at this resolution well, but perhaps not others)
only.

------
tagawa
I think there's a lot of truth in the criticisms but is the harsh tone really
needed? Seems to me as though they're trying out small design changes,
listening to feedback (as evidenced in this page) and improving things as they
go along. Sounds like a good recipe to me.

~~~
zds
Thanks, tagawa. We're taking all the feedback here and making changes (some
now, in fact!).

------
malectro
The grammar of this post really detracts from the arguments.

------
MichalBures
Here's my follow-up post [http://michalbures.com/blog/follow-up-on-the-
codecademy-post...](http://michalbures.com/blog/follow-up-on-the-codecademy-
post/)

Also I'd like to write it here too that I really appreciate and thank you for
all the constructive comments.

------
commanderkeen08
"Codecademy is about learning and teaching so something along the lines of
What do you want to learn? would be more appropriate here."

you mean exactly what Treehouse asks?

------
jkantro
Preface: I'm an interface designer with a background in human-computer
interaction. I come from a family of teachers, so the processes of learning
and teaching lessons is nothing new to me.

The OP isn't wrong. This design has some major flaws, especially considering
it's launch point for academic lessons. This design tries to provide many
affordances through a simple layout and language, which unfortunately is one
of it's core weaknesses.

As a designer, I fully support providing users with affordances to help guide
them through the navigation and (initial) experiences they have with a
product. The design of user affordances can be very hard to scale in covering
a swath of new experiences, specifically those for learning and teaching new
lessons (languages, projects, etc). This is especially true in Codecademy's
case. With teaching and learning a lesson, it's a journey of an experience
with a story or narrative that we all generally share/follow. Knowing this and
from experience the design of a learning and teaching experience is one that
should be guided through the means of using clean and intuitive interactions,
layouts, straightforward language, limited and specific color choices, clear
and understandable iconography and most important the display of relevant and
necessary information.

The design of this page unfortunately doesn't follow much of what I've
generally just stated. It lacks focus partially due to the language, the use
of 5+ colors, general layout, ambiguous iconography, and the lack of sensibly
presented information hierarchy and relevancy. You don't know which container
to start with, and whether or not the content in one is relevant or has an
impact on the other. It all starts with the left container and the yellow box
stating 'Start Here!->'. If you start there and try to follow along you can
either end up in the right column or continue further down the left column.
This is where the navigation and understanding of this page falls apart.

Path of the Right Container:

If you go to the right container you are presented with a list of projects and
lessons that can filtered in two different ways: Above the list is filtering
by language/platform/all and to the immediate right of the list is filtering
by lessons/games/misc/all as well as a search field. There too much filtering
and currently unnecessary search field for a contained design and growing list
of courses (currently at a total of 24). Better inline segmented of of the
list (i.e. segment games from courses from misc as opposed to random
ordering). There are plenty of other issues but let's continue on.

Path of the left container:

Continuing down the path of the left container your asked the only question of
the page "Hello! What can we help you build?" Ideally I'd imagine this relates
to a user finding and picking a project game or lesson in the right container.
But, immediately below the question there is an instructional statement to
'Pick a track to start learning" where a user can select one of two answers
'Applications' or 'Websites'. If a user then clicks one they are taken away to
a different page with out any feed forward affordance via language or visual
queue at all. This makes you question what's the point of the right container
with all those options if I'm going to be taken to a different page.
Continuing on, just below these 'track' options is another section titled 'Up
Next', which contains a course title and button to 'Continue course' that I've
partially completed. Because it's titled 'Up Next' its misleading and now
seems arbitrarily placed on the page with no connection to the content above
or in the right container.

General conclusion:

Between the issues with language, layout, information hierarchy, relevancy and
more, it seems like this design wasn't fully thought through or tested enough.
As a designer who cares, this is troubling for a site offering an academic
service with potential to charge its users. Even more so because I hope these
same issues don't care over to other pages.

------
wyck
It is kinda confusing.

Agree with bad alignments but more importantly there are just to many options
that basically do the same thing.

I find this type of page 1000x more useful ( the profile page as well),
<http://www.codecademy.com/tracks/javascript>

Several nice pages makes the cluttered <http://www.codecademy.com/courses>
even more strange, which fails this first metric of UI, KISS.

~~~
zds
Thanks for pointing out what you do like - we're working on placing more
emphasis on tracks.

~~~
wyck
To be more specific.

This page <http://www.codecademy.com/courses>, shows no hierarchy on where I
am in the course, I think this is horrible UX. Compare that to this,
<http://www.codecademy.com/tracks/javascript>, where I know exactly where I am
in the process.

------
ramatgan
I absolutely agree, new design is absolutely terrible. Hard to use and
understand where the last lesson I left off at.

~~~
ooobo
I'll add that I gave up on Codeacademy a few weeks back because every time I
visited the site from my email, it had a new design/format on the courses
page. I got bored of figuring it out again each time, and the fact my Facebook
Connect login never seemed to keep my progress from last time.

It's a hard situation, because they clearly are improving the site and adding
features to the courses (tracks etc.) that are welcome - perhaps CodeAcademy
need to work on communicating what has changed to the users. For example, when
I signed up it was really just one exercise after another, now it has
tracks/courses/games/lessons. Maybe it is just a wording problem?

~~~
zds
Would love to hear your feedback - this is the first major redesign we've done
of the Courses page and not much has changed before now. We'd love to take
your thoughts into consideration as we redesign it.

We'll also do a better job of fixing wording and explaining what's going on.
Thanks again.

------
truth_dude
dick

------
jsavimbi
You're right, the redesign looks shoddy and inconsistent with modern layout
conventions. Truth be told, they probably didn't hire a designer to do the
work.

~~~
twog
They actually have a really awesome designer, <http://allisonhou.se/>, who is
the lead designer there.

I personally love the redesign.

~~~
jsavimbi
No, they actually do not.

The visual design is poor enough, not to mention the actual code
implementation but the interface itself is even more disjointed and
incoherent, using a varied mix of metaphorical elements on the view that have
no implied structure, hierarchy or continuity. It's as if each part of the
view was designed in isolation without regard for the others.

That turkey wasn't ready to come out of the oven.

~~~
zds
I'd love to hear your feedback a bit more in-depth, jsavimbi - as mentioned,
we do indeed have an in-house designer and design is a big priority for us.
We'd love to hear what you think we can do better. Feel free to email us -
contact (at) codecademy (dot) com. I'll read every email.

~~~
jsavimbi
> That turkey wasn't ready to come out of the oven.

Like development, design works best by iteration. The overall concept isn't
bad per se, the implementation looks to be haphazard and needs style, tone,
ease of use and continuity.

> what you think we can do better

Iterate, iterate, iterate.

------
5teev
For me, the site design is a small matter after the jarringly cacophonous
name.

