NFHS Admin

NFHS Admin

My Role:

UX/UI Design, Testing

Platform:

Standard web

Timeline:

Internship 2019

Project Goal:

Streamline daily processes to give admin autonomy and improve work efficiency.

Context:

NFHS, National Federation of State High School Associations, manages the rules for competitive high school activities.

NFHS has a public website with general information, and a learning center that offer courses to coaches and students. They employ a team of administrators that assist customers and maintain the learning platform. The admin panel allows admin to manage users, sponsors, run reports, and update course and certificate materials.

The original Admin site was built ad-hoc over a number of years by the dev team as things came up. Due to the lack of planning and cohesion it was basically useless. When something needed to be updated, the employees at NFHS had no idea how to do it themselves, and would have to contact the dev team at Webonise to do it for them.

Due to turnover on the dev team throughout the creation of these tools, it often took an excessive amount of time to decipher how to complete the change, often resulting in the creation of redundant functionality.

Problem Identification

Painpoints

No consideration of the intended user or usability of the tools. Circular action paths that overcomplicated simple tasks.

Lack of hierarchy and accessible information structure. Cluttered and difficult navigation to important functions.

Poor system of recording admin interactions with users to allow continuity of support.

Unnecessary overlap of features creating a disjointed experience.

Understanding the user

Age:

40 -60

Tech Proficiency:

Medium to low

Usage goals:

Assist customers with user errors
Ensure smooth usage of public site

Assist customers with user errors and ensure smooth usage of public site

Defining needs & opportunities

The original layout of the site housed each function in a dropdown menu, with extremely vague language describing its function.

I began by examining the basic structure and trying to understand the underlying purpose of each tool, realizing many of the tools were manual overrides to fix user errors made on the front end.

Considering almost all of these functions required the admin to first search for a user, I determined the most intuitive solution was to use the user profile as a dashboard the admin could use to manage their information.

Basic User Look Up

Clickable Prototype

Goals:

  • Allow the admin to access basic functions- Reset Password, Sign in as User, and User History directly from search results.

  • Create a note system that gave the admin a space to record interactions with the user to maintain continuity of support between the user and other admins.

  • Allow the user information to be editable by the admin from their user profile so changes can be saved into the user history and referenced at a later time.

User Look Up Tool Integration

Clickable Prototype

Goal:

  • Integrate tools to be centrally located and easily accessible.

  • Course Extend, Update Course Progress, Self Course Movement Tool, Distributed Course Movement Tool, Issue Free Course, Invoice Look Up, License Look Up, Refund Tool

Content Management

Clickable Prototype

Goal:

  • Create a new tab for managing content.

    • Top Bar Notifications: Allow the admin to view and create info banners to be displayed on the homepage, as well as schedule them in advance

    • Share Content Manager: Allow the Admin to manage the pre-populated content that appears when a user shares a course via social media

    • Home Page Editor: Future Feature

Purchase Order and Fullfillment

Clickable Prototype

Goal:

  • Create concise platforms that eloquently display relevant information.

    • Purchase Order: When a users makes a request for a bulk order, it needs to be approved by an admin. If denied, the admin can send a response to the customer while still in view of their order information directly from the page rather than navigating to a separate email platform, enabling the response to also be recorded in the user history.

    • Fulfillment: Used to keep track of the packing and shipping of physical orders, Admin need a way to connect to the user profile and invoice while ensuring order accuracy.

Certificate Builder

Clickable Prototype

Goal:

  • Create a simple step by step process that allows the admin to create and edit certifications as well as view old versions.

  • This was a major feature that needed a lot of attention. The original interface the dev team built was very unclear which required a circular and disconnected process to complete, at the extent the admin could not figure out how to use it at all. I wanted to streamline the process to take them through the steps of creating a certification that would enable them to understand where they were in the process as well as easily view the requirements.

Goal:

  • Create pages that better organize and edit relevant information.

  • Partners: Partnerships are companies and organizations that sponsor certain courses. Despite the indication, they must be added directly during the creation of course content. The need for this page was to keep track of partner statuses and their details.

  • Affiliates: Affiliations are a different kind of partnership that supplies a company or organization with a referral link, which gives them a percentage of the sale when the course is bought through that link. The needs for this page were to allow the admin to assign revenue sharing courses to a partner. While I originally wanted to incorporate this in with the partnership page, the admin asked to keep them separate to maintain a more obvious action.

Transaction Log

Clickable Prototype

Goal:

  • Improve the experience of filtering and viewing transaction data.

    A simple redesign of input options into a more logical flow. Emphasis on logical order and ease of use.

Goal:

  • Improve the experience of filtering and viewing transaction data.

    A simple redesign of input options into a more logical flow. Emphasis on logical order and ease of use.

Reflection

This was my first "real" project, and I learned a lot about workplace collaboration. I was so excited to see it developed.

Due time restrictions I was unable to talk directly to the helpdesk admin as much as I would have liked to, but that gave me the opportunity to find answers I was seeking though other channels, as well as tailor my interview questions to the most pertinent information.

I collaborated closely with the dev team, and it gave me great insight to how the mind of a developer works as I understood their reasoning and process of creating the initial bare bones panel.

2024 S Schaedler Design

2024 S Schaedler Design

2024 S Schaedler Design

NFHS Learn

NFHS Learn

My Role:

UX/UI Design, Testing

Platform:

Standard web

Timeline:

Internship 2019

My Role:

UX/UI Design, Testing

Platform:

Standard Web

Timeline:

Internship 2019