Teaching Works
Role: Lead UX Designer | Client: Teaching Works, University of Michigan | Tool: Sketch | See the Live Website
A Digital Resource Library of Teaching Materials
Business Goal
Showcase organizations ideology on teaching
Store and organize digital resources for Teacher Educators to access
Promote and acquire Teacher Educators as users of the site
Project Goal
Build a taxonomy to organize the variety of resources
Reflect curriculum structure in the site’s navigation
Simplify how users sign up, discover and download materials
Represent University of Michigan Branding
My Responsibilities
I lead UX Design and Strategy for the project by gathering requirements from the users through interviews, designed the complex site navigation and interactive wireframe prototypes that were tested with users.
Final Outcome
Research
The primary users of the site are ‘Teacher Educators’ - Teachers that specialize is teaching pedagogies and subjects to teachers that will train P-12 teachers. They will be interested in accessing the site through to learn Teaching Works perspective on teaching AND / OR to access the material organized of the subject they teach.
Interview Questions about Audience, User Experience, and Content
Who are ‘Teacher Educators’?
Teacher Educators are senior teachers that train K-12 teachers
Information Architecture
By interviewing the content creators at Teaching Works, it was clear that the users would be coming to the website to consume
(A) Teaching Works’ PERSPECTIVE ON TEACHING
(B) The downloadable CURRICULUM RESOURCES that Teacher Educators would use in classrooms while training P-12 teachers
Thus, ‘Perspective on Teaching’ and ‘Curriculum Resources’ are the two main items of the main navigation bar.
Content + Information Organization Process
Since the core function of the site is to be a ‘Resource library’ for users to discover and download content, the information needed to be presented in a way
The following spread sheets were created to develop a clear hierarchy of content on the site so that the client can maintain a log of the resources uploaded.
The design challenge was to develop a user friendly breakdown of content into a number of spreadsheets, and nomenclature that represents the site structure to organize the downloadable resources like PDFs, DocX files, videos, PPT slides etc. that form the core material of the site.
User Testing
Wire Framing and Prototyping
On inner resource pages, the card served as a visual to group the different contents of the resource like a video, PDF or slides.
How can the ‘cyclic’ teaching methodology be reflected in the interface?
Learning Cycle Diagram
Introduce, Prepare, Enact and Analyze
Site Navigation
As part of the maintenance phase of the site, I was required to re-think some of the pathways designed on the site, and make additions and subtractions to existing UI elements to fit the new information and make it easy and logical to navigate to. To solve and to be able to talk through the solutions, I created user-flow diagrams like the one below. The edits on the page are color-coded to link to the corresponding pages.
Visualizing the edits as this diagram made the conversation with the client and development team, regarding the edits much easier to follow.
Site Search
Version 1: ‘Site Search’ and ‘Resource Search’
However, this design wasn’t the optimal solution because there were high chances of an inexperienced user to enter a combination of inputs that would yield no results.
Site Search: This mode of Search would search the site for the key word specified by the user, and only return page links in the results.
Resource Search: This mode of Search would return ‘resource cards’ i.e. documents that can be downloaded by the user
Version 2: Using AJAX for Search
Using AJAX improved the Search Experience because we were able to programmatically eliminate the input fields to narrow down the options for the users and immediately surface results. The ‘Active Filters’ tab updates to show the selection made by the user and the relevant results are surfaced.
in order to combine ‘Page’ and ‘Resource’ results, we designed a card to represent page results, ensuring that is it visually different from the resource card found across the site.
The call to action on this card is ‘Learn More’ and links to the page on the site, whilst clicking on ‘View Resources’ on the resource card prompts the user to log in, and then reveals the downloadable resources associated with the card.
Testing
Method: Quantitative and Qualitative Testing
Tools: Google Forms, Video-conferencing software, Google Analytics
