CIESC DRIVER’S ED SYSTEM2019-09-07T17:16:44-04:00

Project Description

CIESC Driver’s Ed System Redesign

Overview

CIESC services students within the central Indiana area with preparation for driving, in-car driver’s education, and classroom-taught driving courses. They had a very outdated system that was created so long ago that none of the existing code could effectively be built over and renewed. Due to this, they asked for a completely rebuilt system, from the ground up, with a few enhancements included.

My Role

  • UX Research, Interviewing, Data Analysis
  • ‌‌Information Architecture Design
  • UX/UI Design

Timeline

3 Months

Tools Used

  • Sketch
  • Balsamiq
  • HTML
  • CSS

The Challenge

Create and implement a new registration portal meeting each of the client’s criteria:

  • Update UI throughout system
  • Improve usability throughout system
  • Create responsive web design with supporting mobile view for student users
  • Redesign course enrollment and registration features to better suit user needs
  • Reconstruct and redesign administrative portal
  • Implement integrations with Schedule2Drive and Desire2Learn for students and parents
  • Reconstruct and redesign instructor portal
  • Improve filtering and sorting in administrative portal
  • Make backend and database logic match what is shown on interface (storing things as different elements than what you’re displaying them as, etc)

1.Context

Who

CIESC’s registration portal supports parents and teenagers (14+) enrolling for Driver’s Education courses. Individuals over the age of 18 are also able to enroll themselves in courses without a parent’s information. This system has the following user types:

  • Parent/Student
  • Instructor
  • Admin
  • Super Admin

The system supports multiple tasks for each of these users to complete.

What

This portal will allow parents, teenagers, or young adults to sign up for an account and register themselves for Driver’s Education courses.

Instructors utilize the system when courses have just began, have ended, or during the duration of a course to access student records, assign grades, view training videos, access payroll information, and view their course rosters.

Administrative users utilize this system to assign enrollments, make payments on behalf of Student and Parent users, manage course rosters, manage courses, manage sessions (semesters), manage email templates, create reports, view student records, manage all users, manage payments (refunds, fees, etc), manage certificate and email histories for users, and troubleshoot user issues.

When

Parents of children older than 15 years of age can enroll their children into driving courses or classroom courses utilizing this portal. Children younger than 15 can still enroll in classroom courses, but in order to enroll in driving courses, they must be 15 years of age and have a valid driver’s permit. A desktop and mobile view were created to grant access to as many individuals as possible.

Instructors utilize the system when courses have just began, throughout the duration of a course, and when courses have ended.

Admin users utilize this system when any administrative level task is needing completion, as listed previously.

Why

CIESC had a very outdated registration portal on a piece of software that was created so long ago that none of the existing code could effectively be built over and renewed. They wanted an updated registration portal made to support the same functionality as they previously had, but with minor enhancements in functionality, and a full face-lift for their UI. As an application targeted toward a younger generation, it was important to offer responsive web functionality as well as a dedicated mobile view accessible from smartphone devices, something that CIESC did not have previously. Further, CIESC wanted a refresh of their entire system, from top to bottom, for every user level. This is due to the outdated design and codebase, as well.

Project Workflow

2. Research

Research was conducted with 1-2 individuals from all user types (depending on who was available to us): Student, Parent, Instructor, Admin, and Super Admin.

User Shadowing sessions were implemented before each informal interview took place. Users were asked to walk through each step of the system how they normally would, speaking aloud about each task as they complete them. This was my initial overview of the system, so a formal set of tasks were not set up beforehand, and I simply asked users what they typically do in the system, and to show me how they complete that task.

Ultimately, the following tasks were outlined for Student/Parent users:

  • Sign up for an account
  • Register themselves (or their child) for Driver’s Education courses (selecting a course, adding payment information, confirming successful course enrollment)
  • View Instructor contact information
  • Manage system email, retrieve system-generated completion certificates

The following tasks were outlined for Instructor users:

  • Access student records
  • Access parent and student contact information
  • Assign grades
  • View training videos
  • Access payroll information
  • View course rosters

