A Case Study in Design

As you are all working on Designing your UIs for your apps, I thought I would add a case study to complement our Design Principles slides.

Let's compare USC's now 1-year old online class schedule, located at https://ssb.onecarolina.sc.edu/BANP/bwckschd.p_disp_dyn_sched to Stanford's at https://explorecourses.stanford.edu/. After using both you will feel, like everyone else who tries them both, that Stanford's is much better. But, as a developer you need to understand exactly why it is better. You need to be able to point to the exact features that make it better, and to the specific problems in USC's site, so you can avoid these mistakes in your Capstone project.

Stanford starts of with a simple, easy to remember URL, and a very nice design. I am greeted with a powerful search box right at the top. As we know, most people nowadays simply jump to the search box to find what they are looking for. This design supports that behavior. But, I also get a list of all the majors. With 1 click I can see, for example, all the CS courses. This is another very common use-case: show me all the classes in my major. The list of classes is pleasant to look at. Once I find a class I like, another click shows me the times it is being offered. If I search for a class, say "CS 142" then I am dropped into a page that shows that class. One more click and I can see all the times that class is scheduled for next semester. Also, note that the building names are linked to a map showing the building's location. Students who have to travel across a large campus would find this small feature very useful. Overall, most users find what they are looking for quickly, without much work, and the site is pleasant to look at.

In comparison, USC's schedule site starts of with an incomprehensible URL, so the site is only effectively reachable from my.sc.edu. Unfortunately, no one will google-search for "my.sc" when what they really want is the "class schedule". Note that if you google "class schedule stanford" the first hit takes you to explorecourses.standord.edu. You want to design your site so that users can find it using google (or Bing).

USC's first page is completely unnecessary. It simply asks you for the semester you are interested in. Clearly, 99% or more of the visitors choose the next semester, so that could be the default, or this question could simply be asked in the next page. The choice of a gray background is odd. The layout of the site it too busy, too many unneeded boxes and lines. The main title is "Dynamic Schedule". I have no idea what a dynamic schedule is; I was looking for the class schedule. There is no need for a Reset button.

The second page shows me 17 different controller boxes, which is way more than anyone will ever use. I have to choose a campus. This is something that should be handled by domain name, for example, USC Aiken is at usca.edu, so their schedules should be at classes.usca.edu. The next box, labeled Subject, asks me to choose one subject from 100-or-so using a 10-row select box. Using this select box is very painful. A textbox with smart autocompletion would be much better, or just list all the subjects like Stanford does. The rest of the textboxes will only be used by 1% of the users, or less. The Course Number textbox only accepts an integer input, so I cannot enter "CSCE 490" to find that class, instead I have to set CSCE as the Subject and then 490 as the course number: two steps when only 1 is needed. Because of all these search boxes the page is so long that I have to scroll down on my 13" laptop just to see and click the "Class Search" button.

The results page shows a large block for each section of each class, each block repeats the common information from the class (tile, term, date, etc.) and only differs in the section times and instructor. This is tiresome. For example, CSCE 101 in Fall 2014 has 20 sections. This means that when I list all CSCE classes for that term, at the top of the page I have 20 blocks of CSCE 101 that I have to scroll past. The actual course descriptions are not formatted very nicely. A mistake made here is a common one with beginers: to list the database column name followed by the value, such as "Associated Term:" followed by "Spring 2015". A human reading the class description will know that "Spring 2015" means that the class is offered in that semester (because of the context, we are in the class schedule website). So, the words "Associated Term" are not needed and only clutter the page. Similarly for other words such as "Levels" and "Attributes". Remember, humans are smart; they can and will infer a lot of information from the context. The link to "View Catalog Entry" takes me to another page. It should instead just insert the description right there, maybe with a nice sliding animation (use jQuery). The whole page could use more collapsible sections to make it shorter and more readable.

These are just a few of the problems with the USC class schedules site. To avoid these problems in your project, always think of your Personas when building your UI. Ask yourself, what does Alice P. want to do? how can I make it easier for her? Then, do the extra work needed to make it look good and perform well for Alice. Yes, making it work is first and most important, but making it look good is the second most important thing. In today's software marketplace functionality is often easy to achieve. What distinguishes you is your UI. What keeps your company in business is how much your clients enjoy using your software.

One final note, when I searched for CS at Stanford I got the message, shown to the right, where Stanford is asking their CS students to help improve their course schedule website. This is nice, and a good way to promote innovation. Last year I asked the students in this class to do some rough designs on USC then-new class schedule site, these are some of their ideas.