Purdue ISS


Purdue ISS


Purdue ISS


Purdue ISS

This case study explores the design process of a web toolkit for Purdue University's International Students and Services (ISS) department. The goal was to create a user-friendly and informative resource to guide F-1 visa students through the Curricular Practical Training (CPT) authorization process.

This case study explores the design process of a web toolkit for Purdue University's International Students and Services (ISS) department. The goal was to create a user-friendly and informative resource to guide F-1 visa students through the Curricular Practical Training (CPT) authorization process.

This case study explores the design process of a web toolkit for Purdue University's International Students and Services (ISS) department. The goal was to create a user-friendly and informative resource to guide F-1 visa students through the Curricular Practical Training (CPT) authorization process.

Roles and Responsibility

I led the second co-design workshop honing my analytical and research skills. I spearheaded initial research, including heuristic evaluation and competitive analysis, and collaborated on design sketches and affinity diagramming. I contributed to the mid and high-fidelity prototypes and participated in design testing.

Project Context


Fall 2023

Team: Tanvi Chand, Kassandra Lopez Carrillo, Elsa Jerry, Sungin Ha, Ann Kurian, Syphax Raab

Glossory

  • CPT (Curricular Practical Training): Internship or practical experience program for F-1 visa students, offered through their university.

  • F-1 visa: Allows foreigners to study in the US.

  • I-20: Document issued by a US university verifying an F-1 student's enrollment.

Roles and Responsibility

I led the second co-design workshop honing my analytical and research skills. I spearheaded initial research, including heuristic evaluation and competitive analysis, and collaborated on design sketches and affinity diagramming. I contributed to the mid and high-fidelity prototypes and participated in design testing.

Project Context


Fall 2023

Team: Tanvi Chand, Kassandra
Lopez Carrillo, Elsa Jerry,
Sungin Ha, Ann Kurian,
Syphax Raab

Glossory

  • CPT (Curricular Practical Training): Internship or practical experience program for F-1 visa students, offered through their university.

  • F-1 visa: Allows foreigners to study in the US.

  • I-20: Document issued by a US university verifying an F-1 student's enrollment.

Project Context

Fall 2023

Team: Me, Kassandra
Lopez Carrillo, Elsa Jerry,
Sungin Ha, Ann Kurian,
Syphax Raab

Roles and Responsibility

I led the second co-design workshop honing my analytical and research skills. I spearheaded initial research, including heuristic evaluation and competitive analysis, and collaborated on design sketches and affinity diagramming. I contributed to the mid and high-fidelity prototypes and participated in design testing.

Glossory

  • CPT (Curricular Practical Training): Internship or practical experience program for F-1 visa students, offered through their university.

  • F-1 visa: Allows foreigners to study in the US.

  • I-20: Document issued by a US university verifying an F-1 student's enrollment.

Context

Context

Context

Context

Approach

Approach

Approach

Approach

Solution

Solution

Solution

Solution

Learning

Learning

Learning

Learning

Context

Context

Context


Context

International students on F-1 visas need guidance navigating the Curricular Practical Training (CPT) authorization process. The current process can be confusing, with unclear information. The existing Purdue ISS webpage is not user-friendly and lacks features to guide students effectively through the process. This project aims to address these issues by creating a user-friendly web toolkit that simplifies the CPT process for international students.


International students on F-1 visas need guidance navigating the Curricular Practical Training (CPT) authorization process. The current process can be confusing, with unclear information. The existing Purdue ISS webpage is not user-friendly and lacks features to guide students effectively through the process. This project aims to address these issues by creating a user-friendly web toolkit that simplifies the CPT process for international students.


International students on F-1 visas need guidance navigating the Curricular Practical Training (CPT) authorization process. The current process can be confusing, with unclear information. The existing Purdue ISS webpage is not user-friendly and lacks features to guide students effectively through the process. This project aims to address these issues by creating a user-friendly web toolkit that simplifies the CPT process for international students.



Solution


Solution


Solution


Solution

Created a step-by-step walkthrough with a progress tracker to simplify the CPT authorization process for international students.

Created a step-by-step walkthrough with a progress tracker to simplify the CPT authorization process for international students.

Designed clear explanations of violations and key term definitions to enhance user understanding and reduce confusion.

Designed clear explanations of violations and key term definitions to enhance user understanding and reduce confusion.

Developed a user-friendly interface that aligns with Purdue's branding to ensure a seamless and visually appealing experience.

Developed a user-friendly interface that aligns with Purdue's branding to ensure a seamless and visually appealing experience.


User Group

