Noble Desktop Website Redesign
Redesigning a real website teaches more than any tutorial. Whether you're working on a personal portfolio or a client project, real redesigns force decisions about content strategy, visual hierarchy, and user flow that stick.
Noble Desktop's Web Design Certificate teaches Figma, HTML, and CSS — the skills behind real redesigns.
We launched a major website redesign earlier this month and we’d like to share some insights into the process. We’ll be discussing UX improvements, user testing, how to handle lots of content, CSS grid, flexbox, and speed.
A Major Improvement to the UX (User Experience)
We completely overhauled the visual look of the site, but one of the primary goals was to make the site easier to use. The last time we redesigned our website, we taught fewer classes. We simply outgrew that design.
Our previous registration process required multiple screens and was too complicated. We knew we could make it faster and easier, and we've already seen improved conversion rates. You can now see all class dates directly on a class page (at both the top and bottom of the page, so they are easy to find). One click and the class is added to your cart.
An even bigger improvement is for certificate programs which contain multiple classes. Previously you couldn't see the dates on the certificate page and had to go to another screen to select the certificate program. Now you see all the dates, and one click adds all the appropriate classes to your cart. The results we've seen in just a few weeks prove what we already knew, simple and easy = more conversions.
Insights from User Testing
We invited users (new and previous students) to come into Noble and asked them to perform certain tasks on our website. As we observed them, we learned some interesting things.
One example, is in our previous design we showed the entire class syllabus. It was very detailed and was overwhelming to some people that didn’t understand all the technical info that it contained. In our redesign, we still provide a link to view all this info (because some people will want to see it), but we condensed the essentials into a much easier to understand bulleted list. This makes the information easier to understand and scan, as well as helping the page from being overwhelmed with too much info.
Another improvement we made based on feedback, was reducing the number of screens and questions asked during the checkout process. We focused on making it faster and easier to checkout.
If you’re not currently incorporating user testing into your design process, we highly encourage you to start. You don’t even know what you’re missing out on.
Handling Lots of Content
Some times you need a lot of content, both for users and search engines. So how do you have all the content but not overwhelm users, especially on mobile devices where pages can require a lot of scrolling? In our class pages we wanted a place to write a longer class description if needed, but didn't want to make people (especially on mobile) have to scroll to see some of the other useful info lower on the page. We added a “Read more” link to reveal the extra content if people want to read it. We did the same thing with class dates. We show a few of the next class dates, with the option to “Show all dates”.
CSS Grid & Flexbox
For the coders out there, we’re using CSS grid and flexbox where appropriate. This made it easier and faster to build layouts, and do things that would have been much harder without them. Browser support for flexbox is very good. Browser support for CSS grid is not as good, but good enough for us to use it. It works on all modern browsers, except Internet Explorer has partial support with vendor prefixing.
In June 2018 (prior to the launch of our redesign) Internet Explorer was only 3.59% of our total traffic and that number has been shrinking each month.
Because Internet Explorer (IE) is such a small number of visits, we choose to not focus on it. A lot of the layout doesn't work properly in IE, but the major site features should work. No one has unlimited resources and time, so we had to make a decision. It just didn't make financial sense to put the extra time into supporting a dying browser (Microsoft Edge has replaced IE).