work |
---|
ā“ļø resume |
technologies: Javascript, Typescript, Angular, Vue.js, React.js, PHP, HTML, CSS, Tailwind, Node.js, Jasmine, Python, Flask, Git, Firebase, SQL, Bash, C++, Java, Illustrator
skills: prototyping, frontend architecture design, UX research, design iteration, testing, deployment to production
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.
ā± 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.
ā± 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.
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.
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.
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.
about |
---|
anna y lin (ę she/her) is a frontend and fullstack engineer, focused on accessibility, user experience, and challenging existing paradigms within web standards. She has 3+ years industrial experience working as a frontend engineer in cybersecurity and financial services, and has worked on 3 web projects as a freelance web developer. Previously contributed to code systems at MITRE, and Schwab as a fullstack UX engineer in the realms of cybersecurity, policy, finance, and briefly with the wonderful people at Stamen Design. She is currently based in Lenapehoking AKA Brooklyn. |
github, resume, linkedin |