The following tasks were outlined for Admin users:

  • Register students for courses
  • Assign students to in-car driving instructors
  • Make payments on behalf of Student and Parent users
  • Manage course rosters
  • Manage courses
  • Manage sessions (semesters)
  • Manage email templates
  • View student records
  • Manage all users
  • Manage payments (refunds, fees, etc)
  • Manage certificate and email histories for users
  • Troubleshoot user issues

The following tasks were outlined for Super Admin users:

  • Create and generate reports
  • All other admin functions

After speaking with 2 Parent users, 2 Admin users, 1 Super Admin user, and 1 Instructor user, we gathered very informative suggestions and feedback to drive the system redesign. Further, while we were conducting the User Shadowing sessions, we found several dozen usability bugs that needed to be addressed moving forward from a purely UX perspective – most of these being form length, Parent/Student users having no idea where they were on a page, and similar issues. All of these issues were addressed through a thorough Information Architecture overhaul of the new system.

One of the biggest complaints of the old system from Parent/Student users was the branding/theme, as it didn’t even remotely match CIESC’s brand. This sparked trust issues with users, who found it difficult to use a system that doesn’t look affiliated with the business they’re purchasing services from. Further, general usability was another large issue. Users stated that they commonly lost track of where they were in the registration process, and were also unaware of when the process was finished, as there was no confirmation or success message.

Images of the old Parent/Student Registration portal are below.

Old Login Page

Old Registration Page

Old Sign Up Page

Old Email History Page

After interviewing and shadowing Parent/Student users, I spoke to one Instructor user.

This user openly admitted to having no idea how to properly use their system, admitting that they had to teach themself their own way until it “worked”. Points for honesty!

I asked this user to walk me through every task they use the system to complete. After the shadowing session was over, an informal interview took place, focusing on follow-up questions based on things they mentioned during the shadowing session, as well as their own wants and desires for the system.

After meeting with the Instructor user, I sat down with 2 Admin users simultaneously for a User Shadowing session. This was a key interview in many ways – it was obvious that these two users were using the system entirely differently to complete the exact same tasks. While there are many ways to complete a single task – lets say, logging in as a specific student in a course – one user would use the Users table, and generate a full list of all student names throughout the entire system to search for 1 student, while the other user would filter a specific Course Roster list down to find that 1 student. Once this became apparent, there was a bit of back and forth between the Admin users about the “correct” way to accomplish this task. The key take away was – there was no “correct” way, because the system was not intuitive. There was never a user guide developed for the system, documentation, training materials, or anything that would’ve given employees a proper overview of how to accomplish even the smallest of tasks in the system – and this was intentional. The system was so out of date and unintuitive that actually defining the “correct” way to accomplish any small task would’ve been an even larger task in itself.

Instructor – Course Roster Page

Instructor – Student Profile Page

Following those shadowing sessions, I sat down with one Super Admin user. This user had all of the same administrative abilities in the system as a normal Admin user, but also had access to reporting. The same interview process took place with the Super Admin user, and even this user admitted to having a lack of understanding of the interface, getting lost in the navigation, being unsure of where to find certain elements and features, and not wanting to use the system themselves. Due to this, this Super Admin user actually asked for reporting abilities to be included in normal Admin abilities, and to eliminate the Super Admin user role all together – all because they did not want to use such an unintuitive system – which was completed in the redesign.

To be fair, even after getting access to the test site, it took me an unhealthy amount of time to realize what I was even looking at as I tinkered around. Usability was very abysmal, and I couldn’t successfully create an account and register for courses until the 2nd run through the process. Field labels were not consistent throughout the system, so where you might be entering “date of birth” in one input field, on another page, that same field was labeled “birth date” or “DOB”. “First Name” in some fields was just simply “User” in others, and “Log in” and “Sign in” were used interchangeably, as well as various other inconsistencies. Tables were not aligned correctly, filters and sorting were in the same location and labeled improperly, selection lists would go off of the screen once opened, and the entire portal seemed to be operating within 1/2 of the screen, despite being a full-page desktop portal.

