PG&E PSPSPublic Safety Power Shutoff

To aid in Figma prototyping, I set up a design system for the Scoping and Notifications/Reports tools. The Scoping tool is a custom application utilizing the Material UI design system and the Notifications/Reporting tool was the Palantir SaaS application utilizing the Blueprint design system. Both design systems are based on the Atomic Design Framework where its methodology creates interfaces from building blocks to build components and patterns. Part of this task was not only to build and set up reusable components and patterns to improve my workflow, but also to improve visual consistency between the two applications. The Scoping tool layout was reconfigured to match the Notifications/Reporting tool and colors were updated for brand purposes. Business users expressed the need for a dark mode UI option for situation room use during PSPS events so the design system had to support both light and dark mode. With tools and features being added, the design system included visual dashboard components, patterns for system processes and annotations.

The interface and navigation was overwhelming so to help reduce the cognitive load, I audited and outlined all content within each page to identify hierarchy as well as relationships between information, functions and navigation flows. I collaborated with Business and Product owners to validate a leaner navigation structure. I was responsible for restructuring and documenting content by transferring knowledge into the Atlassian Confluence portal. There, I was able to use the tree structure helping to easily outline the application content structure and demonstrate UI and other features with screenshots, video walkthroughs and other visual support.

While newer design processes were fully adopted, I still had to work within the same design process helping mock up screens and prototypes for developers. In some tools, content had started to be added endlessly on to their page, so I audited and performed heuristic evaluations on the UI for each product, atomically organizing and sorting content and features. The biggest design challenge I faced was helping transition some Product Owners and Business Analysts from driving and making design decisions. It required more effort to create additional mockups and slides to demonstrate different approaches that would eventually perform better with business users.

The design process included the creation of visual mockups and interactive prototypes. Mockups were built using the design systems using the UI components to set up the page layout, content and features. For smaller updates and content, mockups could only consist of single static pages. For more complex features, patterns and flow, I built hi-fidelity interactive prototypes that looked and worked just like a real application. To get early feedback from business and technical stakeholders, preview links from Sketch and Figma were linked into comments within the Jira tasks and stories.

To start applying more user-centered design practices, I conducted a UX and UI workshop that provided various methods of generating ideas and solutions. I also wanted to create a sense of collaboration that allowed everyone to feel empowered with these practices by developing user empathy. I encouraged collaboration in user-centered design practices for new tools and features by involving stakeholders in planning and work sessions.