Strengthening student support and usability by reorganizing content, minimizing friction in key user flows, and applying data-driven UX research.
Strengthening student support and usability by reorganizing content, minimizing friction in key user flows, and applying data-driven UX research.
Strengthening student support and usability by reorganizing content, minimizing friction in key user flows, and applying data-driven UX research.
User Research & Information Architecture Case Study
SEMTE Graduate Resources Website, Arizona State University
User Research & Information Architecture Case Study
SEMTE Graduate Resources Website, Arizona State University
User Research & Information Architecture Case Study
SEMTE Graduate Resources Website, Arizona State University
In a rush? Use the navigation below 👇 and skip to what matters most. Or scroll the journey, if you have a minute. 😊
In a rush? Use the navigation below 👇 and skip to what matters most. Or scroll the journey, if you have a minute. 😊
Client: School for Engineering of Matter, Transport and Energy, Arizona State University
Role: Communications Assistant, Ira A Fulton Schools of Engineering, ASU
Timeline: 16 weeks
Methods: User Research, User Interviews, Content Audit, Information Architecture, Usability Testing
Tools: Google Forms, Figma, WAVE Web Accessibility Evaluation Tool
Client: School for Engineering of Matter, Transport and Energy, Arizona State University
Role: Communications Assistant, Ira A Fulton Schools of Engineering, ASU
Tools: Google Forms, Figma, WAVE Web Accessibility Evaluation Tool
Timeline: 4 months
Project Overview
The SEMTE Graduate Resources website serves as a central hub for graduate students and advisors across multiple engineering programs, providing essential information on academic policies, advising processes, and student opportunities.
As the platform expanded over time, its structure became increasingly complex. Content grew, navigation pathways multiplied, and information hierarchy blurred, making it harder for users to efficiently locate critical resources.
This project focused on rethinking the website’s underlying structure through a research-driven redesign. By clarifying information architecture and simplifying navigation systems, the goal was to create a more intuitive and scalable digital experience.
Project Overview
The SEMTE Graduate Resources website serves as a central hub for graduate students and advisors across multiple engineering programs, providing essential information on academic policies, advising processes, and student opportunities.
As the platform expanded over time, its structure became increasingly complex. Content grew, navigation pathways multiplied, and information hierarchy blurred, making it harder for users to efficiently locate critical resources.
This project focused on rethinking the website’s underlying structure through a research-driven redesign. By clarifying information architecture and simplifying navigation systems, the goal was to create a more intuitive and scalable digital experience.
Project Overview
The SEMTE Graduate Resources website serves as a central hub for graduate students and advisors across multiple engineering programs, providing essential information on academic policies, advising processes, and student opportunities.
As the platform expanded over time, its structure became increasingly complex. Content grew, navigation pathways multiplied, and information hierarchy blurred, making it harder for users to efficiently locate critical resources.
This project focused on rethinking the website’s underlying structure through a research-driven redesign. By clarifying information architecture and simplifying navigation systems, the goal was to create a more intuitive and scalable digital experience.
🙁 Before
Fragmented content structure
Redundant and unclear navigation labels
Inconsistent grouping of academic information
Users relying on external links or advisors for clarity
🙁 Before
Fragmented content structure
Redundant and unclear navigation labels
Inconsistent grouping of academic information
Users relying on external links or advisors for clarity
🙁 Before
Fragmented content structure
Redundant and unclear navigation labels
Inconsistent grouping of academic information
Users relying on external links or advisors for clarity
😀 After
Structured, program-based content hierarchy
Simplified information grouping and consistent navigation model
Improved accessibility and readability
Scalable framework for long-term updates
😀 After
Structured, program-based content hierarchy
Simplified information grouping and consistent navigation model
Improved accessibility and readability
Scalable framework for long-term updates
😀 After
Structured, program-based content hierarchy
Simplified information grouping and consistent navigation model
Improved accessibility and readability
Scalable framework for long-term updates
My Role
As a Communications Assistant at the Ira A. Fulton Schools of Engineering, I independently led the UX research and redesign of the SEMTE Graduate Resources website.
With guidance from my manager and professor, I managed the end-to-end process, including:
Heuristic evaluations
User research and insight synthesis
Information architecture restructuring
Navigation system redesign
High-fidelity prototyping
This project demonstrates my ability to:
Lead research independently
Translate complexity into structured systems
Design scalable solutions within institutional constraints
Apply product design thinking to academic platforms
My Role
As a Communications Assistant at the Ira A. Fulton Schools of Engineering, I independently led the UX research and redesign of the SEMTE Graduate Resources website.
With guidance from my manager and professor, I managed the end-to-end process, including:
Heuristic evaluations
User research and insight synthesis
Information architecture restructuring
Navigation system redesign
High-fidelity prototyping
This project demonstrates my ability to:
Lead research independently
Translate complexity into structured systems
Design scalable solutions within institutional constraints
Apply product design thinking to academic platforms
My Role
As a Communications Assistant at the Ira A. Fulton Schools of Engineering, I independently led the UX research and redesign of the SEMTE Graduate Resources website.
With guidance from my manager and professor, I managed the end-to-end process, including:
Heuristic evaluations
User research and insight synthesis
Information architecture restructuring
Navigation system redesign
High-fidelity prototyping
This project demonstrates my ability to:
Lead research independently
Translate complexity into structured systems
Design scalable solutions within institutional constraints
Apply product design thinking to academic platforms
Context
Context
Problem Statement
The SEMTE Graduate Resources website lacked a cohesive information architecture and intuitive navigation system. Critical academic resources were buried within inconsistent layouts, redundant links, and fragmented categories, making discovery difficult for both students and advisors.
Problem Statement
The SEMTE Graduate Resources website lacked a cohesive information architecture and intuitive navigation system. Critical academic resources were buried within inconsistent layouts, redundant links, and fragmented categories, making discovery difficult for both students and advisors.
Problem Statement
The SEMTE Graduate Resources website lacked a cohesive information architecture and intuitive navigation system. Critical academic resources were buried within inconsistent layouts, redundant links, and fragmented categories, making discovery difficult for both students and advisors.
Business Challenges
Increased dependency on staff support, reducing administrative efficiency
Inconsistent content updates due to lack of a scalable design system
Absence of unified design standards, weakening brand credibility within the Fulton Schools ecosystem
Business Challenges
Increased dependency on staff support, reducing administrative efficiency
Inconsistent content updates due to lack of a scalable design system
Absence of unified design standards, weakening brand credibility within the Fulton Schools ecosystem
Business Challenges
Increased dependency on staff support, reducing administrative efficiency
Inconsistent content updates due to lack of a scalable design system
Absence of unified design standards, weakening brand credibility within the Fulton Schools ecosystem
User Friction
Navigation Challenges
Difficulty locating advising forms, program requirements, and funding resources
Unclear labeling and redundant pathways
Cognitive Overload
Long, text-heavy pages
No clear visual hierarchy for scanning
Fragmented Experience
Graduate life information scattered across multiple pages
Limited cross-linking between related content
Accessibility Gaps
Not optimized for mobile users
Limited support for screen readers
User Friction
Navigation Challenges
Difficulty locating advising forms, program requirements, and funding resources
Unclear labeling and redundant pathways
Cognitive Overload
Long, text-heavy pages
No clear visual hierarchy for scanning
Fragmented Experience
Graduate life information scattered across multiple pages
Limited cross-linking between related content
Accessibility Gaps
Not optimized for mobile users
Limited support for screen readers
User Friction
Navigation Challenges
Difficulty locating advising forms, program requirements, and funding resources
Unclear labeling and redundant pathways
Cognitive Overload
Long, text-heavy pages
No clear visual hierarchy for scanning
Fragmented Experience
Graduate life information scattered across multiple pages
Limited cross-linking between related content
Accessibility Gaps
Not optimized for mobile users
Limited support for screen readers
Design Goals
The redesign aimed to:
Create a centralized, easy-to-navigate hub for graduate students.
Simplify content structure and enhance information discoverability.
Establish a consistent visual language aligned with ASU brand standards.
Improve accessibility and readability across devices.
Reduce student dependence on administrative staff for basic information.
Design Goals
The redesign aimed to:
Create a centralized, easy-to-navigate hub for graduate students.
Simplify content structure and enhance information discoverability.
Establish a consistent visual language aligned with ASU brand standards.
Improve accessibility and readability across devices.
Reduce student dependence on administrative staff for basic information.
Design Goals
The redesign aimed to:
Create a centralized, easy-to-navigate hub for graduate students.
Simplify content structure and enhance information discoverability.
Establish a consistent visual language aligned with ASU brand standards.
Improve accessibility and readability across devices.
Reduce student dependence on administrative staff for basic information.
Initial Website
Initial Website
User Research
User Research
Research Strategy
To design a user-centered solution, I conducted structured research to understand:
How graduate students navigated the existing site
Where friction occurred
What prevented efficient task completion
How the platform could better support academic decision-making
The research included:
Heuristic Evaluation • Google Survey • User Interviews • Accessibility Audit
Each method uncovered different layers of usability and structural issues.
Research Strategy
To design a user-centered solution, I conducted structured research to understand:
How graduate students navigated the existing site
Where friction occurred
What prevented efficient task completion
How the platform could better support academic decision-making
The research included:
Heuristic Evaluation • Google Survey • User Interviews • Accessibility Audit
Each method uncovered different layers of usability and structural issues.
Heuristic Evaluation
(Nielsen’s 10 Usability Heuristics)
Inconsistent Navigation
Violated recognition and consistency standards
Navigation patterns changed across pages
Cognitive Overload
Dense content blocks with minimal visual hierarchy
Poor System Feedback
No confirmation messaging for actions like form submissions
Lack of Error Prevention
Limited guidance or recovery pathways
Heuristic Evaluation
(Nielsen’s 10 Usability Heuristics)
Inconsistent Navigation
Violated recognition and consistency standards
Navigation patterns changed across pages
Cognitive Overload
Dense content blocks with minimal visual hierarchy
Poor System Feedback
No confirmation messaging for actions like form submissions
Lack of Error Prevention
Limited guidance or recovery pathways
Heuristic Evaluation
(Nielsen’s 10 Usability Heuristics)
Inconsistent Navigation
Violated recognition and consistency standards
Navigation patterns changed across pages
Cognitive Overload
Dense content blocks with minimal visual hierarchy
Poor System Feedback
No confirmation messaging for actions like form submissions
Lack of Error Prevention
Limited guidance or recovery pathways
Accessibility Audit
(WCAG 2.1 Audit using WAVE)
Missing Alt Text
Linked images lacked descriptive alternatives
Low Color Contrast
Reduced readability, especially for visually impaired users
Improper Heading Structure
Screen readers struggled to interpret content hierarchy
Redundant Links & Titles
Increased cognitive friction and confusion
Accessibility Audit
(WCAG 2.1 Audit using WAVE)
Missing Alt Text
Linked images lacked descriptive alternatives
Low Color Contrast
Reduced readability, especially for visually impaired users
Improper Heading Structure
Screen readers struggled to interpret content hierarchy
Redundant Links & Titles
Increased cognitive friction and confusion
Accessibility Audit
(WCAG 2.1 Audit using WAVE)
Missing Alt Text
Linked images lacked descriptive alternatives
Low Color Contrast
Reduced readability, especially for visually impaired users
Improper Heading Structure
Screen readers struggled to interpret content hierarchy
Redundant Links & Titles
Increased cognitive friction and confusion
How This Informed Design
The findings directly influenced:
Improved color contrast ratios
Clear heading hierarchies
Descriptive alt text implementation
Simplified and consistent navigation systems
This ensured the redesign prioritized equity, clarity, and usability at scale.
How This Informed Design
The findings directly influenced:
Improved color contrast ratios
Clear heading hierarchies
Descriptive alt text implementation
Simplified and consistent navigation systems
This ensured the redesign prioritized equity, clarity, and usability at scale.
Heuristic Evaluation
Heuristic Evaluation
Accessibility Evaluation
Accessibility Evaluation
User Research
User Research
Research Synthesis
To develop a well-rounded understanding of user behavior, I used a combination of quantitative and qualitative research methods. While the survey provided measurable patterns at scale, user interviews offered deeper insight into motivations, frustrations, and mental models. Together, these methods ensured that design decisions were grounded in both data and lived user experience.
Research Synthesis
To develop a well-rounded understanding of user behavior, I used a combination of quantitative and qualitative research methods. While the survey provided measurable patterns at scale, user interviews offered deeper insight into motivations, frustrations, and mental models. Together, these methods ensured that design decisions were grounded in both data and lived user experience.
Research Synthesis
To develop a well-rounded understanding of user behavior, I used a combination of quantitative and qualitative research methods. While the survey provided measurable patterns at scale, user interviews offered deeper insight into motivations, frustrations, and mental models. Together, these methods ensured that design decisions were grounded in both data and lived user experience.
Quantitative Method
Google Survey
To understand usage patterns at scale, I distributed a survey across graduate students from multiple SEMTE programs.
The goal was to uncover:
Frequency of website usage
Most sought-after resources
Key navigation pain points
Quantitative Method
Google Survey
To understand usage patterns at scale, I distributed a survey across graduate students from multiple SEMTE programs.
The goal was to uncover:
Frequency of website usage
Most sought-after resources
Key navigation pain points
Quantitative Method
Google Survey
To understand usage patterns at scale, I distributed a survey across graduate students from multiple SEMTE programs.
The goal was to uncover:
Frequency of website usage
Most sought-after resources
Key navigation pain points
Qualitative Method
User Interview
To deepen the findings, I conducted in-depth interviews with graduate students across different programs.
Each session explored:
Information-seeking behaviors
Navigation expectations
Mental models of how academic resources should be structured
Qualitative Method
User Interview
To deepen the findings, I conducted in-depth interviews with graduate students across different programs.
Each session explored:
Information-seeking behaviors
Navigation expectations
Mental models of how academic resources should be structured
Qualitative Method
User Interview
To deepen the findings, I conducted in-depth interviews with graduate students across different programs.
Each session explored:
Information-seeking behaviors
Navigation expectations
Mental models of how academic resources should be structured
Quantitative Insights
85% of respondents found it “somewhat difficult” or “very difficult” to locate key academic resources.
Most Accessed Sections
Advising
Degree Requirements
Funding Opportunities
Content Preference
Students favored concise, well-structured content
Clear visual hierarchy over long text-heavy pages
Quantitative Insights
85% of respondents found it “somewhat difficult” or “very difficult” to locate key academic resources.
Most Accessed Sections
Advising
Degree Requirements
Funding Opportunities
Content Preference
Students favored concise, well-structured content
Clear visual hierarchy over long text-heavy pages
Quantitative Insights
85% of respondents found it “somewhat difficult” or “very difficult” to locate key academic resources.
Most Accessed Sections
Advising
Degree Requirements
Funding Opportunities
Content Preference
Students favored concise, well-structured content
Clear visual hierarchy over long text-heavy pages
Qualitative Insights
Low Structural Trust
Students relied on Google search instead of navigating the site directly
Hidden Resources
Many were unaware of available student organizations and research support
Desire for Centralization
Participants wanted a dashboard-like experience with aggregated key links
Qualitative Insights
Low Structural Trust
Students relied on Google search instead of navigating the site directly
Hidden Resources
Many were unaware of available student organizations and research support
Desire for Centralization
Participants wanted a dashboard-like experience with aggregated key links
Qualitative Insights
Low Structural Trust
Students relied on Google search instead of navigating the site directly
Hidden Resources
Many were unaware of available student organizations and research support
Desire for Centralization
Participants wanted a dashboard-like experience with aggregated key links
Design Implications
These insights directly informed:
Persona development
Journey mapping
Centralized navigation restructuring
Exploration of dashboard-style information grouping
Design Implications
These insights directly informed:
Persona development
Journey mapping
Centralized navigation restructuring
Exploration of dashboard-style information grouping
Design Implications
These insights directly informed:
Persona development
Journey mapping
Centralized navigation restructuring
Exploration of dashboard-style information grouping
Quantitative Analysis
Quantitative Analysis
User Research
User Research
Persona Creation
Based on the insights gathered from the survey and user interviews, I developed three key personas representing the primary user groups of the SEMTE Graduate Resources website- current graduate students in first year, Current graduate students who are about to graduate and SEMTE Graduate Advisors.
These personas helped humanize the research findings and guided all major design decisions, from information architecture to content hierarchy.
Persona Creation
Based on the insights gathered from the survey and user interviews, I developed three key personas representing the primary user groups of the SEMTE Graduate Resources website- current graduate students in first year, Current graduate students who are about to graduate and SEMTE Graduate Advisors.
These personas helped humanize the research findings and guided all major design decisions, from information architecture to content hierarchy.
User Personas
User Personas
User
Research
User Research
User Research
User Testing (Pre-Design)
Before diving into redesign, I conducted moderated usability testing on the existing SEMTE Graduate Resources website to surface real user pain points. Five participants performed scenario-based tasks while thinking aloud, allowing me to capture friction and mental models in context.
5 Participants • 3 Core Scenarios • Moderated Think-Aloud Testing
Testing Approach
Participants completed three real-world scenarios reflecting core student needs:
User Testing (Pre-Design)
Before diving into redesign, I conducted moderated usability testing on the existing SEMTE Graduate Resources website to surface real user pain points. Five participants performed scenario-based tasks while thinking aloud, allowing me to capture friction and mental models in context.
5 Participants • 3 Core Scenarios • Moderated Think-Aloud Testing
Testing Approach
Participants completed three real-world scenarios reflecting core student needs:
User Testing (Pre-Design)
Before diving into redesign, I conducted moderated usability testing on the existing SEMTE Graduate Resources website to surface real user pain points. Five participants performed scenario-based tasks while thinking aloud, allowing me to capture friction and mental models in context.
5 Participants • 3 Core Scenarios • Moderated Think-Aloud Testing
Testing Approach
Participants completed three real-world scenarios reflecting core student needs:
Scenario 1
🎓 Graduation Planning
Locate faculty advisor selection process
Find program checksheets
Scenario 1
🎓 Graduation Planning
Locate faculty advisor selection process
Find program checksheets
Scenario 1
🎓 Graduation Planning
Locate faculty advisor selection process
Find program checksheets
Scenario 2
🌍 OPT & CPT Information
Identify eligibility requirements
Locate SEMTE policies for work authorization
Scenario 2
🌍 OPT & CPT Information
Identify eligibility requirements
Locate SEMTE policies for work authorization
Scenario 2
🌍 OPT & CPT Information
Identify eligibility requirements
Locate SEMTE policies for work authorization
Scenario 3
📚 Student Resources & Opportunities
Explore technical electives
Find scholarships and fellowship timelines
Scenario 3
📚 Student Resources & Opportunities
Explore technical electives
Find scholarships and fellowship timelines
Scenario 3
📚 Student Resources & Opportunities
Explore technical electives
Find scholarships and fellowship timelines
Key Findings
Navigation Complexity
Essential information required multiple clicks
Unclear labeling slowed task completion
Fragmented Content
Related information was scattered across pages
International students experienced heightened confusion
Low Scannability
Inconsistent link styles
Dense text blocks without visual hierarchy
Key Findings
Navigation Complexity
Essential information required multiple clicks
Unclear labeling slowed task completion
Fragmented Content
Related information was scattered across pages
International students experienced heightened confusion
Low Scannability
Inconsistent link styles
Dense text blocks without visual hierarchy
Key Findings
Navigation Complexity
Essential information required multiple clicks
Unclear labeling slowed task completion
Fragmented Content
Related information was scattered across pages
International students experienced heightened confusion
Low Scannability
Inconsistent link styles
Dense text blocks without visual hierarchy
Design Impact
These usability insights directly shaped:
Information architecture restructuring
Task-based navigation grouping
Improved content hierarchy and scannability
The redesign shifted from a page-based structure to a task-focused, user-centered experience.
Design Impact
These usability insights directly shaped:
Information architecture restructuring
Task-based navigation grouping
Improved content hierarchy and scannability
The redesign shifted from a page-based structure to a task-focused, user-centered experience.
Design Impact
These usability insights directly shaped:
Information architecture restructuring
Task-based navigation grouping
Improved content hierarchy and scannability
The redesign shifted from a page-based structure to a task-focused, user-centered experience.
Design
Process
Design Process
Design Process
Wireframes
To translate the research insights into a clear and structured design direction, I began by developing low- and mid-fidelity wireframes using the ASU Unity Design System — a university-wide framework built to ensure visual consistency, accessibility compliance, and cohesive user experience across all ASU digital platforms.
The focus during this phase was on:
Information hierarchy: Organizing key content areas—advising, funding, graduation, and CPT/OPT—based on frequency of use and user goals identified during research.
Navigation clarity: Simplifying menu structures and adding quick-access links to reduce cognitive load and help users find information efficiently.
Layout consistency: Adopting pre-defined Unity components for typography, spacing, and button styles to align with ASU’s brand and accessibility standards.
Scalability: Structuring layouts that could be easily expanded or modified as new resources are added by the SEMTE team.
These wireframes acted as the foundation for iterative feedback sessions with my manager and peers, ensuring that each design decision supported both user needs and organizational objectives.
Wireframes
To translate the research insights into a clear and structured design direction, I began by developing low- and mid-fidelity wireframes using the ASU Unity Design System — a university-wide framework built to ensure visual consistency, accessibility compliance, and cohesive user experience across all ASU digital platforms.
The focus during this phase was on:
Information hierarchy: Organizing key content areas—advising, funding, graduation, and CPT/OPT—based on frequency of use and user goals identified during research.
Navigation clarity: Simplifying menu structures and adding quick-access links to reduce cognitive load and help users find information efficiently.
Layout consistency: Adopting pre-defined Unity components for typography, spacing, and button styles to align with ASU’s brand and accessibility standards.
Scalability: Structuring layouts that could be easily expanded or modified as new resources are added by the SEMTE team.
These wireframes acted as the foundation for iterative feedback sessions with my manager and peers, ensuring that each design decision supported both user needs and organizational objectives.
Final Design
Final Design
Building on the insights from research, testing, and wireframes, I transitioned into creating high-fidelity designs using the ASU Unity Design System.
My goal was to blend clarity, consistency, and accessibility while ensuring the experience felt intuitive for graduate students with diverse needs.
I refined the visual hierarchy, strengthened navigation pathways, and applied a modular layout structure that keeps information scannable and easy to update.
Each page was designed with purpose, reducing cognitive load, highlighting time-sensitive tasks, and surfacing key academic resources exactly when students need them.
This phase transformed validated wireframes into polished, functional screens that reflect SEMTE’s academic identity while supporting real student workflows.
Building on the insights from research, testing, and wireframes, I transitioned into creating high-fidelity designs using the ASU Unity Design System.
My goal was to blend clarity, consistency, and accessibility while ensuring the experience felt intuitive for graduate students with diverse needs.
I refined the visual hierarchy, strengthened navigation pathways, and applied a modular layout structure that keeps information scannable and easy to update.
Each page was designed with purpose, reducing cognitive load, highlighting time-sensitive tasks, and surfacing key academic resources exactly when students need them.
This phase transformed validated wireframes into polished, functional screens that reflect SEMTE’s academic identity while supporting real student workflows.
Final Design
Final Design
Final Design
Homepage Design
Homepage Design
Homepage Design
The redesigned homepage serves as the central entry point for all SEMTE graduate resources, structured to support fast discovery, clarity, and confidence for new and current students.
Key Highlights of the Homepage Design:
Clear Information Architecture: The homepage organizes content into four primary pathways—Advising, Graduation, Funding, and International Student Support—reflecting the top needs identified during research and usability testing.
Task-Oriented Navigation: Prominent quick links help users immediately access high-demand resources such as forms, checklists, and policy documents without deep navigation.
Structured Program Breakdown: Programs are displayed in an organized grid, allowing users to quickly locate program-specific requirements, faculty advisors, and technical elective lists.
Student-Centered Copy: Content is rewritten to be direct and actionable, reducing ambiguity and helping students understand what to do next.
Overall, the homepage establishes a strong foundation for the site—visually cohesive, logically structured, and designed to guide students to the right information with fewer clicks.
The redesigned homepage serves as the central entry point for all SEMTE graduate resources, structured to support fast discovery, clarity, and confidence for new and current students.
Key Highlights of the Homepage Design:
Clear Information Architecture: The homepage organizes content into four primary pathways, Advising, Graduation, Funding, and International Student Support, reflecting the top needs identified during research and usability testing.
Task-Oriented Navigation: Prominent quick links help users immediately access high-demand resources such as forms, checklists, and policy documents without deep navigation.
Structured Program Breakdown: Programs are displayed in an organized grid, allowing users to quickly locate program-specific requirements, faculty advisors, and technical elective lists.
Student-Centered Copy: Content is rewritten to be direct and actionable, reducing ambiguity and helping students understand what to do next.
Overall, the homepage establishes a strong foundation for the site, visually cohesive, logically structured, and designed to guide students to the right information with fewer clicks.
The redesigned homepage serves as the central entry point for all SEMTE graduate resources, structured to support fast discovery, clarity, and confidence for new and current students.
Key Highlights of the Homepage Design:
Clear Information Architecture: The homepage organizes content into four primary pathways, Advising, Graduation, Funding, and International Student Support, reflecting the top needs identified during research and usability testing.
Task-Oriented Navigation: Prominent quick links help users immediately access high-demand resources such as forms, checklists, and policy documents without deep navigation.
Structured Program Breakdown: Programs are displayed in an organized grid, allowing users to quickly locate program-specific requirements, faculty advisors, and technical elective lists.
Student-Centered Copy: Content is rewritten to be direct and actionable, reducing ambiguity and helping students understand what to do next.
Overall, the homepage establishes a strong foundation for the site, visually cohesive, logically structured, and designed to guide students to the right information with fewer clicks.
Programs Page Design
Programs Page Design
Programs Page Design
The Programs page provides a structured overview of all SEMTE graduate offerings, allowing students to quickly locate their program and access essential resources. Using a clean grid layout, each program card highlights key information at a glance—degree type, specialization, and direct access to program-specific guides. This page reduces search time and supports students who prefer scanning before committing to deeper navigation.
Each individual program page provides a clear, structured view of all essential academic information, tailored to help students quickly find exactly what they need. Every page includes a brief introduction outlining the program’s purpose, structure, and key expectations, advising information, course requirements, program chair details and
important deadlines (alert boxes).
Consistent layouts across programs help students navigate with confidence, reducing cognitive load and making academic planning simpler and more intuitive.
The Programs page provides a structured overview of all SEMTE graduate offerings, allowing students to quickly locate their program and access essential resources. Using a clean grid layout, each program card highlights key information at a glance—degree type, specialization, and direct access to program-specific guides. This page reduces search time and supports students who prefer scanning before committing to deeper navigation.
Each individual program page provides a clear, structured view of all essential academic information, tailored to help students quickly find exactly what they need. Every page includes a brief introduction outlining the program’s purpose, structure, and key expectations, advising information, course requirements, program chair details and
important deadlines (alert boxes).
Consistent layouts across programs help students navigate with confidence, reducing cognitive load and making academic planning simpler and more intuitive.
The Programs page provides a structured overview of all SEMTE graduate offerings, allowing students to quickly locate their program and access essential resources. Using a clean grid layout, each program card highlights key information at a glance—degree type, specialization, and direct access to program-specific guides. This page reduces search time and supports students who prefer scanning before committing to deeper navigation.
Each individual program page provides a clear, structured view of all essential academic information, tailored to help students quickly find exactly what they need. Every page includes a brief introduction outlining the program’s purpose, structure, and key expectations, advising information, course requirements, program chair details and
important deadlines (alert boxes).
Consistent layouts across programs help students navigate with confidence, reducing cognitive load and making academic planning simpler and more intuitive.
Culminating Events Page Design
Culminating Events Page Design
Culminating Events Page Design
The Portfolio, Thesis, and Applied Project pages break down each culminating option into simple, easy-to-follow steps. Each page includes:
Clear Process Overview: A quick explanation of what the culminating experience involves and who it’s for.
Step-by-Step Requirements: Structured guidance on proposal guidelines, submission steps, and evaluation expectations.
Faculty & Advising Support: Direct links to advisors, committee requirements, and approval workflows.
Important Deadlines: Alert boxes highlight key dates so students can stay on track throughout the process.
These pages remove confusion around graduation pathways and help students confidently choose and complete the option that best aligns with their academic goals.
The Portfolio, Thesis, and Applied Project pages break down each culminating option into simple, easy-to-follow steps. Each page includes:
Clear Process Overview: A quick explanation of what the culminating experience involves and who it’s for.
Step-by-Step Requirements: Structured guidance on proposal guidelines, submission steps, and evaluation expectations.
Faculty & Advising Support: Direct links to advisors, committee requirements, and approval workflows.
Important Deadlines: Alert boxes highlight key dates so students can stay on track throughout the process.
These pages remove confusion around graduation pathways and help students confidently choose and complete the option that best aligns with their academic goals.
Other Pages Design
Other Pages Design
Other Pages Design
Student Resources Page
This page consolidates all essential academic and support resources into one intuitive space. Students can easily access tutoring, writing support, lab information, policies, and links to university-wide services. Organized sections and clear labeling help users quickly find the tools they need to succeed throughout their program.
CPT & OPT Information Page
The CPT/OPT page simplifies complex immigration and employment information for international students. It provides clear explanations of eligibility, required steps, SEMTE-specific guidelines, and links to official ISSC resources. The structured layout reduces cognitive load and ensures students feel confident navigating work authorization processes.
Student Resources Page
This page consolidates all essential academic and support resources into one intuitive space. Students can easily access tutoring, writing support, lab information, policies, and links to university-wide services. Organized sections and clear labeling help users quickly find the tools they need to succeed throughout their program.
CPT & OPT Information Page
The CPT/OPT page simplifies complex immigration and employment information for international students. It provides clear explanations of eligibility, required steps, SEMTE-specific guidelines, and links to official ISSC resources. The structured layout reduces cognitive load and ensures students feel confident navigating work authorization processes.
Quick Links Page
Designed for fast access, the Quick Links page gathers the most frequently used SEMTE resources, forms, program documents, electives lists, policies, and student services, into a clean, scannable format. It eliminates unnecessary searching and supports students who regularly return for specific information.
Advisors Page
This page helps students identify the right academic advisor or program chair with ease. It includes advisor names, roles, contact details, and relevant responsibilities. A structured layout ensures students can quickly locate guidance based on their program and connect with the right support at the right time.
Quick Links Page
Designed for fast access, the Quick Links page gathers the most frequently used SEMTE resources, forms, program documents, electives lists, policies, and student services, into a clean, scannable format. It eliminates unnecessary searching and supports students who regularly return for specific information.
Advisors Page
This page helps students identify the right academic advisor or program chair with ease. It includes advisor names, roles, contact details, and relevant responsibilities. A structured layout ensures students can quickly locate guidance based on their program and connect with the right support at the right time.
Impact
Impact
The redesigned SEMTE Graduate Resources platform has the potential to significantly improve how students navigate critical academic information. By restructuring content, clarifying pathways, and strengthening visual hierarchy, the new design reduces the time and cognitive effort required to find program details, policies, and graduation requirements.
Improved findability of key information such as program requirements, CPT/OPT policies, and graduation steps.
Reduced cognitive load through clearer content structure, consistent layouts, and simplified navigation.
Created a more accessible and supportive experience for international students.
Strengthened visual hierarchy and alignment with ASU’s Unity Design System for a cohesive experience.
Enabled smoother academic planning by organizing content in a predictable, student-friendly format.
The redesigned SEMTE Graduate Resources platform has the potential to significantly improve how students navigate critical academic information. By restructuring content, clarifying pathways, and strengthening visual hierarchy, the new design reduces the time and cognitive effort required to find program details, policies, and graduation requirements.
Improved findability of key information such as program requirements, CPT/OPT policies, and graduation steps.
Reduced cognitive load through clearer content structure, consistent layouts, and simplified navigation.
Created a more accessible and supportive experience for international students.
Strengthened visual hierarchy and alignment with ASU’s Unity Design System for a cohesive experience.
Enabled smoother academic planning by organizing content in a predictable, student-friendly format.
Key Learnings
Key Learnings
Working on this project taught me how deeply clarity, or the lack of it, impacts a student’s ability to make important academic decisions. Through user interviews and testing, I began to see patterns in how overwhelmed students often feel when navigating policies, deadlines, and forms scattered across pages.
Personally, I learned how to balance university branding constraints with user-centered design decisions, and how to translate complex academic structures into simple pathways. I also refined my ability to synthesize large amounts of information and create systems that feel structured, predictable, and reassuring.
Because this was a solo project, I strengthened my end-to-end UX process, from research to testing to high-fidelity design, while regularly seeking feedback from my manager and professor. This helped me grow not only as a designer but also as a decision-maker.
Working on this project taught me how deeply clarity, or the lack of it, impacts a student’s ability to make important academic decisions. Through user interviews and testing, I began to see patterns in how overwhelmed students often feel when navigating policies, deadlines, and forms scattered across pages.
Personally, I learned how to balance university branding constraints with user-centered design decisions, and how to translate complex academic structures into simple pathways. I also refined my ability to synthesize large amounts of information and create systems that feel structured, predictable, and reassuring.
Because this was a solo project, I strengthened my end-to-end UX process, from research to testing to high-fidelity design, while regularly seeking feedback from my manager and professor. This helped me grow not only as a designer but also as a decision-maker.
Going
Forward
Going Forward
Moving forward, the next steps would focus on refining and validating the design through:
Usability testing on the high-fidelity prototype to confirm improvements in navigation, clarity, and findability.
Content collaboration with SEMTE staff, ensuring program pages remain accurate, consistent, and easy to maintain.
Enhancing personalization, such as adding role-based quick access sections (e.g., international students, graduating students, new admits).
Iterating on accessibility, including improved alt text coverage, heading structure, and contrast refinements.
Preparing a CMS-ready component library, enabling SEMTE administrators to update content quickly without breaking the structure.
The long-term goal is to create a reliable, intuitive resource that students can trust throughout their academic journey and one that can evolve with SEMTE’s programs and policies.
Moving forward, the next steps would focus on refining and validating the design through:
Usability testing on the high-fidelity prototype to confirm improvements in navigation, clarity, and findability.
Content collaboration with SEMTE staff, ensuring program pages remain accurate, consistent, and easy to maintain.
Enhancing personalization, such as adding role-based quick access sections (e.g., international students, graduating students, new admits).
Iterating on accessibility, including improved alt text coverage, heading structure, and contrast refinements.
Preparing a CMS-ready component library, enabling SEMTE administrators to update content quickly without breaking the structure.
The long-term goal is to create a reliable, intuitive resource that students can trust throughout their academic journey and one that can evolve with SEMTE’s programs and policies.
