UX Analyst Intern
June 2026 - August 2026
.png)
Data Dashboard Redesign
Project Overview
I redesigned a data viewing dashboard that had already been coded using Claude code. The main concerns were around the look and feel of the dashboard with a key requirement being to update it to match the Federal Reserve branding.
The Process
The Original Dashboard
Redesign Version 1
In addition to updating the UI colors and spacing, I also clarified the data upload section, consolidated filters that were unnecessarily duplicated for the summary and detailed reports, and simplified the instructions and clicks to generate a detailed report.
Design Specs
Annotated Mockups
Based on feedback from the division team I iterated the designs. Key changes were removing the upload data section since data would be preloaded, showing how the graphs and data tables would look and including color variations, and designing the drop down menu style. For the buttons and drop down I was able to use components from Google's material design kit as a base.
For handoff to the developers I created a set of design specs documenting color and typography use across the designs, as well as annotated mockups including design and interaction notes and a clickable prototype for them to view.
Key Takeaways
Use different handoff method for developers using Claude code
The developers I was working with were using screenshots of my mockups to feed Claude code as a starting point. This made it more important to create multiple mockups showing the different interaction states as static screens instead of just having a clickable prototype.
Speak up when time is not being used efficiently
In multiple instances developers requested I change the colors in my mockups to match different colors that the developers had used. I let them know we didn't need to dedicate an entire meeting to making the mockups match the published site and that minor changes could be made directly in the code and updated in the designs as part of a larger round of future iterations.
Design System Components
Project Overview
The Federal Reserve is in the foundational stages of creating a design system. I created multiple components in Figma, some were based off previously coded designs and some were new custom components created using Google's material design kit as a base. I also created a few color themes using the material theme builder plugin.
Tabs
Tabs are a frequently use component for Federal Reserve sites. I created component sets with multiple variants for icons, fill style, active vs. inactive style, and selected tab. With this method designers are able to reuse the components and easily use toggles to change the type of tab while designing or on click in a prototype.
Transfer List Component
Transfer lists allow users to select items and move them between lists. I created a Figma component based on the original coded version and updated the design to make the add/clear selected vs. add/clear all more intuitive and added undo and redo buttons in accordance with the user control and freedom usability heuristic.
.png)
Basic Headers
Sites across the Federal Reserve all used headers with slightly different styles and attributes. For the design system I based the format off existing headers, including options for key aspects like classification and account settings, and giving designers multiple size options to choose from.
Side Navigation Menu
Since many people at the Federal Reserve now use widescreen monitors, there was demand for a side navigation menu to replace traditional headers on some sites to free up vertical page space. I designed a basic component that has a collapsible and expanded version, multiple pages, and a secondary menu. The component is responsive so that it can be sized as desired for different sites.
Color Themes
The Federal Reserve mostly uses variations of blue and gray, but some products wanted different themes. I created a few light and dark palettes using the material theme builder plugin to generate variables for primary, secondary, and tertiary schemes. Using variables allows teams and users to quickly and easily switch color themes, and ensures 508 and WCGA accessibility compliance across all products.
Web App Prototype
Project Overview
This web app was requested by a Federal Reserve division to help guide users through a step-by-step process to improve their workflows. A word document existed detailing the process, but users found it complex and overwhelming. The web app integrates links and data storage to ensure a frictionless user experience and allows stakeholders to track return on investment.
I worked with another designer to conduct background research, create user stories and personas, sketch, wireframe, prototype, conduct user testing, and prepare the design files for handoff to developers.
Background Research
We started by doing a stakeholder interview to get project context and understand requirements. We then identified key components from the original word document that needed to be included in the MVP web app.
We started by doing a stakeholder interview to get project context and understand requirements. We then identified key components from the original word document that needed to be included in the MVP web app.
User Personas and Stories
User personas and stories allowed us to better understand our users and their needs. A key pain point to solve was that many users felt overwhelmed looking at the playbook and wanted more examples and step-by-step guidance.
JACK
"As a first-time user, I want to be guided through the process step-by-step so that I feel confident and not overwhelmed"​
ALLY
"As a manager, I want to see examples of successful solutions so that I can visualize the benefits for my team"​
Sketches and Wireframes
We started by individually sketching first drafts for each page of the web app on paper and then reviewed together to identify strengths and opportunities and align on design decisions.​ We then consolidated the best ideas into unified lo-fidelity wireframes.​ After creating the wireframes we met with a developer for recommendations on technical details and feasibility.
Hi-Fidelity Prototype
After that we created a high-fidelity clickable prototype with color, images, and interactive components to create a realistic user experience.​ I did the majority of the work in Figma while my colleague wrote the content.
User Testing and Design Iterations
Once we had our working prototype, we conducted user testing, a critical part of the design process. We did multiple rounds with a group session as well as individual feedback from first time users and UX specialists and made updates based on their comments. When presenting our findings to stakeholders and leadership we rephrased our key insights as key improvements to show positive change.
Key Insights:
-
Expectations mismatch for time commitment and complexity​
-
Unclear requirements and instructions​
-
Users wanted more examples with media and details
Key Improvements:
-
Clarified information about steps and time requirements​
-
Improved requirements and instructions​
-
Enhanced examples with media and details
An example of how we clarified requirements and instructions between the wireframes and hi-fidelity prototype was changing basic button links to a detailed instruction boxes, clearly denoting to users the action is required.
Developer Handoff
We consulted developers for insight throughout the design process but did not have someone set to take over immediately. To make it so someone can easily pick up the project again in the future we saved all the design files, added design specs and annotated interaction notes, and made recommendations for features that should be prioritized in the future.
Key Takeaways
Scoping and Prioritization
There was so much we wanted to accomplish in a short time frame so assessing the most important features that could be realistically completed is a skill I will keep honing.
​
Importance of User Testing
It's always eye opening to see results from real users. Just because something makes sense to me as the designer or to a developer doesn't mean it works for the user. This was especially important for stakeholders who knew the product so well they were blind to issues a new user might face. Being able to present feedback and quotes from real users was essential to getting the stakeholders on board with changes.
​
Collaboration is Key
My colleague on the project and I had different backgrounds and skill sets, but coming at problems from different perspectives and brainstorming together was extremely helpful. Even if I am working on individual projects in the future, I will plan to check in every so often with other designers to get their thoughts. AI can also be a helpful thought partner when working solo.