work about

Healing Justice Lineages

The HJL homepage, with tooltips providing more context on the project.

⇱ Healing Justice Lineages website

PHP, WordPress, HTML, CSS, JavaScript

What

Healing Justice Lineages is an archival project of collective care and safety strategies.

Why

To continue the work of educating the community on these strategies, HJL wanted to create a website for people to learn more about the project.

How

The HJL website was redesigned with a custom WordPress theme based on the project’s needs and design specifications, to reflect the organization’s dedication to promote strategies toward collective care. The project involved 4 months of work until launch, with accessibility features such as the low-fidelity color mode, an accessibility tagging system for picture descriptions, as well as a temporary password-protected mode.

ATT&CK Navigator

As a UX engineer at MITRE, I was responsible for the UX design and development for four projects at different stages: ATT&CK, CALDERA, and two other projects related to policymaking.

The ATT&CK Navigator and CALDERA are both public, open-source cybersecurity projects that are used by cybersecurity researchers and experts.

A demo of the dark mode and search features on the ATT&CK Navigator.

⇱ ATT&CK Navigator

Angular, Node.js, TypeScript, HTML, CSS, JavaScript

What

The Navigator is one of MITRE's most active projects, enabled by its widely-accessible platform. It visualizes an extensive database of known cybersecurity threats and methods.

I was a good fit to work on this team because of my prior experience and knowledge working with backend-heavy Angular apps.

Why

The ATT&CK Navigator is a large open-source project, with many contributors and community supporters. There are constantly many pull requests made on the repository to request a new feature, or to fix a bug. As one of the UX engineers on the small team maintaining the project, I was tasked with these pull requests.

How

Two new features I worked on for the Navigator, which were both popular requests from the community, were: 1) dark mode, and 2) the search and multi-select interface.

The features were tricky in that they required storing cookies to set the dark mode based on the user’s preference (falling back on their device’s default mode by using CSS and JS if unset), as well as updating the Angular app infrastructure to accommodate these two new interface features.

CALDERA

As a UX engineer at MITRE, I was responsible for the UX design and development for four projects at different stages: ATT&CK, CALDERA, and two other projects related to policymaking.

The ATT&CK Navigator and CALDERA are both public, open-source cybersecurity projects that are used by cybersecurity researchers and experts.

The redesigned CALDERA web app.

⇱ CALDERA

Python, HTML, CSS, JavaScript, Alpine.js

What

CALDERA is a cybersecurity attack simulation software, used to emulate red-team (adversary) and blue-team (defense) campaigns.

Why

The CALDERA project has built a library of APIs for simulation purposes, but for users who are not familiar with terminal interfaces, we wanted to create a more user-friendly interface to provide more visual feedback and call the APIs.

How

I recreated the architecture flow based on the team's requirement that the new user interface (UI) is fairly non-intrusive and lightweight. The app is largely in Python, and used Jinja as its template rendering engine.

After some research, I found a fairly simple way to reduce code maintenance burden with the alpine.js library.

With faster, dynamic templates, we were free to recreate the CALDERA UI's look-and-feel.

I conducted user outreach to better understand the use cases of CALDERA's features, as well as to gain an insight into cybersecurity tooling basics. We were finally able to repackage CALDERA with a new UI, called the Alpha release.

Conclusion

The Operations Page is one of the most heavily-used features in CALDERA. It's a useful page with a lot of information and available interactions for users to play around with. With the previous UI, some of this information (such as the color legend and what statuses they were indicating, and what was being run in this operation) was lost because either the associations made between interactive and informational elements were unclear, or it was overshadowed by other more visible elements on the same page.

A lot of the consideration was put into making the new version of the Operations page, most importantly, on the presentation of information.

What is the key piece of information users need from this page?

What is necessary to give users the sense that they have control over this page?

To accomplish this, I borrowed and reinforced the timeline idea from the previous UI, and changed its layout in the new UI to become the main focus of the Operations page, including more informative status labels as well.

Since there are so many actions available on the page, I also grouped the actionable elements by what elements they affect, in hierarchical order. For example, located on the top left of the page are the actionable items that affect the operations as a whole and to the right, are the ones that affect each individual operation.

The main information on the page is laid out as a table, so the user can interact with each operation command as an individual entry, while still able to view them in a timeline-style.

Required Minimum Distribution (RMD)

I worked on the Digital Accelerator (DARE) team at Charles Schwab, which focuses on transitioning physical (traditional, paper-heavy) to digital services.

As the accessibility and UX liaison on the frontend team, I bridged the gap between front-end, UX, and product teams, to digitalize the retirement and inheritance process at Schwab. Collaborating with the UX Research & Design team, I developed prototypes for three projects and developed the products for production.

Demo of the RMD web app.

Angular, Node.js, TypeScript, HTML, CSS, JavaScript

What

The Required Minimum Distribution (RMD) web-app is the first project DARE tackled as a team. It was important to the Schwab brand to take care of all clients, and services for retired clients had a lot of room for improvement.

Why

One of the main issues we were particularly passionate about was the fact that a lot of these retired individuals–when it came time to take their annual RMDs–would receive stacks of paper forms in their mail. They would then have to manually go through all these documents, fill out the forms, and mail back what was needed to Schwab.