Ultimately, after completing each of my shadowing sessions and interviews, several things stuck out throughout the process:

  1. There wasn’t a single “expert” user in any role anywhere in CIESC’s headquarters
  2. All users in all roles were unhappy with the system
  3. The entire system was in need of a… face lift

Admin – User List Page

Admin – Session Management Page

3. UX Design and Strategies

The system redesign was fully conceptualized in Balsamiq. Along with these low-fi wireframes, full functional requirements were documented in Confluence. The wireframes below were made for each of the Parent/Student, Instructor, Admin, and Super Admin user types. Each of these screens were referenced while creating a more professional, finalized, polished mockup in Sketch for client approval, before handing off to development.

Every aspect of the system was mocked up and documented in Balsamiq – input errors, success messages, confirmations, modals, etc. The finalized mockups reflected the overall theme and brand of CIESC, as well as this functionality.

4. Student/Parent Registration Overview – Desktop

Aside from a complete Information Architecture overhaul, one of the most important aspects to my design changes was the simple inclusion of a progress bar. In the previous system, Parent/Student users consistently lost track of where they were in the registration/enrollment process, as well as navigated away from a page assuming they were finished with their registration or enrollment.

In addition to this, a more professional design was implemented to match CIESC’s current website, and to help the system build trust with Parent/Student users.

Slight changes were made to this portal, and are listed below:

  • CIESC asked for certain corner radiuses on input boxes for Student/Parent users to change the design slightly, which were implemented, and thus differ from the website theme
  • CIESC asked for a mobile design that differed from the desktop design, as far as overall visual design, which was implemented, and thus differs from the desktop slightly
  • The registration process (this occurs after the account validation process, which occurs once a user successfully selects “Register” on the registration page, thus creating their account and allowing them to log back in to finish if they do not finish in one sitting) now fits on 3 pages, when it previously was a 7 page long form that users would get lost maneuvering through
  • Top navigation has changed to link to BMV requirements for Driver’s Education within the state of Indiana and CIESC’s website
  • All data terminology and naming mechanisms were made to be cohesive between the interface and the database

Login

The login page was elevated visually, and included links back to the BMV’s website at CIESC’s request. The link directs users (namely, parents and students) to the Indiana BMV’s requirements list for being eligible for Driver’s Education.

Register

The Registration page allows Students and Parents to sign up for accounts to register for courses. Once a user selects the “Register” button, the system validates the information entered to determine if an account is already active for that user, in an attempt to prevent multiple email registrations – a big issue from their previous system. Upon successful validation, the user’s account is created in the system, and they continue through the rest of the Registration process. Even if they close the browser window, or otherwise exit the Registration process before finishing, their account is already created after leaving this page, so they can return to pick up where they left off.

Registration – Student and Parent Information

This page allows Parent/Student users to finish inputting their contact and general account information so they can begin enrolling in courses.

Registration – Enroll in Courses

Users are able to enroll in the courses offered by CIESC. CIESC offers packages of driving courses combined with classroom courses, as well as individual courses of both types. Selecting a course (or multiple from the individual lists) on this screen, populates the table on the following page.

Registration – Confirmation and Payment

Once a user has selected courses, they confirm their selections on this page and enter their payment information. Once they have left this page and successfully paid for their courses, a success modal appears, and they are taken to their Dashboard.

CIESC's old Log In pageCIESC's new Log In page

5. Parent/Student Registration Overview – Mobile

I created a mobile design to communicate how the portal would respond to different screen sizes. It was important to CIESC to include a mobile view of their registration system to help enhance their reach with younger generations of students utilizing their services.

6. System Admin, Instructor, and Student/Parent Dashboards

The Admin, Instructor, and Student/Parent user types all have separate dashboards, as shown below.

Schedule 2 Drive (S2D) is the driving scheduling software that CIESC uses that allows them to manage the scheduling of their driving courses from year to year. Students use this software to schedule and view the times, locations, and days that their driving courses are taking place. S2D did not allow for integrations, so in future phases, CIESC hopes to have us build their own drive scheduling software and integrate that into this new system in order to replace their reliance on S2D.

