Penn State Meteorology Course Management System

2018 • UX/UI DESIGN • WEB DEVELOPMENT

Designed and developed a course management system for a Penn State meteorology professor.

Tools: Sketch

The Project Goal

The goal of this project was to replace the professor's existing class website with a new user-friendly course management system where students can access the course announcements, syllabus, lab and lesson PowerPoints, resource links, and detailed local weather data for completing course assignments.

Analysis of Existing Site

In order to understand how to best design the course management system, I needed to first understand the pain points of the existing site. To do this, I met with the professor to determine his needs for the site. Additionally, I developed a short questionnaire for the students who were taking the course that semester to evaluate their satisfaction with the site. Some of the questions included were: "Where do your eyes initially focus on the home screen?" and "What specific changes would you like to be seen made on the website?". From this analysis I was able to determine that the navigation and overall site structure needed to be redesigned in order to improve usability.

Design

To begin the design process, I identified the necessary functionality that would be included in the system. From there I ideated various layout & workflow scenarios of the application in the form of wireframes. I then put together a low fidelity click-through prototype of my initial concept to present to the professor and collect his feedback. Using this feedback, I was able to validate my direction of the design and begin creating the high fidelity mockups and prototype for use in usability testing.

Testing

To validate my designs, I conducted a usability test with several students from the professor's meteorology class. In this test, I asked the student to complete a number of common application scenarios while I observed their actions and took note of their comments. From these tests I was able to validate the effectiveness of my designs and identify areas in need for improvement. I then revised my designs to reflect these findings. Following this revision, I sent out a questionnaire to the entire class, similar to the initial questionnaire, to gauge their overall satisfaction with the new course management system compared to the current site. The results of this questionnaire provided validation of my designs.

Development

Once the final design was approved by the professor, I built the application using HTML, CSS, and Javascript. I followed W3C standards for developing the web application and provided code labeling and documentation to ensure it's readability and understanding. I also conducted unit and cross-device/browser testing to verify adequate function and device/browser-compatibility of the application.

Project Handoff

To ensure a successful transition from the old website to the new course management system, I conducted a knowledge transfer with the professor, walking him through everything he needed to know in order to successfully use the new system. I provided detailed documentation to assist the professor for when updating the course content. The last step to the project handoff was to move the new course management system from the test environment to production.

Results

Displayed is the home page of the course website. On this page students can view course announcements, general course information, and State College weather data that they can use to complete their weather assignments.

HOME

Displayed below is the home page of the course website. On this page, students can view course announcements, general course information, and State College weather data that they can use to complete their weather assignments.

SYLLABUS

The syllabus page allows students to easily view their syllabus in a consumable format. A side navigation bar allows students to easily move throughout different sections of the syllabus. Provided is a button for a quick downloading of a PDF version of the syllabus.

RESOURCES

The resources page is where students can access class modules and helpful links used for completing their assignments. Within the modules section, students have the option of being able to just view or download the assignments/labs.

steiningeriv@gmail.com • 570 556 0348