NGLSync: Course Registration Redesign
Restructuring a Complex UI to Help Users Meet Their Goals
Overview: National Geographic Learning (NGL) teachers and school administrators were having difficulty creating courses and adding students to courses due to an overly confusing dashboard and user flow. My role was to help build out parts of the user flow and design a user interface that guided users through each step of this complex process.
I began my process by:
-
Completing a heuristic evaluation of the platform
-
Contributing input to the preliminary user flow
-
Finding the best UI to optimize the process for users
-
Building the UI using the predetermined style guide and designing new components where necessary
User Research
My first priority with this new project and team was getting to learn the platform. I did a heuristic evaluation that assessed the UX and UI of the entire platform. From there I had a better idea of some of the issues facing the platform.
At that point, our lead UX researcher began interviewing teachers familiar with the registration process and conducted light weight usability testing with some preliminary wireframes. Based on the results of that testing, we analyzed the data and discovered a number of additional issues that warranted changes to our user flow.
The flow consisted of 3 main sub-flows: teacher registration, creating a course, and registering students to a course.
I helped develop flows such as: the student already has an account yet tries to create a new one, teachers registering a new school within the system, and teachers adding students to a new course.
User Interface
After completing the user flows, I began mocking up all the necessary screens. The flow consisted of 4 main functions:
-
Creating an account
-
Creating a course
-
Adding students to a course
-
Having students self-register for a course
Create an Account
The creating an account flow is a standard UX flow but we had a few variables specific to our product. We needed to include the user’s first and last name, as this notifies the teacher of who his/her students are; this would otherwise be hard to infer based solely from an email. I tried my hardest to have both username and password on one screen but due to technical limitations I had to separate them onto different modal windows.
Create a Course
The create a course flow had the following variables to consider: the product’s unique ID, the product name, the course name, start/end dates, and the school it should be associated with. I helped organize these variables into sizable chunks with their own modal window and added progress indicators to better aid users in the “create a course” flow.
Add Students to the Course
The most challenging screens were in the adding students to the course flow, as the teacher starts with two main options.
-
Teachers could add their students by:
-
Searching for a student to add them to the course
-
Manually creating their students’ accounts and then adding them to the course
-
-
The teachers could also have their students self-register for the course by manually creating an account and linking it with the course.
I opted to use a search field for students to select students already in the system and I mimicked the account creation process for student self-registration to enhance the platforms predictability.
High Fidelity Mocks
Although most of the flows I worked on were simply modals, I was able to redesign a few real web pages that were previously in very bad shape. Let’s take a look at some of these screens below:
Key Takeaways
This project had an extremely short timeline and it was our first time working with this specific team. It was a great learning experience and I picked up the following throughout the process:
-
Open up clear communication channels early on and never make assumptions about what new teams understand about the UX process your team uses
-
Always double check user flows to ensure certain steps and outlier processes are not forgotten about through the process
-
Find time to re-test the design. We didn’t have the time or resources to re-test our changes, so we won’t know how successful the design is until after we get additional data