The whole process could take months to process, and a lot of times, clients would default to visiting a branch in-person, or calling a Schwab branch for individual support.

We wanted to replicate this one-on-one, hand-holding process by digitalizing the Schwab retirement experience. What we started with was a web app that took this manual paper-process, and turned it into a 3-step online application.

How

To design this we did multiple design workshops, user-testing sessions with paper and coded prototypes, and technical discussions to figure out what clients features they expected, and what they would like to see in the app.

As accessibility advocate, I participated in user research sessions, and collaborated with researchers to reduce confusion and enhance the user experience in each prototype iteration. I ensured the code was accessible and facilitated regular accessibility reviews for every new feature.

Notifier

I worked on the Digital Accelerator (DARE) team at Charles Schwab, which focuses on transitioning physical (traditional, paper-heavy) to digital services.

As the accessibility and UX liaison on the frontend team, I bridged the gap between front-end, UX, and product teams, to digitalize the retirement and inheritance process at Schwab. Collaborating with the UX Research & Design team, I developed prototypes for three projects and developed the products for production.

Demo of the Notifier web app.

Angular, Node.js, TypeScript, HTML, CSS, JavaScript

What

The Notifier and Inheritance Center apps are like two parts of a whole: digitalizing the entire estates inheritance process at Schwab.

Why

Like with the RMD project, we wanted to accelerate the inheritance process by making it very convenient for clients and non-clients to give us the information we need, to help them move this process along.

Conclusion

One interesting problem I delved into was the lack of standards around the exchangeable image format (Exif). This is the reason why a picture you took vertically with your iPhone could be horizontal when viewed on your friend’s Android, for example. The Notifier app has a file upload feature, and this was a recurring bug that I noticed and researched into to fix it. In the end, I wrote a whole article about this obscure topic, which you can read here: Why Your Grandma’s Images Are Being Rotated Wrong.

Inheritance Center

I worked on the Digital Accelerator (DARE) team at Charles Schwab, which focuses on transitioning physical (traditional, paper-heavy) to digital services.

As the accessibility and UX liaison on the frontend team, I bridged the gap between front-end, UX, and product teams, to digitalize the retirement and inheritance process at Schwab. Collaborating with the UX Research & Design team, I developed prototypes for three projects and developed the products for production.

Demo of the Inheritance Center web app.

Angular, Node.js, TypeScript, HTML, CSS, JavaScript

What

The Inheritance Center presented more of a user experience and interface challenge, in that we wanted to figure out what was the best way to present to a client a list of things Schwab requires of them for this process, during what could be a very distressful time in their life.

I worked with the design team to build prototypes for and took notes during user-testing sessions, which helped me gain insight into our end-users.

Why

One problem we encountered in preparing for a user-testing session was the amount of hand-holding we would need to provide the test participant, in order for them to test the app in a logical way. This was due to how our mocked data worked. For example, if our app was mocked so that it would present task 1 as “not started”, and later to “in progress,” then we would have to instruct the participant to make sure to click on only task 1, otherwise it can become confusing.

I did not believe this made for true testing because it would not give us an accurate picture of what a client would do and how they would feel while using the app, realistically.

How

I solved this problem by writing a piece of code that would intercept the way our mocked data was being passed into the app as the user interacts with it, and swap it with the correct piece of data to match what the user should expect to see.

With this, it wouldn't matter whether the participant clicked on first task 1, task 2, or whichever task first, because the app would always return the correctly mapped data based on what they clicked on.

Superdiversity

Demo of the Superdiversity web app.

⇱ Superdiversity

React, JavaScript, HTML, CSS

What

I built a React web app for Stamen Design, in collaboration with Max Planck Institute to visualize data collected on diversity patterns in different countries.

Why

It is a single-page application (SPA) built in React to host all the data visualizations, with dynamic controls as users interact with the page.

How

The data highlights three large cities, and users will be able to alternate between the three cities by clicking on buttons located at the top of the page.

I implemented a hash-scrolling feature for this app to keep track of: 1) where the user has scrolled to on the page, and 2) what the user has clicked on to customize the data visualization. This way, say if you wanted to share a particular data visualization with a friend, then they will be able to see exactly what you wanted to share, with the settings you’ve customized it to.

At the time, the Intersection Observer API was still new, and I discovered it while researching how to implement this feature. Though it was not fully compatible with IE, it does have a polyfill, which I added in for cross-browser compatibility.

With Intersection Observer, I was then able to track custom user settings within the data visualizations by adding them as hash parameters to the page.

Pacific Workers' University

A demo of the learning management system.

PHP, WordPress, HTML, CSS, JavaScript

⇱ Prototypes

What

The Pacific Workers' University is an interactive learning system for lawyers, legal assistants, and case managers at Farber & Co.

Why

As the law firm expands and takes on more clients, the amount of legal information and the number of people who need access to them increases. I converted their library of information to an online learning management system on WordPress that can be edited and accessed by current and new staff.

How

An online learning management system built on WordPress, with a login, dark mode, and a card display for training lessons.