Re-imagining 20 years of product development for a unified and refined user experience
A proposed redesign / re-architecture of the navigation and major portions of the Student Information System of PowerSchool.
Principle UX Designer, Powerschool Inc. – Summer 2021
System analysis, User flows and stories, Sketching, Flow Diagrams, Stakeholder presentations, Wireframing, Visual Design, Prototyping, Front-end Architecture
PowerSchool SIS workflows are linear and most are over 20 years old. The system has become a collection of functions without a cohesive UX architecture. View the full-size content map.
Securing content relied on administrators visiting each page and manually setting permissions. Any changes to user groups meant repeating the entire process. Most administrators resort to a form of security through obscurity: hiding pages by simply removing the links from the navigation. Malicious users could still access the pages directly if they guessed the URL.
The PowerSchool SIS had a complex, nested navigation system where users had to click through multiple pages with long lists of links in tables.
The content was confusingly organized by tech stack. For instance, reports were separated into four different pages, one page for each technology stack. This forced users to remember the specific technology used for a report to find and run it, even if all the reports covered similar topics.
PowerSchool had adopted an angular-based design system. Because the SIS wasn’t coded using the design system, everything had to be rewritten from scratch (millions of lines of code and some 6,000 pages of HTML). A full rewrite was out of scope: high labor cost, risky, and impact too many projects.
My solution was to update the CSS to match the design system but maintain the standards-based HTML that I had introduced years before. I was able to produce a working front end that appeared to be using the design system.
My solution to the security issue was turning the system into a CMS of sorts. A few years prior we had registered all the pages in the system to the database to allow users to customize the system, and when updates came out we knew what pages were customized because they were flagged in the database. We could use this catalog as a repository for security. If the page permissions were tied to the page record we could create a single page UI to set and manage the security for the pages in the database.
I pitched the concept to our product group and they loved it. I also produced some clickable mockups to use for cognitive walkthroughs with a number of our customers. The response was fantastic. The vast majority of our users liked the approach and were eager for the changes.
This is a clickable prototype I developed in Figma. It’s a fairly complex system but the reduction in complexity is amazing. There are two flows:
I conducted cognitive walkthroughs with existing long-term users. Many of these users had been using the system for a decade and were regular contributors to the customization community for our product. There was an overwhelmingly positive response to my design. Not only did it provide a huge reduction in page loads, simplification of the navigation, increased security, decreased the time to manage security, and reduced confusion on most of the major workflows.
In my last year with the company, they accepted my proposal, although it doesn’t seem that they have implemented any of these changes since I left two years ago.