Behind the Design: Crafting the User Experience for Code School’s Homepage

Visit codeschool.com often? You may have noticed something a little different — our new homepage has launched! And though it’s true that research can’t take credit for the impressive, full-width video feature, or the new illustration style, I’m here to tell you that much was tested and analyzed to get the final product you see before you.

The First UX Project

Here at Code School, I’m honored to be part of a new team of designers focused entirely on the user experience of our product. I like to think of us as the liaison between you, our students, and the Code School team. One of the first projects we lent our services to was usability testing for new homepage designs.

To start off, we opted for quick, in-person user tests from nearly anyone we could get to sit down. We drove to co-labs, schools, and coffee shops, requesting just 10 minutes of someone’s time for feedback and insight into the designs — specifically reaching out to those we thought might fit in our current personas. These user tests allowed us to identify the pros and cons of Code School’s current page, and compare to our new designs, as well as a competitor’s site. Our goal? To ensure the updates to the homepage were positive changes and worked to solve existing problems.

Our Process

Being a new team to the company, there was a lot of learning to be done, so our first impression needed to give value without impeding on the rest of the internal process. Our first study was going to be loose and lean with 5 user tests on the current Code School homepage, 5 on new designs, and 5 on a competitor’s site. Each test comprised 7 to 8 questions, and there were 2 or 3 of us on location at every test, with 1 leading the test while the others took notes. If we had a third, they would transcribe the whole interview.

Image for post
Image for post

Analysis & Deliverables

Once we collected the data we wanted, our next challenge was getting it to the right people in our company clearly and efficiently. A great example of this would be quotes — we pulled valuable quotes from our notes and transcripts, and then organized them in a spreadsheet by feature, giving every feature its own column. Depending on how long the columns became, Code Schoolers could get a quick glimpse into what features got the most attention and what was said about them. And along with that, we did a breakdown of topics talked about and tallied the number of times users brought them up.

Image for post
Image for post

Since we used a tool called InVision for this particular test, we decided to utilize its comment feature as a deliverable to our designers. With this tool, we could place a marker over which feature the comment was based on for quick visual reference. From there, it’s an easy process of clicking on the marker to see the user’s comments as the designer goes through his revisions.

Image for post
Image for post

Results Are in the Details

Overall, our plan to perform and utilize user testing served us well, and has certainly impacted the result you see today. Key takeaways from testing consisted of adding testimonials to the design, and including a scroll indicator with the full-width video. We were also more aware of the type of language used, as some of our prior text left some confused.

Image for post
Image for post

The full-width video was originally designed in full color, which ended up taking attention away from other more important aspects of the design. Since then, we’ve placed a slight tint over the video to allow specific elements to stand out and move the user through the design. Among those elements was the small play button directly below the fold, which was hardly clicked in our tests. It’s since been changed to a small video icon, and we think it will live a more prosperous life as such.

Image for post
Image for post

The main button on the new homepage seems obvious now, but this wasn’t always the case. With the background video now toned down to a complementary blue to contrast our bright yellow button, new users are ushered straight to our new ‘Free Courses’ page. The idea is to have visitors up and coding as quickly and effortlessly as possible.

Everyone here at Code School is happy with our final design, and we hope our testing and research deliver you the best of experiences. Of course we plan to keep testing and are always looking for volunteer testers — we’d love to have you onboard, so if you’d like to participate, click here to sign up! We look forward to making Code School better and better thanks to you — happy learning!

Originally published at blog.codeschool.io on October 6, 2015.

Written by

Remote UX Research, Product Manager available for hire.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store