UVU College of Engineering & Technology Redesign - Part II

Alex Strasburg
8 min readDec 13, 2021

This is a two-part article that focuses on the creation and implementation of UVU’s College of Engineering and Technology (CET) website. In part one, we focused on the creation of a prototype highlighting the various needs of the CET stakeholders. This section looks at the merging of five prototypes into one coherent design.

Stakeholder Meeting:

Continuing on from the previous project, my team and I met with the CET Dean and his associates to determine the direction to take the website. With five prototypes, we wanted to take the best of each and apply them to the final design. Some of the feedback received included:

“Our priority is our programs and what students want, such as scholarships, clubs, student organizations, you name it. It’s really difficult to find.”

“[We] want to find the information that you need, not cluttered. [We] want it to be brief, concise, but very informative.”

“[We want the] website [to] come across as professional and modern, so want tech class to reflect it.”

“[We] want to see what sort of degrees that [are offered]. I want to look into that certificate and it not be a struggle to figure out what may match with my interest.”

“Success on my end is when I go out to the classrooms and have teachers and students react to testing every week or two [to] present to the class, so extra time can be used on the website, so [we] can see how fast and usable the information is for them.”

With this information in mind, we set out to pick the sections of each prototype that best met the needs of the stakeholders.

For analyzing the website, we put together a Mural Board:

Click for the Mural Link.

We decided to divide the website into the following sections:

  • Home page
  • About Us
  • Departments
  • Advising
  • Student Resources
  • Donations

Home Page:

Home Page Notes

The first issue we faced with the Home Page were determining whether or not to use a slider. The benefits of using a slider were that it allowed users to see information that was upcoming or important as well as highlighting the new Engineering Building. We had to choose what type of slider layout to use including whether having arrows on the side or white dots at the bottom of the slide indicating additional slides.

We were also asked to include the Engineering Building for the College even though it won’t be arriving for at least four years. It was decided having it as one of the slides would enable us to highlight the building, but also allow for high priority items to be highlighted as well.

We also wanted to include a list of the various pay ranges for the different degrees. A bar graph was chosen to highlight the various pay information gathered from the Department of Workforce Services.

Additionally, we were unsure whether to include the news and events on the Home Page. This role was determined to be fulfilled by the slider, but felt that perhaps additional information would be pertinent to the design:

About Us:

Name Attached to Image Version

We decided to keep the About Us page simple. A problem we ran into was whether to use cards to display the information or have the text to the side of the pictures. From a usability standpoint, the cards made more sense, but for simplicity, we stuck with Name Attached to the Image version.

Card Version

Departments:

The Departments page presented a real challenge.

Departments Page

The main areas of CET are:

  1. Architecture and Engineering Design
  2. Computer Science
  3. Construction Technologies
  4. Culinary Arts
  5. Cyber Security
  6. Digital Media
  7. Engineering Technology
  8. Information Systems and Technology
  9. Technology Management
  10. Transportation Technologies

In addition to ten different areas of emphasis, each program can be broken down into respective majors, minors, and certificates within the degrees. This format was informative, but created information overload (Hick’s Law). Instead, each area was broken down into further program details for each department.

Additionally, we wanted to implement an interest quiz on the home page, to solve the confusion of the departments page. By taking an interest quiz, it would narrow down areas of interest for potential students to explore. Rather than students having to looking through lists to find their interest, a more iconic layout was needed. Lastly, although the list provided information on the various degrees, it didn’t link back to the UVU catalog or a PDF that highlighted what classes were necessary for each program. This issue is still being resolved.

Advising:

On the Advising Page, the aim was to highlight the various advisors that were available. The current layout provides a link to the various areas of emphasis and links to the advisors for each area. The advisor page also has a link to where the Advising Center is located and provides information for students with 30 credits or less.

This information could use more graphics to explain steps needed to be taken. Most students are unlikely to read through this so finding a better way of presenting the information is important.

Student Resources:

The Student Resource page is the go-to-hub regarding additional questions students might have. The page coveres topics from Advising and Scholarships to Internships and the Student Handbook. In the previous article when asking students what was important to them, most students wanted to easily access internships. Rather than having Internships hiddenon the Student Resources page, the option of including it in the top menu bar would be more effective. The same could be said of the scholarships link. The CET has a multitude of scholarships available for students. There is a need of informing potential students so they will be more likely to enroll in the CET degrees.

Lastly, some topics were being given too much attention on the main menu. For instance, the Machine Shop had its own tab in the navigation bar. However, the Machine Shop rarely provides access for students/professors.

The navigation bar selected focused on Departments, Student Resources, News, About Us, Support, and Donate. In future iterations of the site, it might be better to remove the News section and include a link to the Scholarships and Internships page.

Donations:

The current layout is too wordy. There are better ways to obtain donations than having a Donate page such as highlighting Alumni Relations. Additionally, it might be a good idea to put the up-and-coming school building on this page to highlight how the donation money will be used.

Section Two:

Next we created a prototype in Figma that highlighting all the various changes we hoped to include on the site:

For the sake of brevity, the below are shown:

  • Home Page
  • About Us
  • Departments

To see additional pages or to view the whole project, follow the link to the Figma prototype.

Figma Link

Home Page:

For the Home page, we decided to include the Interest Quiz, along with the Salary Chart highlighting the different amounts each degree generated on average. Additionally, we decided to include the News on the Home page.

About Us:

For the About Us page, we decided to highlight the school’s Strategic Plan, Industry Advisory Board, Student Advisory Board, and the Dean’s Office. As noted above, the decision was made to display the Dean’s Office personel as cards so with their contact information on the side to better highlight ways to get in touch with them.

Departments:

With the Departments page, simple images were chosen while also allowing for students to see the course catalog and possible Internships. Additionally we pointed students to the Interest Quiz to enable them to narrow down what degrees might interest them.

Advising: (Figma Link)

The Advising page allowed users to choose their major to meet with the correct advisor. Additionally, the Advisor page provide general information students needed before meeting with an advisor.

Student Resources: (Figma Link)

As shown above, the Student Resource page acts as the go-to-hub for all things students might have questions in. These include areas such as Advising, Internships, Scholarships, Career Development, CET IT Support, Labs, the Machine Shop, Student Handbook, and the opportunity to Visit Us on campus.

Donations: (Figma Link)
Lastly, the Donation page provides ways for individuals, corporations, and organizations to give to the College. Future iterations could include a corporations/organization/alumni centered page.

Conclusions:

After completion of the prototypes, the site is now ready to enter into the final phase of usability and accessibility testing.

In the third-part of the article, we’ll look at steps taken to complete the project. However, this has been stalled as transitions in the CET Department have put things on hold.

Alex Strasburg is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to (CET Website) in the (DGM 221R Course) and representative of the skills learned.

--

--