The target user group for this project was F-1 visa international students at Purdue University, encompassing both undergraduate and graduate students. This group may or may not have prior experience with the CPT authorization process, so the design needed to be clear, user-friendly, and cater to a range of knowledge levels.

The target user group for this project was F-1 visa international students at Purdue University, encompassing both undergraduate and graduate students. This group may or may not have prior experience with the CPT authorization process, so the design needed to be clear, user-friendly, and cater to a range of knowledge levels.



Meet Alejandro




Unfortunately Alejandro…




approach


Approach


Current State


Current State



How might we gain an understanding of our user’s needs?



How might we gain an understanding of our user’s needs?


Our goal is to build an understanding of the process to gain documentation to be authorized for CPT and how to maintain that status.



Our goal is to build an understanding of the process to gain documentation to be authorized for CPT and how to maintain that status.



Our goal is to build an understanding of the process to gain documentation to be authorized for CPT and how to maintain that status.


Interview

Interview

Interview

Interview

Heuristic Evaluation

Heuristic Evaluation

Heuristic Evaluation

Heuristic Evaluation

Competive Analysis

Competive Analysis

Competive Analysis

Competive Analysis

Co - Designs

Co - Designs

Co - Designs

Co - Designs


How might we solve the problems we’ve discovered from communicating with our stakeholders?


How might we solve the problems we’ve discovered from communicating with our stakeholders?


Our goal of milestone was to sketching and ideating based on the research findings


Our goal of milestone was to sketching and ideating based on the research findings


Our goal of milestone was to sketching and ideating based on the research findings


Based on our research findings, we started sketching potential solutions for a user-friendly CPT resource. This process involved iteratively designing and refining our sketches based on feedback received. Our main focus was to create a solution that addresses the identified issues within the CPT process. The sketch on the left illustrates an option for a timeline.


Sketch Made By Me


Sketching



Sketching



Sketching



Sketching



Following the sketching phase, we created wireframes to serve as a foundation for building our prototypes.The wireframe presented here showcases the initial layout for the violation page. The purpose of this page is to provide users with a clear understanding of the specific violations they need to be mindful of and take necessary precautions against. The wireframe highlights these violations in a visually appealing and easy-to-understand format, ensuring that users are informed and empowered to take appropriate action


Wireframe Made By Me


Based on our research findings, we started sketching potential solutions for a user-friendly CPT resource. This process involved iteratively designing and refining our sketches based on feedback received. Our main focus was to create a solution that addresses the identified issues within the CPT process. The sketch on the left illustrates an option for a timeline.

Sketch Made By Me


Wireframe



Based on our research findings, we started sketching potential solutions for a user-friendly CPT resource. This process involved iteratively designing and refining our sketches based on feedback received. Our main focus was to create a solution that addresses the identified issues within the CPT process. The sketch on the left illustrates an option for a timeline.

Sketch Made By Me


Following the sketching phase, we created wireframes to serve as a foundation for building our prototypes.The wireframe presented here showcases the initial layout for the violation page. The purpose of this page is to provide users with a clear understanding of the specific violations they need to be mindful of and take necessary precautions against. The wireframe highlights these violations in a visually appealing and easy-to-understand format, ensuring that users are informed and empowered to take appropriate action


Sketch Made By Me

Sketch Made By Me

Based on our research findings, we started sketching potential solutions for a user-friendly CPT resource. This process involved iteratively designing and refining our sketches based on feedback received. Our main focus was to create a solution that addresses the identified issues within the CPT process. The sketch on the left illustrates an option for a timeline.

Sketch Made By Me

Based on our research findings, we started sketching potential solutions for a user-friendly CPT resource. This process involved iteratively designing and refining our sketches based on feedback received. Our main focus was to create a solution that addresses the identified issues within the CPT process. The sketch on the left illustrates an option for a timeline.


To see more sketches, please refer to the documentation below



  • Landing Page

    The user can view process by clicking on Explore Process and Contact by clicking on contact


  • Offer Letter Page

    The user can check offer letter requirements, and CPT process steps, and view a sample offer letter all in one place.


  • Receive Departmental Recommendations

    The user can access information for the discussion with the academic advisor to understand the CPT course related to the major/field.


  •  Complete the E-Forms (Part-1)

    The users would be able to find the information related to how to complete the e-forms


  • Register for CPT class

    The users would be able to find the information related to how to register for the CPT-affiliated class through the Scheduling Assistant




  • Complete e-forms (part 2)

    The users would be able to find the information related to how to complete the e-forms


  • Receive I-20

    The users would receive their I20 with the CPT authorization 


  • Violations (Closed State)

    The users would be able to view the violations accordingly based on their situation


  • Violations (Open State)

    The users would be able to view the violations accordingly based on their situation


