The team behind Interaction Design Foundation has been working hard to redesign the website and now it is finally here. It's modern, sharp and adds new gamification elements improving your learning experience. This is my review.
First impressions
The differences are clearly visible from the start. It's a complete redesign over the old website with body and under the hood improvements while on the same time keeping the level of familiarity consistent; I had no problems navigating and finding my points of interest. Moreover the website feels faster and more stable.
What, how, when
The visual tone of the new site is aligned with what you can see nowadays. IDF bets on a modern & flat approach using solid colors and shapes. At first instinct I would have said "this looks metro" but looking closely you discover new elements that break away and improve the tile-effect. It's more similar with card based web design. And using cards it's a smart choice. It structures the content and makes it clear for the user where the information is stored and what purpose it has. Add to this some neat transitions and animations and you have yourself an enjoyable experience.
The website doesn't focus only on aesthetics. The new information architecture was done in such manner that you get front & center the content you need. For instance the new profile page emphasizes your current course progress and the certificates you earned. This mix motivates the user to push forward with his new studies. It worked for me. I'm back doing a course I left unfinished.
La Pièce de résistance
The courses are the main attractions for IDF.org. And with the new redesign you can see the level of attention invested into improving this experience.
The new course format focuses on cards and the way they are designed makes the lessons more structured and connected together. Also to add an extra level of engagement, IDF added new design elements for gamification purposes. You can spot subtle progress bars on certificates, courses and lessons and the points earned are pushed in front so you can know at anytime what is your status.
The courses still keep their well know format. Each course has a pack of lessons and each lesson has its own items (some mandatory, others optional reading material). For each item you have questions with direct answers (a,b,c etc) or questions where you have to write your own answer for later peer review.
With the new redesign, navigating through the lessons feels fast and fluid and the thumbnail cards are closely grouped together so you don't have to move around too much (I saw what you did there: Fitts' Law at its best.).
Room for improvements
Of course nobody is perfect. There are some things left that I think, in my opinion, need a tweak here and there. For starters in some pages the content feels cramped, like it's suffocating. Moreover there are a sufficient amount of font styles applied that create confusion to my reading/scanning patterns. This can be solved with a few updates to the font's hierarchy. Here I'm just being uber-meticulous. They have done a great job and I'm confident they are improving the website even as we speak.
One thing I miss though. I didn't find the left sidebar in the course page that helped you navigate through the lessons. I know they rearranged the thumbnail previews to make it more accessible, but when you opened a very big chunk of content, the sidebar was in handy. It would have been nice and curious to see an update for it. #justsaying
Conclusion
The redesign is here to stay and I'm glad that they decided to change the website. It's more attractive both visually and from an interaction point of view. The courses are a pleasure to navigate through and the new subtle gamification elements that are introduced make the learning experience even better. Don't hesitate and give it a try. I'm definitely going to extend my subscription.
Here are some other screens:
