BenchPrep UI Refresh Blog Feature

BenchPrep UI Refresh

The following description outlines the general updates we are making to the site as of October 2024. As development is ongoing, the future state is currently represented by high-fidelity prototypes. The final version may vary slightly based on testing and customer feedback.

The update of our platform consisted of two main items:

  1. Styling Updates. These are global updates to the look and feel of the platform and include changes such as font, text size, white space, iconography and color.
  2. Homepage Enhancements. These are updates to homepage elements to make them more intuitive and contextualized to the learner.

Styling Updates

1. Top Right Navigation
On the top right navigation we have updated the icons and added the ability to add text descriptors in addition to the icons. We recognize that as our customers continue to expand globally icons may have various interpretations from region to region.  This takes the guesswork out and makes it easier to understand at a glance.  The text for these will be tenant based locales and the length is recommended to be limited to twenty characters.

0F063370-E215-425F-82C8-743839C1CC64_4_5005_c

2. Left Navigation
For the left side navigation we’ve updated the icons and added the ability to expand and collapse the navigation so that if a learner wants more screen real estate they are able to control that.  Collapsing the navigation will still display the icons so that learners don’t need to expand again to be able to navigate to the various areas of the site. 

F50A8340-C0E8-4BB1-8BA8-DC572B588C97_1_201_a-4

3. Font and Spacing
Throughout the platform the font and spacing have been updated to provide a more modern look and feel. 

Homepage Enhancements

4. Masthead - Prominent Call to Action
The current experience didn’t lead the focus of the user to the primary call to action.  To address this we have moved the primary CTA to be more prominently displayed by adjusting the colors and reorganizing related information to draw attention to the CTA.

5. Masthead - Calendar and Progress Bars
From the feedback we received, we understood that while the calendar functionality was useful to learners, its prominence on the homepage visually interrupted the learner’s attention to the primary call to action.  As such, we have moved the calendar, the daily progress bar and the study plan progress bar below the area that now highlights the call to action in the masthead.   Additionally we’ve also added a header to the calendar to provide context for its use. 

88B6A54B-E292-4349-BD8E-243FD9E9BE93

6. Section Headings
Currently not all sections display a heading and when the heading is displayed, it doesn't provide a hard visual separation between different sections.  We have now added headings for each section and made them stand out more so that they represent different areas better.

7. Heading Permanent Text
We have also added the ability for permanent text to be displayed below the header. While the information icon exists today, the logic behind the permanent text is that this section can contain information the user may need on a repeated basis whereas the information icon contains information that may only need to be referenced periodically.

79834CA9-0D65-40B6-960A-FFDE2A6A501E_4_5005_c

8. Learner Performance Update
Currently the learner information section right below the masthead is very prominent visually.  In addition, we received feedback that the current graphical representation may not convey the right indication.  To address this, we have decreased real estate, focused on the numerical value and made the graphs more relevant by converting them to bar graphs.

3E064F37-F349-4E98-BF8D-86AC84548324

9. Alternate Text When There Is No Data
The home page contains two areas where learner data is displayed: the learner performance section followed by the strengths and weaknesses section. When a student first accesses the course, neither of these sections contain data because the student has not engaged in any activities. As such, the utility of these graphs and information is not apparent at the onset. To address this, we have added the ability to have alternate text (locale) that can be displayed when there is no data so that the learner understands that by engaging in activities within the course, they will be able to populate these areas with data and be able to see their performance as well as their strengths and weaknesses. 

7F0A5BA5-466E-430A-9C84-9E71A52C6D7A

10. Expand Collapse of the Strengths and Weaknesses
Many times a course may have a large set of categories and subcategories making the Strengths and Weaknesses section on the homepage significantly long and daunting. In order to assist learners in getting to the right data more efficiently we've added the ability to expand and collapse this section at the category level. This functionality has also been replicated in the Study Plan, Lessons Table of Content and Practice.

11. Strengths and Weaknesses Updates
One of the largest areas of feedback was the strengths and weaknesses section on the home page and how it was visually represented.  Basically there is a lot of data that needs to be interpreted by the learner with a very text heavy interface.  In order to simplify the interface we have made some significant updates by streamlining the interface allowing for a more effective and efficient interpretation of the data.  We’ve minimized the text and added simpler visual indicators for proficiency levels.

A39E3BA7-EC70-4257-81C0-BAD7DE0741CF13F3F4BC-302A-46A3-974F-A3A8A74617F5