University of Michigan, Inter-University Consortium for Political and Social Research (ICPSR), ANN ARBOR, MI
Synopsis
Hired to fast-track UX engineering efforts within a newly formed UX product design team. Collaborated closely with UX researchers and designers to implement a custom design system and integrate it across internal web properties. Built modular, reusable UI components using Semantic HTML and Sass.
Supported three cross-functional Jira teams, delivering frontend architecture and theme styling via the Parcel JS framework to streamline collaboration between frontend and full stack developers.
Maintained clear, technical documentation for engineering handoff and onboarding. Conducted and presented analyses of site performance, usability, and SEO, driving optimizations. Contributed to and influenced the architecture of Next.js applications with a focus on speed and user experience.
Key Achievements
- Improved end-user experiences through Design Thinking framework
- Built custom design system library delivered in React components
- Collaborated across all levels in the organization and directly in Agile teams and documentation
- Delivered creative design thinking solutions, with a strong visual design eye
Links
ICPSR Design System Documentation (currenty called Mosaic), was the result of my initial work building a scalable, modular design system for internal web applications and legacy sites. I introduced ParcelJS as a zero-config, performance-oriented bundler to generate cache-resistant stylesheets for multiple themed implementations. Using Modular SCSS, we extended our core design system to ensure consistency and reusability. Bootstrap was initially integrated for responsive layout support. Later its naming conventions were adopted across the system to align with newer team members’ familiarity and promote uniformity.
The naming convention, is a often discussed topic. It is a common source of confusion for all team members, coming from different backgrounds and influenced by their previous experiences.
My contributions were heavy in this document. But this will change as time passes. Each project had it’s own symbolic internal names such as RDG, ReDMAS, and others. They were all pieces which became the Research Data Gov site.
Components and prototypes I was heavily involved in were
The design system itself was created in Figma. That was the basis of the creative team’s work, where several UX/Product Designers contributed to it.
Research Data Gov is a product of the federal statistical agencies and units, created in response to the Foundations of Evidence-based Policymaking Act of 2018. The site is the single portal for discovery of restricted data in the federal statistical system. ResearchDataGov.org is built by and hosted at ICPSR at the University of Michigan, under contract and guidance from the National Center for Science and Engineering Statistics within the National Science Foundation.
The site was developed in NextJS. Because the entire project was on a rushed schedule, various project systems were broken out into multiple smaller projects to later be combined into a single, larger application. This explains how I was placed on two product Jira teams. I contributed to the creative team, the RDG team, and a third called ReDMAS. This stands for Research Data (Management) Application System. The vision is to develop a single application interface for applying for restricted Data.