17

Please critique: learnreact.design

5 years ago from , Founder at jimu Labs

Hey DN,

It's been quite a while since my last post about the React course. Today I decided to do a different kind of update.

We've redesigned the course website from ground up: https://learnreact.design

What do you think? Please feel free to critique its design and anything else. I'd really appreciate your feedback.

This site is implemented in React (of course!) and a static site generator called Gatsby.

Update: Just added some Valentines day touches. :)

Thanks, Linton

17 comments

  • Duke CavinskiDuke Cavinski, 5 years ago

    Basically, most of this looks like a very long google doc that no one really wants to read. However, there is a lot of substance and good content there that I think a good designer could do some fun stuff with. Thanks for asking and reading.

    EDIT: Take a look at Basecamp's style. They have a lot of text and illustrations, but everything flows very nicely.

    3 points
    • Linton Ye, 5 years ago

      Yup Basecamp does look decent. Hmm.. let me think about how to remove the feel of "a very long good doc"..

      Thanks a lot for the feedback, Steven!

      0 points
  • R Z, 5 years ago

    Hi Linton,

    I'm currently learning ReactJS at Udacity so I'm probably your target audience.

    One thing I want to know is how long the course is so if you can provide a time frame, then that would help me decide whether it is the right course for me.

    For example, check out https://designcode.io/. One thing that I like with this site is they provide how many learning hours you need -- like 44 hours of video lessons.

    Also, I usually like to get email updates on websites I like and I notice you don't have an email subscription. Can you setup a mailing list for those who are interested but not ready to commit. Email marketing is a powerful tool.

    3 points
    • Linton Ye, 5 years ago

      Thanks! Yup it's a great idea and I'll include a time frame. There will be an email form on the site too. I just need to figure out how to merge it with the other form.

      1 point
  • Robin GoyalRobin Goyal, 5 years ago

    There are lots of usability issues. Do you guys have UX/UI Designer or are you looking for someone? I'd like to help you guys as contributor. I haven't seen UX perspective but UI is quite oldish and not good looking. By the way, a designer doesn't have to learn coding especially UX/UI Designer since UX itself is too much vast but hey until or unless that designer's too much experience and then he/she might move to other fields.

    2 points
    • Linton Ye, 5 years ago

      Thanks for the feedback. Do you mind pointing out a couple of the usability issues that you've mentioned?

      0 points
      • Josiah TullisJosiah Tullis, 5 years ago

        One thing that stands out is that the primary CTA "Enroll Now" scroll jacks all the way to the bottom of the page. Maybe make this the second section on the page so that it doesn't scroll jack as far. A modal might work even better.

        0 points
        • Jan ZhengJan Zheng, 5 years ago

          yeah I totally agree. And then it pops up a "BTW: Want to learn how to make this site?" message on top of Enroll Now. Makes me want to X out of the site immediately

          1 point
          • Linton Ye, 5 years ago

            Yup gonna try embedding the form statically instead. Thanks a lot for the feedback!

            0 points
        • Linton Ye, 5 years ago

          Thanks! hmm.. let me think about how to improve that.

          0 points
        • Robin GoyalRobin Goyal, 5 years ago

          Secondly, the placement of Learn React Unleash Your Design Superpowers and button are wrong. You want your users to focus on that one thing whoever lands first time. It should be in middle. Why waste space? Thirdly, There is Enroll Now button on top left corner side right along with 'learn react design's logo' why? Why place two times enroll now? I understand that It's a business goal and you want users to buy but that's not right strategy. I see in middle clearly and simply. Fourthly, Testimonial section is shady. Never show one. Always show more and when you show more. Make sure it's mixed kind of review. 1 or 2 bad but 3-4 good cause in that case you get to earn user's trust. Well there are more issues.

          0 points
  • Anthony Irwin, 5 years ago

    Echoing some people's feedback, it is a ludicrous amount of copy to expect any visitor to read. There's no way to quickly digest the content here, it would take me ages to get through, and that's just not really the user expectation for marketing pages. People expect an elevator pitch with quick bullets. You don't even have the price point until the user scrolls for ages, and then for some reason you have even more content, despite already having a course offering section above. Also, to some people's point, I wouldn't want to pay for courses about "unleashing my design superpowers" from a page that looks like no designer ever touched it.

    0 points
    • Linton Ye, 5 years ago

      Thanks a lot for the feedback Anthony! I've added these to my list. Let me fix them one by one as time allows!

      0 points
  • Tony Jones, 5 years ago

    Some good content here, but one major area for improvement is above the fold."Learn React Unleash Your Design Superpowers" is pretty generic. What makes your course different? For example, you could say "A premium training course to build real-world apps in React ", "Learn React by itself without npm, webpack, redux, router, and all the other fluff.", or "Learn React by drawing in React" Or even simpler. "Finally, a React course for designer by designers". :)

    0 points
  • Ramy Khuffash, 5 years ago

    Personally, I love the design. It's the best implementation of a conversational UI that I've seen so far, mainly because of the speed. Most try mimic the speed of a regular text conversation, which is just slow and frustrating, but this is really well done.

    How did you do it if you don't mind me asking?

    0 points
    • Linton Ye, 5 years ago

      Thanks Ramy. The implementation of the speech bubbles is actually pretty simple. I used Bubbly to create the speech bubbles in CSS, React visibility sensor to detect if a speech bubble is visible and used CSS transition for the animation.

      If you are interested in the code or the implementation of other parts of the site, remember to sign up the free email course where I'll talk about these in detail.

      1 point