Wireframe



Following the sketching phase, we created wireframes to serve as a foundation for building our prototypes.The wireframe presented here showcases the initial layout for the violation page. The purpose of this page is to provide users with a clear understanding of the specific violations they need to be mindful of and take necessary precautions against. The wireframe highlights these violations in a visually appealing and easy-to-understand format, ensuring that users are informed and empowered to take appropriate action


Sketch Made By Me


Wireframe


Wireframe Made By Me

Following the sketching phase, we created wireframes to serve as a foundation for building our prototypes.The wireframe presented here showcases the initial layout for the violation page. The purpose of this page is to provide users with a clear understanding of the specific violations they need to be mindful of and take necessary precautions against. The wireframe highlights these violations in a visually appealing and easy-to-understand format, ensuring that users are informed and empowered to take appropriate action



To see more sketches, please refer to the documentation below



To see more wireframes, please refer to the documentation below



To see more Wireframes, please refer to the documentation below



To see more wireframe, please refer to the documentation below




How might we design given the insights and constraints we have collected?



How might we design given the insights and constraints we have collected?


Our goal is to develop high-fidelity prototypes of the CPT walkthrough, by incorporating the feedback we have received to inform the design decisions. 


Our goal is to develop high-fidelity prototypes of the CPT walkthrough, by incorporating the feedback we have received to inform the design decisions. 


Our goal is to develop high-fidelity prototypes of the CPT walkthrough, by incorporating the feedback we have received to inform the design decisions. 


Mid-fis


Mid-fis


Mid-fis


Mid-fis


  • Landing Page

    The user can view process by clicking on Explore Process and Contact by clicking on contact


  • Offer Letter Page

    The user can check offer letter requirements, and CPT process steps, and view a sample offer letter all in one place.


  • Receive Departmental Recommendations

    The user can access information for the discussion with the academic advisor to understand the CPT course related to the major/field.


  •  Complete the E-Forms (Part-1)

    The users would be able to find the information related to how to complete the e-forms


  • Register for CPT class

    The users would be able to find the information related to how to register for the CPT-affiliated class through the Scheduling Assistant




  • Complete e-forms (part 2)

    The users would be able to find the information related to how to complete the e-forms


  • Receive I-20

    The users would receive their I20 with the CPT authorization 


  • Violations (Closed State)

    The users would be able to view the violations accordingly based on their situation





  • Violations (Open State)

    The users would be able to view the violations accordingly based on their situation





User Testing

  • User testing revealed inconsistencies in the CPT process flow across screens.

  • The wording needed correction throughout the website.

  • Users requested steps for addressing violations.

  • Feedback indicated a need for a more Purdue-consistent design aesthetic.


User Testing

  • User testing revealed inconsistencies in the CPT process flow across screens.

  • The wording needed correction throughout the website.

  • Users requested steps for addressing violations.

  • Feedback indicated a need for a more Purdue-consistent design aesthetic.



User Testing

  • User testing revealed inconsistencies in the CPT process flow across screens.

  • The wording needed correction throughout the website.

  • Users requested steps for addressing violations.

  • Feedback indicated a need for a more Purdue-consistent design aesthetic.


User Testing

  • User testing revealed inconsistencies in the CPT process flow across screens.

  • The wording needed correction throughout the website.

  • Users requested steps for addressing violations.

  • Feedback indicated a need for a more Purdue-consistent design aesthetic.


Hi-Fis

After the user testing, we made some changes that reflected our High-fidelity designs. Some of them include:

  • Changing the timeline to accommodate other Purdue websites following the Purdue branding guidelines 

  • Followed consistency across all our screens

  • Updated some of the visuals and making it more uniform




Hi-Fis

After the user testing, we made some changes that reflected our High-fidelity designs. Some of them include:

  • Changing the timeline to accommodate other Purdue websites following the Purdue branding guidelines 

  • Followed consistency across all our screens

  • Updated some of the visuals and making it more uniform




Hi-Fis

After the user testing, we made some changes that reflected our High-fidelity designs. Some of them include:

  • Changing the timeline to accommodate other Purdue websites following the Purdue branding guidelines 

  • Followed consistency across all our screens

  • Updated some of the visuals and making it more uniform




Hi-Fis

