Cisco Networking Academy: Complete Design Refresh
Cisco Networking Academy is the online platform the provides course content and course management tools to instructors who teach networking concepts. The program is provided by the Corporate Social Responsibility group of Cisco and is given freely to learning institutions.
The old portal to 'NetAcad' was confusing, had opaque navigation, and was not optimized to the three different audiences it needed to serve. Additionally, the visual design was outdated and reflected poorly on Cisco. Working with a team of interaction and visual designers from an external agency, I led the complete rearchitecting and interface redesign of the entire site. You can sign up for a self-paced course at netacad.com and once you've logged in, you can see the new design in action. |
Research
This interface was developed with multiple rounds of usability testing, including an extended Beta period where users where able to give feedback directly through the interface. Before beginning any design work, we surveyed, interviewed, and tested instructors and managers as to what worked, what didn't work, and primary tasks they needed to accomplish. The results of this research guided our design process and where we focused our efforts. |
Students
Top: the original portal for Students. The small green box is the area on the screen where students can see and access their classes. A main complaint by students was the difficulty in finding their classes amongst all the marketing content. In addition to the tiny space for their main content, the navigation was confusing and student-relevant secondary content was difficult to find. We reorganized the content and created logical, consistent information architecture. Bottom: The most obvious change we instituted was focusing the entire page on the primary goal of students - viewing and accessing their classes. Information that was secondary was de-emphasized. This also allows students to view all their courses at once and sort by course status - in progress or ended, as the actions students will want to take differ based on the status of the course. In the screenshot to the right, the first three classes are easily seen, as is a great deal of metadata for the classes. |
Instructors
Top: original portal for Instructors. The small blue box is the area on the screen where they can see, edit, manage, and access their classes. Instructors were even more frustrated by the excessive marketing content than students were. A main theme with instructors was their lack of time and need for an easy, quick interface that allows them to manage their classes efficiently. Middle: As with students, for instructors we focused the page completely on the primary goal - managing and accessing their classes. Instructors have more status options than students, being able to create draft courses to work on before adding students. This view was excellent for instructors with 6 or fewer classes. Bottom: For instructors with more than 6 classes, the tile view was not optimal. So although we slightly reduce the amount of information shown, we are able to show them many more classes at once using a list view. This view still allows for more information and classes to be viewed at once than the original instructor portal. And as with the student class view, instructors are able to sort their classes by status, as well as choosing favorites that rise to the top. |
Managers
Top: original portal for Managers/Administrators. The small orange box is the area on the screen where they can see and manage both the Academies (learning institutions) they support. The initial interface focused on choosing an action and then choosing an Academy to apply that action to. This was confusing as not all administrators actually had more than one Academy. Others voiced frustration at starting an action process and then forgetting which Academy they were trying to apply it to. Bottom: This new interface changes the paradigm by being Academy oriented, instead of action oriented. So all information and actions the user has access to, refers to the single Academy in view. Users can then select a different Academy to manage, if they have more than one. This significantly reduces the cognitive load for administrators. |