Live data from Hacker News

Codecademy - how not to do a redesign

michalbures.com

41–50 of 52 posts

Re: Codecademy - how not to do a redesign

#41
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.

Re: Codecademy - how not to do a redesign

#42
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.

Re: Codecademy - how not to do a redesign

#43
post #9

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 amon…

I was doing each lesson weekly until I got too busy, and your site has since emailed me 3 times saying I should start my Code Year and presents me with info for week 1. I finished week 1 the day you launched, it doesn't seem to be checking my progress telling me to pick up where I left off.

Re: Codecademy - how not to do a redesign

#44

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 imp…

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.

Couldn't agree more. As someone's who is using Codecademy to learn, I find myself hunting around for the way I got to that useful page with the week-by-week lessons all spelled out in a nice list. Unfortunately I end up guessing URLs until I get it right, as it seems there's no easy way to get there via the actual interface.

Re: Codecademy - how not to do a redesign

#45
post #12
post #7

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.

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

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.

Re: Codecademy - how not to do a redesign

#46
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.

Re: Codecademy - how not to do a redesign

#47
post #41

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 y…

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.

Re: Codecademy - how not to do a redesign

#48
post #10

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 imp…

Thanks, Karunamon. We most definitely do care about what's going on the site and that's why we're dedicating so much of our time and attention to making sure the user experience reflects that and is easy for users. I'd love to hear any other feedback you have. Feel free to email us.

I think it looks great. Like the OP said, "The thing is that each individual part of the page is actually great." Each part is very clear, and important functions are easy to find. Keep up the good work and iterate!

Re: Codecademy - how not to do a redesign

#49
post #41

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 y…

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…

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

Re: Codecademy - how not to do a redesign

#50
post #13
post #2

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.

We have a designer on staff (as another commenter mentions, the excellent Allison House - http://allisonhou.se ). Design is a very big priority for us and this redesign is the first of many we'll make - it's an incremental process and we're focused on improving our designs until they're just right. I hope you'll bear with us as we fix this one.

I understand that the post about your site ambushed you out of nowhere and you were immediately compelled to shift into damage control by flooding the thread about how hard you were working on your design problem and all the other lip service the community demands. It's an unexpected pain and I sympathize with anyone who has to go through it.

However, shifting blame to one of your employees in an effort to cover your own ass for burping a lemon signals poor judgement and a lack of maturity on your part. To silence the critic, all you had to do was acknowledge the problem, allude to being "in development" and thank the over-eager Michal for pointing it out. Instead, you made it worse by exposing internals for a problem you should've taken responsibility for alone. Probably at the price of their reputation.

Your job today is to seek them out and make a personal apology.

Had it been a bug in the code, I highly doubt you would've named the entire dev team in a thread and pointed out the party responsible.

Post reply on HN