After the user testing, we made some changes that reflected our High-fidelity designs. Some of them include:

  • Changing the timeline to accommodate other Purdue websites following the Purdue branding guidelines 

  • Followed consistency across all our screens

  • Updated some of the visuals and making it more uniform



  • The Landing screen includes a link to the Purdue ISS site for more information.

  • The navigation bar had been modified to match those that are consistent across Purdue’s sites


  • The Violation section had been updated to separate steps in description through numbers

  • The Landing screen includes a link to the Purdue ISS site for more information.

  • The navigation bar had been modified to match those that are consistent across Purdue’s sites


  • The Violation section had been updated to separate steps in description through numbers



Finally Alejandro is …




Reflection

This CPT web toolkit project was a valuable learning experience. Through interviews and workshops, I gained a deeper understanding of the challenges faced by international students navigating the CPT process. It was eye-opening to see how seemingly minor website issues like unclear language or navigation could create significant roadblocks.

The co-design workshops were particularly rewarding. Hearing directly from students and collaborating on solutions fostered a sense of empathy and the importance of user-centered design. It was exciting to see our initial sketches evolve into a user-friendly prototype that addressed user pain points.

this project solidified my passion for UX design. It demonstrated the power of research, collaboration, and iteration in creating a user experience that is both functional and impactful.

This CPT web toolkit project was a valuable learning experience. Through interviews and workshops, I gained a deeper understanding of the challenges faced by international students navigating the CPT process. It was eye-opening to see how seemingly minor website issues like unclear language or navigation could create significant roadblocks.

The co-design workshops were particularly rewarding. Hearing directly from students and collaborating on solutions fostered a sense of empathy and the importance of user-centered design. It was exciting to see our initial sketches evolve into a user-friendly prototype that addressed user pain points.

this project solidified my passion for UX design. It demonstrated the power of research, collaboration, and iteration in creating a user experience that is both functional and impactful.

This CPT web toolkit project was a valuable learning experience. Through interviews and workshops, I gained a deeper understanding of the challenges faced by international students navigating the CPT process. It was eye-opening to see how seemingly minor website issues like unclear language or navigation could create significant roadblocks.

The co-design workshops were particularly rewarding. Hearing directly from students and collaborating on solutions fostered a sense of empathy and the importance of user-centered design. It was exciting to see our initial sketches evolve into a user-friendly prototype that addressed user pain points.

this project solidified my passion for UX design. It demonstrated the power of research, collaboration, and iteration in creating a user experience that is both functional and impactful.


What I learned

From this project, I learned the crucial art of balancing user needs with technical realities. Sure, I could design the dream CPT web toolkit, but if it didn't adhere to Purdue's branding or couldn't be implemented by the webmaster team, it wouldn't serve students. This project honed my ability to be creative within constraints, resulting in a solution that was both user-centered and feasible. It highlighted that effective UX design considers not just what users want, but also the real-world limitations that shape the final product.


From this project, I learned the crucial art of balancing user needs with technical realities. Sure, I could design the dream CPT web toolkit, but if it didn't adhere to Purdue's branding or couldn't be implemented by the webmaster team, it wouldn't serve students. This project honed my ability to be creative within constraints, resulting in a solution that was both user-centered and feasible. It highlighted that effective UX design considers not just what users want, but also the real-world limitations that shape the final product.


From this project, I learned the crucial art of balancing user needs with technical realities. Sure, I could design the dream CPT web toolkit, but if it didn't adhere to Purdue's branding or couldn't be implemented by the webmaster team, it wouldn't serve students. This project honed my ability to be creative within constraints, resulting in a solution that was both user-centered and feasible. It highlighted that effective UX design considers not just what users want, but also the real-world limitations that shape the final product.


To see the project in more detail, please find the documentation link attached below:


To see the project in more detail, please find the documentation link attached below:


To see the project in more detail, please find the documentation link attached below:



To see the sketches, mid-fis and Hi-fs in more detail, please find the Figma link attached below:



To see the sketches, mid-fis and Hi-fs in more detail, please find the Figma link attached below:



To see the sketches, mid-fis and Hi-fs in more detail, please find the Figma link attached below:



Wireframe



Next Projects

Coding

Coding

Coding

Coding

Lands' End

Lands' End

Lands' End

Lands' End

Context

Context

Context

Context

Approach

Approach

Approach

Approach

Solution

Solution

Solution

Solution

Learning

Learning

Learning

Learning

Context

Context

Context

Context

Approach

Approach

Approach

Approach

Solution

Solution

Solution

Solution

Learning

Learning

Learning

Learning

👋🏽 Let's Connect !!

LinkedIn

Email

Resume

👋🏽 Let's Connect !!

LinkedIn

Email

Resume

👋🏽 Let's Connect !!

LinkedIn

Email

Resume

👋🏽 Let's Connect !!

LinkedIn

Email

Resume