Background: The Faculty Toolbox is a resource for US Air Force Academy faculty to learn about the Academy's Learning Management System (LMS). When I started my role at the Academy I took over the development of the Toolbox. There were several usability problems that were apparent from day one.
Goal: Redesign and rebrand the Faculty Toolbox to increase usability and traffic to the site.
My Role: Website Designer, User Researcher, Information Architect
The Design Process
After conducting informal interviews, I created personas for the 5 different types of faculty I discovered during my research.
Common to all personas was a desire for information to be easy to find and the navigation to be “intuitive”. In this case, an “intuitive” navigation is one which corresponds to the mental model faculty have for building a course: course content and delivery, course administration, and assessment.
Along with user research, the main UX skills used in this project were:
- Information Architecture: Rdesignin the site navigation and link names to reflect the course building mental model.
- Sketching and Wireframing: Creating content templates required ideating, and then sketching and wireframing, solutions for presenting content to faculty.
- Creating a Style Guide: Developing and implementing a style guide to standardize the look and feel of the site.
Guided by the personas, I identified three problems with Toolbox as it was created:
- Site navigation that was not “intuitive” because it did not reflect the mental model faculty have for course building.
- Content was not catered to the needs of the faculty at USAFA.
- Inconsistent use of fonts, headings, and colors to visually organize site content.
The original site navigation did not reflect the mental model faculty use for building their courses.
"Inside Your Course" promised a page that reflected the course building mental model, but the content on that page was not organized according the mental model.
To remedy this, I sketched out prototypes for the top-level architecture and some secondary architecture.
I put the three components of the mental model at the top level because it would provide quicker access to relevant content and clarified what you would find on each page. (
One option for the site navigation.
A second option for the site navigation.
Inside Your Course was too broad a label to be helpful.) I presented these ideas to my team and some faculty, and, after a little more tweaking, the Faculty Resources portion of the course menu was finished.
Setting up the top-level navigation this way also gave faculty a preview the LMS's capabilities when they opened a page, such as "Building Your Course".
After restructuring the site navigation, I developed a four-stage approach to dealing with missing and misorganized content:
The first two stages were, essentially, first aid. For instance, moving "Adding scrollbars to Grade Center on Macs" out of "Inside Your Course" and into "Additional Resources".
- Organize existing content in accordance with the new site map.
- Add priority content.
- Determine what content was missing.
- Develop and implement a content roadmap, to include both the templates for content and the topics themselves.
I waited to identify missing content until the third stage because it would be easier to see the gaps once I knew how to categorize the content we already had. And drafting an initial list of missing content would help me develop template prototypes.
For the fourth stage, I started with content templates because it would allow me to:
I quickly went from sketches of a few possibilities down to two different content templates, and developed two prototypes.
- Provide a consistent experience for faculty;
- Ensure that the copy addressed the needs of the faculty through the design of the template;
- Make it possible to outsource the "how to" guides by linking to the LMS help site; and
- Speed up the copy writing process (which is helpful, since I am a one-man shop).
- Help me refine the list of content that I thought was missing.
Initial sketches for content templates.
Different ways to present the content templates.
Final sketches of the content templates.
Final version of the tutorial template.
Final version of the tool comparison template.
The style across the original Toolbox was inconsistent.
To provide a consistent user experience, I created a style guide for the Toolbox. To keep things simple, I stuck with the defaults in the LMS's text-editor for things such as font. I then added the following rules:
The "Inside Your Course" page mixed and match content types and fonts.
In some cases, there was background highlighting that served no purposed.
The different colors are redundant: they seem to only signal a different content item.
These rules provided a consistent user experience and helped visually chunk content on a page.
- Black font for content.
- Blue (#0000FF) font for in-page headers to help further organize content (such as when a list of quizzes begins).
- Dark Cyan-Azure (#0099CC) for quizzes.
- Use highlighting to emphasize important information such as warngings, known issues, and system downtime.