National Geographic Learning: UX and Accessibility Overhaul
Reconfiguring a Digital Learning Platform
Problem Statement: National Geographic Learning (NGL) students and teachers were having trouble understanding the features and functions of the NGL desktop learning platform. This led to users abandoning the platform for other educational resources. What could NGL do to keep users engaged and open to using their platform?
Overview: The initial platform was created by developers without any design input and then inherited a style guide from a parent company. The site had become a hodgepodge of styles and elements that were inconsistent and unpredictable. My goals as the lead UX designer were to:
-
Optimize the platform to be compliant with the WCAG AA guidelines for accessibility
-
Audit the current UI and then align it with the inherited style guide
-
Implement quick and apparent UX changes to the platform that compliment the WCAG guidelines and design system
Improving Accessibility
I began by using Siteimprove to inspect each screen throughout the platform. I then catalogued each necessary change that would make the platform WCAG AA compliant. From there I began editing the master Sketch files to include those editions.
You can see where Siteimprove helped me easily identify color contrast issues in the search result titles (1) and results per page (2) components.
Implementing a Style Guide
Once the WCAG audit was complete I began inspecting the designs to see which elements were inherited from the style guide and which ones weren’t. I discovered many elements were actually based off of bootstrap styles, which I then corrected to match the newly inherited style guide.
The above pages highlight a number of different elements that were completely foreign to our style guide. The most notable issues were differences in color, link states, and icons.
UX Overhaul
Once all elements were both compliant and aligned to the style guide, my final task was to optimize and redesign certain screens to become more intuitive, predictable, useful, and trustworthy. Here are some of the before and after images.
Library
Our library page had a number of alignment and thumbnail issues due to the rigid guidelines of our content. I attempted to clean up the design by affixing the thumbnails to a grid and housing them in their own cell. I also cleaned up the redundant background and inconsistent headers.
Assignments
Our previous iteration of the assignments page was built using an accordion menu approach, which was detrimental for users since it hid multiple assignments. Through our research we determined it was best to segment assignments into multiple tables showing what was due immediately, followed by what was due in the following weeks, completely removing the accordion style.
Flashcards
The flashcards main deck page suffered from a general lack of clarity, as well as vague thumbnails of the content. My fix was to reuse the same layout as the library page to create a more consistent experience for the user. I also removed the vague thumbnails and replaced them with the library thumbnails to help users more quickly associate the visuals to their specific content.
Individual Flashcards
The individual flashcard pages were in real rough shape. They had ambiguous icons, dismal navigation, and poor use of available real estate. I began by implementing a back button, redesigning the icons and giving them labels, and clarifying some language to better inform users of their place in the flow. I also made use of the wasted real estate and matched the layout to our general content pages to enhance predictability within the platform.
Notes
The notes flyout (as well as other flyouts on this page) had multiple UX issues like: small icons, vague microcopy, and poor CTAs/buttons. I opted to create a more widget-like flyout that had standard buttons with increased sizes and cleaned up the microcopy to better inform the user.
Study Hub/Saved
This page was the worst of the bunch. The accordion style menu was again misused, the page had atrocious CTAs/buttons, contained pitiful microcopy, and suffered from poorly organized navigation. I immediately thought of a row-based/mobile ready approach that would isolate each note and highlight, clarifying what they were, how they were editable, and when they were created. I also turned each title into a hyperlink allowing the user to immediately go to the page it was created within. Finally, we opted to rename the page to “Saved” as the term “Study Hub” was found to be too vague in user testing.
High Fidelity Mockups
Once all the UX and UI was complete, we moved the fixes to our live product. Let's take a look below at the final screens.
Key Takeaways
The project was a huge undertaking which took months to complete and I learned the following from it:
-
With such a large project that includes so many fixes and changes, it is imperative to separate items into digestible chunks to better aid the the development team through the agile development process
-
Prioritize each item, as some of the changes are imperative for users. For example, no company wants to be sued over a lack of accessibility
-
Accessibility is not standardized yet in the development process, so it’s important to constantly include accessibility fixes and edits in all design projects to keep developers up to speed
-
Quantitative data is a godsend! This project only had qualitative data available and trying to find solutions without big data was extremely difficult