ANT100 (Introduction to Anthropology) is a core course for any student interested in anthropology at the University of Toronto. I was hired by the ANT100 course coordinator to redesign the website, give it a more modern look, and make it lightweight and responsive so that students could reference material on-the-go.

This project involved developing a sensible information architecture for ease of students' usage, engaging interactive JQuery elements, and an intuitive layout that could be repurposed for other courses.

Project

ANT100 Course Website Redesign

Client

Department of Anthropology, University of Toronto

Skills & Tools

The Challenge

The crux of this design challenge was to meet the needs of the course website's users (students) while fulfilling the goals of the teaching team.

User Needs

• Accessing tutorial information, textbook details, TA/professor contact information and office locations while on-the-go (on mobile)
• At-a-glance overview of the course's topics, lectures, and readings (ideally with links to readings)
• Warnings about deadlines, special instructions, or penalties for assignments
• Quick access to evaluation policies
• Resources for help with essay-writing and research

Client Goals

My client for this project was an experienced professor in the Anthropology department who had an appreciation for engaging UI elements. He wanted a homepage that would "invite students in" to engage with the course's learning goals.

1. Engage students in learning how to be a good researcher
2. Guide students towards the "boring" but important information: plagiarism, research & documentation, academic policies, and TA/professor contact policies
3. Reduce redundant student questions
4. Create a modern interface (future-proof) that can be reused for other courses

The Solutions

Information Architecture

The original version of the ANT100 website had over 20 webpages of information, with many cross-over hyperlinks, numerous anchor tags, and a navigation bar that confusingly changed between the "main" website and the essay" mini-site.

To introduce more information hierarchy and make things a little easier to find, I reorganized the original website so that the essay "mini-site" could be integrated into the main website via a single drop-down menu bar.

I created low-fi sketches for both the information architecture and responsive layouts, which I then edited with my client's feedback:

After iterating on a colourblind friendly palette to present the website with, this is the navigation menu we ended up with:

Mobile-First Responsive Design

Once the information was organized, I sketched solutions for the project, beginning with mobile displays first. This was a priority for the project, as the website had to be easy-to-use for a student on-the-go between classes.

In addition, the client needed to present a lot of information about lectures in an organized manner on a single page. To do so, I envisioned a simple JQuery accordion element, with each lecture's information, including assigned readings, lecture notes, and review questions, nested within the accordion slats.

Interactive JQuery Quizzes

A core challenge for this project was figuring out how to directly engage students with learning goals. The main goal of this course was to teach incoming students how to do good research and avoid plagiarism. To ensure students actually read the information on the website, I created interactive Javascript-based quizzes about research and plagiarism, which students would have to complete in order to get their essay assignment marked. Upon passing the quiz, students would receive a code that they would attach to their essay assignment to get full marks.

Axure Prototyping & Documentation

With the information architecture and design features in mind, I generated a high-fidelity Axure wireframe and accompanying documentation for the rest of the ANT100 course teaching team to critique.

View the Axure Documentation »

Complete Feature List

• Mobile-First Responsive Design for a flexible responsive layout.
• Homepage Slider to invite students to view the three most important pages: the essay, lecture notes, and evaluation/extensions
• JQuery Accordion Sliders to collapse and organize very long
• Interactive Quizzes on plagiarism and proper essay-writing format, which students would have to complete in order to obtain a code to include with their essay to obtain full marks (e.g. the essay assignment outline, lecture outlines)
• Breadcrumb Trail for ease-of-navigation through the two-tierd navigation system.
• Offline Search Script based on indexed pages, to allow students to search the cached site even when a mobile internet connection is unreliable
• Persistent Scroll-to-Top Button on all pages for ease-of-access to navigation
• Colourblind-Friendly Colour Palette based on four colourblind-safe colours to enable the best experience for any student, regardless of accessibility concerns

Usability Testing & Iteration

Finally, some features of the website were fine-tuned, according to feedback from casual user-testing. I invited members of the ANT100 team, my friends, and some university students in first year to test the website.

Final Changes:

• Added top-tier navigation buttons as links into drop-down menus - users often neglected to see the top-tier button as "clickable" once it triggers the drop-down menu
• Adjusted colour scheme of navigation bar to accommodate aesthetics on different platforms (the golden-yellow was unpleasant on certain screens).
• Changed shape of search bar to match across platforms (iOS did not accommodate specific border-radii).
• Added search engine optimization via 'alt' tags and meta-data for better search engine crawling.
• Adjusted slider for smoother operation across viewport sizes.