// Portfolio

University of Toronto: Anthropology

This website redesign for the Department of Anthropology features a mobile-first design and information architecture to make it engaging and easy to use for students on-the-go.

As the course website for ANT100, the first course any student takes upon entry into the program, the design engages students to meet learning goals. This project involved developing a sensible information architecture for ease of access, 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

Axure
Information Architecture
Web Development
Usability Testing
HTML/CSS
Javascript/JQuery

The Design Process

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 ANT100 Website design guide.

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.

The ANT100 main navigation prior to my redesign.
The ANT100 main navigation prior to my redesign.
The 'mini-site' for the essay assignment on the original ANT100 website
The "mini-site" for the essay assignment on the original ANT100 website.

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

Sketching out a list of main items and sub-items to navigate A final rough draft of the navigation system, with client's corrections

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

The final prototype

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.

The new landing page and a reimagined drop-down menu for the essay assignmentThe new landing page on mobileThe new mobile navigation

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.

A rough sketch of the JQuery content accordion concept for organizing lecture notes. The finished JQuery content accordion The JQuery content accordion on the essay page

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.

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

The ANT100 Website on a laptop display

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.

View the Final Product