top of page
picture for website_edited.jpg

Purdue Polytechnic Institute

Artboard 1.png

This project was focused on redesigning the Office's website and social media templates. The Purdue Polytechnic Institute Office of Globalization hoped to reach out to more students and to have more effective ways of displaying their information. As a sponsored project in my UX Design studio, our team was challenged to do the redesign.

Project Overview

Sponsor - Office of Globalization

The Office of Globalization is committed to increasing cultural and global awareness, providing intercultural development opportunities for students, and providing study abroad opportunities within the Polytechnic Institute.

Design Challenge

Our team was tasked to redesign the Purdue Office of Globalization website and social media to better reach students and disseminate information to them. This goal was created because Polytechnic students are not communicating with the Office of Globalization prior to studying abroad even though they are an integral part of the process.

Targeted User Group

Purdue Polytechnic students who want a study abroad experience during their time at Purdue.

Tools Used

- Whimsical

- Figma

- Canva

Research Techniques

- Best Practices 

- Heuristic Evaluation

- Competitive Analysis

Deliverables

- Website Redesign Mockups (High Fidelity)

- Updated Social Media Templates

- Design Documentation

Personal Contributions

as a team member

Research

- Conducted Competitive analysis

- Conducted heuristic evaluation

- Conducted Usability Testing on current website

*Competitive Analysis: research strategy to learn more about similar existing devices.

*Heuristic Evaluation: a research strategy to identify current issues in a platform using heuristics.

Communication

- Communicated with Sponsor

- Spoke with the Project Management team (project managers & project owners)

- Collaborated with team.

*Project Managers: professor of the studio class

*Project Owner: A person of resources for team leaders. 

Mockup Design

- Sketching lo-fi screens

- Design mi-fi screens.

- Designed a few and assisted on all hi-fi screens. (on Figma)

- Conducted Usability testing on finalized hi-fis. (on Figma)

*Figma: design program

Final Designs 

Website Redesign Mockups

Social Media Templates

Screen Shot 2022-01-12 at 6.29.25 PM.png

Final Design - How it is more effective

The current design of the website necessarily has four issues. With our designs, our team addressed these problems as shown below (these will also be discussed further in detail later in the report):

Issues

An unfocused social media makes it difficult to find relevant information

Lack of information hierarchy and organization.

Cluttered and unorganized program page

Students do not know when and how to contact the office and have difficulty navigating the website.

Our Solutions

3 main kinds of social media content

Implemented an information hierarchy by arranging content by importance.

Reimagined filtering system and program page.

Implemented Calls to Action, buttons, etc.

Our Process

While our team worked on the social media templates and the website redesign in parallel, I will be showing them separately for simplicity. We will start by looking at the social media template design process.

Social Media
Research

Website Research

Website
Ideation

Current Vs
New Design

Social Media
Ideation

Usability Testing
on Current Website

Usability Testing
on Hi-fis

Our focus when redesign the social media templates was to be more effective in communicating the office's programs, capabilities, and latest news. With this, we first conducted a current social media audit.

Social Media Research

The Social Media content audit was purpose to To identify problems in the Office of Globalization's existing social media content. With this, our team found:

- Inconsistent template use

- Text is hard to read

- The content on the templates do not share any specific information that will motivate the students to apply

With these issues, our team hoped to address these when designing the new templates.

Screen Shot 2022-01-13 at 12.33.29 PM.png
Screen Shot 2022-01-13 at 12.33.37 PM.png

Current Instagram Posts

Social media Best Practices

Our team research the current best practices for social media in order to Identify what types of content should be included along with best practices for social media content creation. (The best practices stem from our content audit.) We found the following:

Types of Content

Allows students to get an idea of a program before applying + adds interest

Informs students of upcoming programs, application deadlines, etc.

Helps eliminate confusion around eligibility, finances, and other perceived barriers

Sharing Past
student experiences

Disseminating
knowledge & information

Countering Student
misconceptions

With the social media research, our team moved onto ideation while considering everything that we had found.

Social Media research
Social Media Ideation

Social Media Ideation

We approached ideation with the concern of how we could implement the three previous factors into our social media templates. After exploring other university study abroad social media templates, we designed the following (plus more designs) on Conva:

Student Experiences.jpg

Sharing Past
student experiences

Programs_Deadlines.jpg

Disseminating
knowledge & information

Countering Misconceptions.jpg

Countering Student
Misconceptions

Now that the social media template process has been explained, we move onto the website redesign process. This was our main focus throughout the duration of this project. 

Website Research

Our focus, going into the website redesign, was to redesign the website content to more effectively communicate suitable program options and prompt students to engage with the office prior to applying to study abroad programs. With this, we started with a Heuristic Evaluation and a Competitive Analysis.

Heuristic Evaluation

Our team wanted to answer the question: What are the current problem areas of the Office of Globalization website? We found the following:

Excess of...

Irrelevant Information

Screen Shot 2022-01-13 at 1.08.36 PM.png

Screenshot from the About Us page

Overwhelming amounts of text

Screen Shot 2022-01-13 at 1.08.43 PM.png

Screenshot from the Homepage

Lacking...

Visibility in Displaying Results

Screen Shot 2022-01-13 at 1.14.22 PM.png

Screenshot from the Design your Global Experience page

Visual Consistency Between Pages

Screen Shot 2022-01-13 at 1.14.27 PM.png

Screenshot from both the Homepage and Design your Global Experience pages

Competitive Analysis

Our team conducted a Competitive Analysis in order to identify how top university study abroad programs are organizing and disseminating information to students. A few of the attributes we found, that we thought would be most beneficial, were as shown below:

