In Fall 2016, I took a course called Interfaces to Information Systems. As a part of this course, I was required to analyze and redesign a popular website in order to make it more usable. I chose Udacity .
Udacity is a website that offers online courses to students all over the world. Redesigning this website proved to be challenging as on the surface it looked like a perfect website but digging deeper into it revealed some vital usability problems.
Detailed description of this project can be found at the Udacity Redesign Website.
Softwares: Balasmiq, Sketch, UXpin, Invision, Axure.
I follow the Design Thinking process suggested by IDEO. I divide my work into three stages:
Udacity is a very well designed website. I was impressed with how systematically the information was arranged and presented. Another striking feature of the website was that all the courses had a dedicated video shot for it. This made understanding the course much easier.
However, some oversights in the design appeared after I performed Cognitive Walkthrough(CW) and Nielsen's Heuristic Evaluation. Along with that I performed User Study based on the methodology suggested by Krugg which highlighted more errors in the design of the interface. This was extremely interesting to me. After a cursory glance of the website initially I had deemed this website "perfect" but a systematic analysis of the website revealed some crucial errors. I identified the following errors in the website based on those studies.
1. Payment information: I believe that this is a pretty big problem with this site. Not knowing what you are paying for could be a deal breaker for a lot of people (especially students).
2. Search Box: The catalog button contrary to my beliefs turned out to be easily discernible. But the users did point out the need to have a search button on the website.
3. Scrolling: I like the fact that they have all of their information on the home page. But what it is doing is introducing a lot of scrolling to the home page. I believe that this is a very heavy trade off for a website which has a lot of interesting links in the footer section. Nielsen talks about an “aesthetic and minimalist” design. I believe that should be followed in this case.
4. Sign up/Sign in: Udacity has the sign up/sign in option in the my classroom area of the website. I think it is a pretty standard practice to introduce those options on the home page.
I started with creating prototypes that addressed the problems I had identified in CW and Heuristic Evaluation. The first Iteration that I created could be seen in the above figure. The problem with the original home page is that there are some really ambiguous terms on there. For example, I have no idea what business means. Also, there is video on nanodegree but the user study pointed out that none of the users I conducted testing on watched the video. Also, there is no search option for the catalog. Except for the video problem, I took care of other problems in Iteration 1. I suggested an alternate Iteration 1 which can be seen below.
And then I commenced on a vigorous journey of creating more Iterations or Ideas that solved some problems but compromised on others. This was fairly interesting because small changes made a lot of difference to how I viewed the interface and how a potential user could view it. Some of the ideas that I came up with could be seen below
The Design Rationale behind these Iterations could be found at this link.
After a lot of deliberation and redesigns, I came up with the final prototype that can be seen in the below images. I believe that it addresses a lot of problems that I identified with the original website. Also, the fixes suggested should be fairly easy to implement.
A working prototype of my redesign could be found here.
While working with the Udacity website, I encountered a very interesting problem. The design of the site kept on changing every time I opened it. I later found out that they were performing an A/B testing with the layout of the site. But it was pretty challenging to work with the continuously changing design.