Draft PBIS Rewards Pattern Libraries Case Study

Designing and creating pattern libraries in a SCRUM environment

PBIS Rewards is a web and mobile application for teachers, students, and family members to manage their PBIS program. The application is used by over 20,000 schools in the United States. I was the sole designer and front-end developer for the application. The team I collaborated with during this project consisted of a diverse group, comprising a product owner, sales staff, support staff, quality assurance specialist, and developers. The pattern library helped the development team create a consistent user experience and speed up development time.

The pattern libraries are built with the same technology as the applications which are vanilla HTML, CSS, and Javascript. They are organized using Atomic Design methodology with WCAG Level AA guidelines in mind. They are a record of the past elements and an example of how elements should look and function in the future.

The Start of the Pattern Libraries

The applications had already been worked on for a few years before I was brought in to update the user interface. We started with the Teacher Desktop application in 2019. Some of the problems that were fixed were inconsistent typography, buttons, and information architecture. Accessibility issues such as color contrast ratios and non-semantic HTML. Many elements including colors and typography being used were off-brand. Icons were being pulled from three different libraries and were inconsistent between desktop and mobile.

New User Interface

The new desktop user interface was implemented by five developers in three, two week sprints. This included 20 features, 50 reports, 7 dashboards and a district control page. The new icon library was Font Awesome 5. All the colors were addressed by color contrast ratio and moved to a on brand equivalent.

Staff Pattern Library

On the right, in the gray box is a section of the colors in the pattern library. Colors were defined by their HEX value and custom properties were created. At the start of the project custom properties could not be used because of support of older browsers in schools. To the left of the sample color section are all the colors currently in use on the staff desktop application. On the far left, is the entire menu for the staff desktop application to give an idea of scale and amount of the components.

Chart Technical Example

Sometimes you have to know the limitations of a javascript library in order to design for it. There were six, two weeks sprints with five developers to create all 50 reports and seven dashboards in the applications. All reports were created with chart.js a very robust chart javascript library. The one below is one of the more complex examples. This chart shows the average amount of referrals during the day with a bar chart and the amounts of referrals by time with line chart. The code The code I wrote for the developers is in black below the chart example.

The Pattern Library Process

This is an overview of adding elements to the pattern library. I'll walk through the process step by step with the Student Desktop application in the below examples.

PBIS Rewards Old Student Desktop Application

Our Desktop Student application had many of the same problems as the Staff Desktop application. There were many color contrast issues, inconsistent functionality with buttons, and an unnecessary column-based layout. The layout was created because the application had to fit onto a portrait-orientated tablet and none of the developers knew how to code a responsive layout.

Wireframe

After having discussions with the project manager, sales, support, and developers. A wireframe was laid out to further discussion. A possible school banner was suggested. However, not all schools have banners and the technical challenges of giving them a builder would be out of scope. We know the store is important to students because that's the main way they spend points. However, not all schools have stores. So, including it on the main page without a replacement wasn't an option. In the top right corner below the header. There was a lot of discussion around these elements because they all related to things about the student's access and profile including: activating the mobile application, signing out if they are on a shared device, or doing a social emotional learning (SEL) check-in to tell the teacher and staff how they are doing today.

Figma Elements

As I work on the design a Figma component library is built up in a separate file. They are built using the same Atomic Design methodology as the coded pattern libraries.

New Student Desktop and Mobile Application

A student banner was created for student's to easily identify they were using the correct application. Below shortcut cards were created to pull certain locations out of the navigation that student's would most likely want to use. In the student's profile column their points and SEL check were added. Then more access features were moved to a drawer and profile page. Icons were cleaned up and made consistent with the other applications.

Responsive Design

Once the Figma designs were finalized, I transformed them into fully functional responsive pages. Using my coding skills, I crafted the HTML and CSS breakpoints that would serve as guidelines for the developers. Additionally, I successfully tackled the challenge of creating two additional responsive page layouts to complement the existing designs.

Interactions and transitions

Also, I created all of the javascript interactions and CSS transitions. Making sure the user visuals and experience were consistent and on-brand throughout the application.

Pattern Library

All of this went into the pattern library for developers, quality assurance, and project managers to reference. This used the same methodologies as the staff pattern library breaking elements down into their smallest pieces: colors, typography, and icons and working your way biggest elements templates and pages.

User Interfaces Checks

After the developers finish their work, a comprehensive user interface check is conducted. I compare the initial design with the implemented version. Then make necessary adjustments in the browser console and make a screenshot. The screens added to Jira and move the corresponding card to the "needs work" column for further attention. This meticulous process ensures a polished and consistent user interface.

PBIS Rewards and Others Pattern Libraries

I have been working on pattern libraries for over seven years. I created the PBIS Rewards one to start. Later, I created them for various internal startup ideas at Motivating Systems including TRiO Perks, Workplace Rewards, a self launching application, and Badge Builder for the PBIS Rewards Application.