Desire 2 Learn (D2L) is the online course software that CIESC uses to provide online courses for their students. All lectures, exams, and assignments are given and received through D2L, and are managed by Instructors of those courses. Similarly to S2D, CIESC has made it apparent that they would like for us to build them their own online course software to replace their reliance on D2L, which also did not allow for integrations.

Vantiv is the payment management software that CIESC utilizes to manage payments for course enrollments. Each payment is validated through Vantiv, as well as each refund, and fee. Vantiv similarly did not allow for integrations, and CIESC would like to build their own payment software, as well.

DESIS is essentially the contact system that CIESC uses to connect each of their locations. It operates as a hub for contact information, and is currently being redesigned and reimagined by another agency. CIESC asked for a hot-link to DESIS on the Admin and Instructor dashboards for ease of use.

Users are able to open and close the menu, expanding the screen with it closed, and condensing the screen with it open. The examples shown below all show the menu as open to provide insight into the features present for each user type.

Admin System Dashboard

Admin users have data visualizations for various data collected through course enrollments. These visualizations include an Enrollment Overview, visualizing enrollment numbers by month, and allowing them to sort by year. Additionally, they are able to set enrollment goals, and track the status of reaching those goals on this dashboard. Admins will also have the ability to view enrollment statistics and generate reports from the data gathered from their enrollments, such as ages, ethnicities, and counties as they correlate to their student population. Admins have hot-links to S2D, D2L, Vantiv, and DESIS listed on their dashboards as well.

Instructor System Dashboard

The Instructor users are able to view a data visualization of the enrollment, and have hot links on their dashboard as well. These hot-links are the same as those for Admin users, with additional links for Payroll scheduling information for the year (a simple PDF), CIESC’s employee guidelines (PDF), system hot-to guides (PDF), and a downloadable template for a score sheet, allowing them to print and fill out these forms for grading students in in-car driving courses.

Student System Dashboard

For the Student/Parent users, they log in and immediately see their course schedules, as well as several hot-links to take them directly to some of their most used places. CIESC specifically asked for hot-links to Email History, as phone calls to the headquarters commonly asked questions about how to access past certificates, reset password emails, and similar other pieces of correspondence, which were all listed in their email history. In their previous system, Email History was somewhat hidden for Student/Parent users, so CIESC was very adamant that it be as obviously placed as possible on their dashboard, as well as in their menu. Student/Parent users also have a hot-link for enrolling in courses for similar reasons.

Email History

As mentioned previously, Email History acts as a catch-all for all system-generated emails. These emails go to the email that they have on file for users (the email they signed up with), as well as their Email History. If a user cannot find an important email in their personal email inboxes, they are always able to return to the system and find the email there. This is an important feature for CIESC, and they wanted to ensure it was prominent in this system.

6. Feedback and Future Iterations

Users from all roles were very happy with the redesign. Another round of user interviews were conducted before handoff to development, and Parent/Student users were also very pleased with the redesign concept, as well as the Instructors, and Admins. The most cited comments from these interviews were:

  • System was much more intuitive
  • System was much more trustworthy
  • Student/Parent portals were very professional/”sleek”
  • Instructors enjoyed hot-links on dashboard
  • Admins enjoyed the ease with which to maneuver through the system
  • Data visualizations were very effective and helpful
  • Showing statistical data on dashboard was extremely beneficial for administrative users to keep track of statistical reporting
  • Student/Parent users enjoyed actually having a dashboard (one wasn’t present in the previous system)
  • Overall visual design impressed users from all user types

CIESC’s website can he found here.

View More

2019-11-06T01:05:21-05:00

UI DESIGNS

A collection of UI Design concepts. This collection will be filled with more UI Designs on a weekly basis.

2019-03-28T10:38:10-04:00

CARE+

Healthcare maintenance application for the sick, elderly, and their caregivers