Kaplan: Continuing Education

OVERVIEW

Role: UX/UI Designer

Tools: Figma

Duration: 4 months

Team Members: UX Researcher, Project Manager, Product Owner, Stakeholder, UX Strategist

Devices: Web App

Client: Kaplan: various B2B clients

SUMMARY

• Collaborated with a UX Researcher to gain insights on user’s pain points related to reviewing progress on employee’s academic goals.

• Redesigned a software that helps B2B Administrators view employee course progress to ensure compliance requirements are met.

• Collaborated with a Project Manager to ensure both user needs and business goals were met.

Persona

User Flow

• User is an Accounting or Insurance Administrator.

• Basic flow: signing in, entering the homepage, heading to the dashboard, pulling a CE report, running the report and sharing the report.

• We shortened this flow over several iterations because Administrators are busy people.

• So, the less energy they spend trying to figure out the software means the more energy they can spend analyzing data and sharing it with their colleagues to help their employees meet their education goals.

DESIGN

Sketches

• Users found that entering the date range on a separate page was confusing. So, we decided to give them the ability to edit date range when they edit everything else.

• I also decided to add the ability for Discussion Leaders to see credits earned per month. Therefore, the Discussion Leaders could assess the ROI of purchasing Kaplan products. For example, are enough Accountants completing courses for it to be worth continuing our Kaplan course subscription.

Accessibility

• I added a pattern to the bar chart so color wouldn’t be the only distinguishing aspect of the design if we added more variables to the x-axis.

• I also proposed modifying the secondary CTA button because the contrast was very low between the button background and the background of the card. I proposed a solution that was adopted where there was a much higher contrast. Therefore, our low vision users will have as easier time moving through the experience.

Low-Fidelity Wireframes

• Here you can see our original landing page and dashboard pages.

• This landing page was largely based upon the existing design. The cards shown might change depending on portals the user has access to.

• We originally displayed all filters available to the user right on the dashboard.

• Additionally, we initially had a much wider variety data visualizations available for the user.

• We also built out an export process that allowed users to edit settings before downloading the dashboard file.

• But of course, we had to test out our decisions.

Low-Fidelity Feedback & Iteration

• Results:

  • 1. Not very accessible.

  • 2. Filtering took up too much real estate.

Mid-Fidelity Wireframes

• I collapsed the filters so they would take up less real estate on that page. This would also allow the users to pick the filters they wanted to add to their data summary. That way, they wouldn’t have to look at filters they weren’t using.

• I also added more sections for data visualizations so Discussion Leaders could get more information on course usage from the service.

Mid-Fidelity Test Results & Iteration

• Results:

  • 1. Moving the date range and education type filters to one main editing page

  • 2. Simplifying the data visualizations

  • 3. Design more consistent to existing product to ease Engineering lift.

High-Fidelity Wireframes

• I made some adjustments to the components so they’d look more like the components Engineers were using in Storybook so it’d create less work for them.

• I added functionality that would let Discussion Leaders see the filters they have already applied at a glance so they could make edits if they needed.

• Additionally I added the ability to search by student and filter by only 1 or multiple students vs. all students if Discussion Leaders are curious about a specific employee vs. the whole group.

Prototype