top of page

TEACHING 

EXCELLENCE

Website Redesign
Abstract Futuristic Background

PROJECT OVERVIEW

This was a group project in the Experience Studio course at Purdue University aimed at conducting research and creating a website that would promote the focus on instruction and bring it to the level of research. Lindsey Payne was assigned to this project and entrusted us to elevate, improve, and finish her designs. The existing website was not finished yet and the information on there was hard to navigate. The way the information was represented was not reflective of the goals of the website.

MY CONTRIBUTIONS

Through this project, I was able to become more proficient in WordPress and Figma. I was included throughout the entire process of this website redesign. The page that I worked the most on was the awards page, as well as the supporting awards pages. The tasks I worked on include;

  • Content analysis

  • Site mapping

  • Wire framing

  • Creating mid-fi mockups 

  • Implementation in WordPress

  • Testing

04_edited.jpg
04_edited.jpg
SKILLS

Information Architecture, UI, Web Design, Usability Testing, Content Analysis, Interaction Design

TIME

3 Months

​

January 2022 - April 2022

TEAM

Kelley McTyer, Sarah Palagy, Jennifer Du, Izsadora Johnson, Anna Kelley, Andrew Dobler, Andrew Peterson, Harsheil Arora, Ben Habegger

TOOLS

Whimsical, Slack, Miro, Figma, WordPress

PROCESS OVERVIEW

Group 11.png

USER GROUP

Our user group for this project consisted of two main groups:

Group 24.png

Purdue Instructors

Group 23.png

Purdue Administrators

These instructors are either seeking guidance on how to receive promotions/tenure or those who simply want to become better instructors. The administrators are those who oversee those promotion/tenure procedures. Due to the focused yet relatively open nature of the audience, we decided to focus our testing on instructors but also included other people in academic settings, such as other students.

CONTENT ANALYSIS

Our team performed an in-depth analysis of the content that we were provided by our sponsors to gain a better understanding of what was necessary for the final website. To do this, we took a look at the existing shell site and had multiple meetings with our sponsor. With this information, we would be able to determine a layout that suited the content that we were given. We decided on five main pages: homepage, framework, evaluation, awards, and background.

SITEMAPPING

We created sitemaps in order to group the information to best promote the goals of the Teaching Excellence initiative. It also helped us to establish an information hierarchy to address the layout of the content. First, we determined what would be included on each page, then we determined the subpages.

HOMEPAGE

Provides the meaning behind teaching excellence, and a snapshot of each of the pages for easy access for the audience to find what they are looking for. 

FRAMEWORK

Provides the structure, meaning, and tiers of teaching excellence along with exemplary instructors  for instructors to better understand best practices.

EVALUATION

Shows a standardized criteria for evaluating  teaching excellence to demonstrate to instructors what their evaluation would be based on.

AWARDS

Lists the Purdue and national, and college/departmental awards instructors can receive.

BACKGROUND

Shows the foundation and research behind the framework of teaching excellence.

Group 21.png

Sitemap of pages and subpages

SKETCHING

We took this information and everyone created their own sketches for the layout of the pages. We did this so that we could get multiple perspectives and begin to visualize our initial ideas. We also needed to follow to Purdue style guidelines, so this website would match other Purdue websites. We combined working aspects from different sketches and translated them into lo-fi wireframes. I was tasked with sketching the homepage, framework page, and background page.

Group 25.png
Group 26.png

Homepage

Framework page

Group 27.png

Background page

LO-FI WIREFRAMES

Following sketching and basic mockups, our team moved on to creating our wireframes in Whimsical. Our goal was to visualize our initial ideas into a digestible interface to present to our sponsor for feedback. We used the wireframes to further conclude pain points in our design, what realistically would work within our timeframe and WordPress abilities. 

Group 34.png
Group 30.png

Evaluation page

Group 29.png

National Awards page

Group 36.png

Homepage

Group 31.png
Group 35.png

Framework page

Group 33.png

Awards page

Group 32.png

Background page

Group 28.png

Purdue Awards page

MID-FI MOCKUPS

After wireframing, we moved into Figma to create mid-fi mockups. Our goal was to create a higher fidelity mockup, so that we could copy them for our final site in WordPress. We took our wireframes and added the images and text, following the Purdue style guide, that would be used for the website. These mid-fis could then be used for testing and feedback from our sponsor.

Homepage

Group 107.png

Framework page

Group 93.png

Evaluation pages

Evaluation.png
Overall.png

Awards pages

Awards.png
Group 103.png
Group 105.png

Background page

Group 106.png

EXPLORATORY TESTING

After making our mid-fi prototypes in Figma, we wanted to validate our information hierarchy, evaluate the usability of each page, and check if users found obstacles in completing general tasks. We did this through exploratory testing of each page that called 10 students to look around each page and answer indirect questions about the information that was on each page. This was to check whether the data was clearly represented and easily understandable. We then took our information to Miro and affinity diagrammed to determine the issues, positive aspects, and future fixes/sponsor suggestions.

IMPLEMENTATION IN WORDPRESS

Due to the urgency of the timeframe, we proceeded to implement our designs along with the feedback directly in WordPress as opposed to iterating within Figma. As we worked on the site, we realized there were some aspects of the design that were not possible without the use of code, which the client did not want. We had to adapt and make changes to our design accordingly due to the limitations of no code.

Homepage

Group 2.png
Group 43.png

Framework Page

Framework Page

Group 10.png

Awards Pages

Group 5.png
Group 41.png

Evaluation Pages

Group 39.png
Group 9.png

Background Page

Group 37.png
Group 42.png
Abstract Background

USABILITY TESTING

Using the WordPress website we had made, we conducted moderated usability testing on 10 instructors. The testing involved answering specific questions about the information throughout the website. The questions were in an order that forced users to jump around different pages of the website which allowed us to test the navigation as well. 

We affinity diagrammed the pain points. We observed that there were no major navigational issues and pain points only presented in 3 pages.

bottom of page