ACCME (Accreditation Council for Continuing Medical Education)
Problem: Database website has poor search functionality
Role: sole UX Designer
Results:
1,700+ accredited organizations
1.5M+ credits reported
400,000 completion records
Administrators, medical board members, and course providers can access and report this data through a fast, intuitive, and personalized user experience.
ACCME’s database website "LRS" (Learning Reporting System) is for tracking and managing learning data across multiple user types. LRS is to work in conjunction with their existing database website "PARS" (Participants Activity Reporting System) or for new users/boards, it would be used in place of PARS. ACCME currently works with 5 medical licensing boards and is in the process of onboarding others. Their objective in redesigning their database was to improve usability and visual aesthetic to help them attract additional boards, while also streamlining and simplifying internal processes. The project was very heavily focused on data visualization and record maintenance.
Search and Results – Issues
Poor use of vertical and horizontal real estate
Working on this project, I immediately noticed how the existing website was trying to cram too much information into the space allotted. This was made worse by the fact that much of the horizontal real estate was lost to a left hand margin which only sometimes contained navigation links.
Form fields and buttons lack hierarchy and definition
Asterisks were used on required fields, but there is so much going on with the first required field, it makes it easy to miss the second. Additionally, if the user chose to search by Accreditor and Provider Name (versus searching by ACCME Organization ID), it was easy for them to select the Accreditor but then bypass the Provider Name.
Search and Clear buttons are the same size and color, and they're right next to each other. This makes it very likely users will click Clear when they mean to click Search, especially given that the Clear button is on the right (forward, typically) and the Search button is on the left (back, typically).
Results returned without organization or hierarchy
1,189 undifferentiated lines, sortable only by column.
Search and Results – Solutions
Search Fields
Left-hand margin was removed to make better use of the horizontal space
Bounding boxes added around Provider fields help the user know to select both Accreditor AND Provider OR enter ACCME Organization ID. I also communicated to the visual designer and development team that if the user chose an Accreditor, the text field for ACCME Organization ID should then be deactivated and the Provider Name dropdown should provide a visual cue that a second entry is required prior to clicking search.
Added demarcation line between required and optional fields.
Added “Export Results” button and placed it next to the Search button since both are options for how the user can view their search results.
Clear button was removed in favor of a Reset Search link, making it visually and spatially distinct from the Search button to hopefully prevent erroneous search field clearing.
Search Results
After clicking search, the search fields disappear, leaving boxes stating what search parameters were set. This was done to make better use of the space, and also to give the user clearer feedback that their query had been run. Required parameters are set above optional parameters to reinforce hierarchy. I chose to color them differently for the same reason.
Again, as in the search fields screen, I removed the left-hand margin to make better use of the horizontal space.
Introduced pagination to make the search results easier to digest.
Added an Export Results link at the bottom so user can still have that option without having to go back to the search fields screen.
Filtering Results
Some courses provide learner credit for multiple boards, and that includes state boards or specialty boards. In the original design, users would have to search for course/learner results per board, and then start over if they needed to search in another board. In this example, the user is looking at learners’ status for the American Board of Internal Medicine, but if they wanted to search other boards, they could use the dropdown and also toggle between specialty and state.
Notes explain that the drawer will present 15 choices in the window and if there were more than 15 results, user would be provided with a vertical scrollbar.
Users would be able to batch upload results from recent courses or add individual lines of data manually.
User is also given filtering options for learners. This functionality was included in the original design but again, was very complicated and manually intensive.
Users are able to click into individual learner records to view their participation history for a specific course. It is unlikely a participation detail would have 18 pages as shown in this example, but there are cases where a learner will start a course but isn’t able to complete it. This results in the course timing-out and the status defaulting to “rejected,” which could cause their participation record to expand beyond a single page, so I wanted to show what that would look like.
Previous:
Next: