Projects

Student Onboarding Site

UX Research Wireframing HTML CSS MkDocs

The Challenge

New student hires at Argonne were struggling to navigate the onboarding process due to scattered and unclear documentation.

UX Research

  • User Interviews: Conducted 1-on-1 interviews with former student hires to understand their frustrations and navigation patterns during onboarding.
  • Diary Studies: Documented my onboarding experience, revealing step-by-step pain points and emotional responses.
  • Surveys: Collected broader quantitative feedback to identify common barriers and confusion points in the existing documentation.
  • Pain Point Synthesis: Mapped and categorized issues across users to inform design decisions and prioritize fixes based on frequency and impact.
Argonne Site Persona
Common Painpoints

The Process

Initially, I started mapping user journeys and created personas to understand diverse student needs. I also collaborated with my team to write and structure all page content, ensuring clarity and inclusivity across student appointment types. Finally, we designed low-to-high fidelity wireframes, then built the site using MkDocs, HTML, and CSS with a clear and accessible layout.

I recorded and edited step-by-step video tutorials to guide new hires through the onboarding process. And to ensure visual consistency, I aligned the site with Argonne’s internal branding standards and design system.

Argonne Wireframes Argonne Personal Painpoints

Outcome

The final design helped clarify the onboarding process and will be used for future student cohorts. Stakeholder and user feedback highlighted improved accessibility and usability.

Argonne site screenshot 1 Argonne site screenshot 2 Argonne site screenshot 3 Argonne site screenshot 4 Argonne site screenshot 5 Argonne site screenshot 6