Engaging Visuals + Organization

Search bar + Simple filters

Information Hierarchy

Screen Shot 2022-01-14 at 1.34.33 PM.png
Website Research

With the website research collected, our team moved on to usability testing with the Office of Globalization's website.

Usability Testing (Current website)

We conducted usability testing on the current website in order to identify students' motivations, mental model, and overall experience when utilizing the website.

Testing Protocol

Takeaways

Conducted with three Polytechnic students

1. Began with five questions in order to familiarize our team with their experience with the website.

2. Two tasks performed. We asked the participants to search for a program that interests them and then to try to apply to it. 

3. Post tasked questions. Our team asked the participants about their experience with the current website. 

Students struggle to seamlessly navigate the website

Students do not understand the end-to-end study abroad process

Students do not understand the role of the office of globalization

With the website research collected, our team moved on to usability testing with the Office of Globalization's website.

Usability testing Current
Website Ideatio

Website Ideation

With all of the research we had done, and all of the information we had collected, we moved on to ideation. We started with sketching, then we moved in to Mid-fis, then hi-fis, and then we finished with testing and iterations.

Sketching

We conducted sketching in order to begin to visualize our ideas that were identified through research. We arranged components to match with the student journey and commonalities found in competitive analysis. And we reduced text-heavy areas and irrelevant information identified in our heuristic evaluation.

Screen Shot 2022-01-14 at 2.03.38 PM.png
Screen Shot 2022-01-14 at 2.04.00 PM.png
Screen Shot 2022-01-14 at 2.03.47 PM.png
Screen Shot 2022-01-14 at 2.03.53 PM.png

Medium Fidelity Mockups

Our focus when moving into our mid-fis was to continue to synthesize our research findings. We had disjointed ideas and used mid-fis as a way to visualize them as a whole,

Homepage

Screen Shot 2022-01-14 at 2.11.39 PM.png

Problem: Initial banner does not have a call to action or contain info related to the office

Solution: Initial banner has call to action with a description the office's purpose

Homepage

Screen Shot 2022-01-14 at 2.14.12 PM.png

Needed to include a Call to action to contact the office. This was one of the main problems that we needed to address.

Screen Shot 2022-01-14 at 2.18.49 PM.png

Design your Global Experience

Improved filtering system now includes a language preference and the option to clear the filters

Design your Global Experience

Screen Shot 2022-01-14 at 2.18.49 PM.png

We moved the list of program from a chart to cards in order to allow it to be quickly looked through for different programs and their descriptions

Design your Global Experience

Screen Shot 2022-01-14 at 3.00.06 PM.png

Problem: This page has a lot of unorganized text and is difficult to scan

Solution: Program information is now clearly organized into sections for increased readability

Our team took our mid-fis and transformed them into high fidelity mockups to create a holistic experience of our website prior to conducting usability testing.

High Fidelity Mockups

We designed the hi-fis based off of the mid-fis and then conducted testing. A few changes were made which will be shown below in the next section.

Since the changes were done directly after usability testing, I have decided not to show each individual screen before the iterations.

Usability Testing on Hi-fi Screens

Our team conducted usability testing in order to evaluate our designs. We had six participants which were Polytechnic students that were interested in the study abroad program. 

Testing Protocol

User Story

Setting a scenario for the participant. Our team had the participants think of themselves who were looking to study abroad.

Tasks for Each Page

Make sure each participant can perform the tasks. We made a list of tasks that are required to do for someone who is interested in studying abroad and signing up for a program.

Post-Task Questions

Our team asked a few questions about their interaction with the hi-fis. 

Takeaways

The disclaimer to contact the Office was insufficient.

The filtering system was misleading

Iterations

Before

After

Screen Shot 2022-01-15 at 1.14.20 PM.png

"Do I have to choose from all of these dropdowns?" - quote from testing participants.

Before

After

Screen Shot 2022-01-15 at 1.18.08 PM.png

"To be honest, I didn't even read that at all--I think my brain just ignores blurbs in boxes" -quote from a testing participant

Usability Testing on hi-fis
Before vs afte

Once the iterations were completed, our hi-fis turned into our final designs. Below are the before and afters of a few of the major screens.

Before Vs. After Hi-fis

Social Media

Screen Shot 2022-01-15 at 1.22.45 PM.png
Screen Shot 2022-01-12 at 6.29.25 PM.png

Homepage

Screen Shot 2022-01-15 at 1.26.06 PM.png
Home Page.jpg

About Us

Screen Shot 2022-01-15 at 1.33.07 PM.png
About us.jpg

Contact Us

Screen Shot 2022-01-15 at 1.36.47 PM.png
Contact Us.jpg

News & Events

Screen Shot 2022-01-15 at 1.39.08 PM.png
News & Events.jpg

Global Tech Minor

Screen Shot 2022-01-15 at 1.41.48 PM.png
Global Tech Minor.jpg
Design System

In order to create consistency within the high fidelity mockups, our team created a design system based on the current Purdue design system. 

Shape

dseign system 1.png

Color

design system 2.png

Actions

Design System 3.png

With these designs, we were able to turn the problems into efficient ways to bring in more study abroad applicants.

Final Design

The main issues are as followed:

Problems

Lack of communication to the Office before students apply for programs

Social media was text-heavy and not eye catching

Website lacking organization and too text-heavy

Solutions

Added a disclaimer to contact the Office before applying to programs.

Adding more eye catching visuals and reducing the amount of text

Adding an information hierarchy to organize and reduce text.

bottom of page