Redesigning Harvard
You’d think that a top-name school like Harvard would at least have decent-looking websites for its computer science courses, but apparently not.
For this project, I redesigned the website for Harvard’s Introduction to Theoretical Computer Science class.
My Approach: The Pedagogical Design Process
As a long-time teacher, my approach to design is uniquely pedagogical. I think of the user as my student, and I, the teacher/designer, must construct the website in such a way that that the user is “taught” how to navigate the interface. A good teacher uses a student-centered approach to teaching, much like how a good designer should create an interface that is user-centered. If you want to take a closer look at how this process exactly works, visit the Hertz page of my website, located under projects!
Before
After
The Challenge
Redesign the original website such that it is easily navigable and visually appealing for students. The website should be responsive and usable across multiple platforms to accommodate the technical diversity of college students (laptop, tablet, smartphone).
The Solution
I found usability and accessibility problems via initial observation, WebAIM WAVE, and a screen-reader. Using the research gathered I redesigned the website to make it more usable for a wider range of users and more visually appealing. After sketching, creating wireframes, and putting together a mockup, I actualized my work into a fully responsive website using HTML and CSS.
PROBLEM
SOLUTION
1. Difficult to make out a text hierarchy because the differences between text sizes are too small and corresponding information is not clearly grouped.
1. I sectioned all the information into more informative categories and added a navbar with dropdowns at the top of the website. By clicking on the navbar button or its dropdown you can automatically scroll down to the section you’re looking for.
2. Not really sure what the different colors stand for, particularly the dark and light blue. The light blue is also really hard to see against the white.
3. There are many links on the page; for each one, the screen-reader spells out the whole link, which is really unnecessary and breaks the flow of information
4. Has no visuals whatsoever. As a student, I would not be primed for excitement upon looking at this course page.
2. I made the website a single scrolling page and made each section a different color. I designed the title for each section such that it would contrast nicely against the background and clearly separate and define each section
Example of the “Schedule” section!
3. I made sure all links under the same “type” were grouped together and not scattered all over the page.
all links are on this page!
4. Added a “geo-flower” theme and used nicer colors!
Annotated Wireframes —> Annotated Mockups
(Just in case you wanted to see the whole picture :)
DESKTOP
TABLET
MOBILE
Visual Design Guide
Points for Improvement
Although I am proud of my final product, I do believe there are certain things that can be improved upon:
I used many colors for the sake of aesthetic but I think in exchange I sacrificed clarity. It would have been more user-friendly if I maintained a unified color for each section.
To some, this website design may be considered too “feminine”. Although we now live in a day and age where such heteronormative constructs are less used, I want to be conscious about how users, particularly college students may feel about using a website for their class. Because college students are at an age where such topics can be especially sensitive, in the future I will keep in mind to not let my own personal idea of beauty get in the way of designing an interface that is meant to be used by a diverse group of people.
Key Takeaways
It’s important to keep in mind that I should maintain a balance between visual appeal and usability/accessibility. One should not be sacrificed for the other but rather both should operate in tandem.