UVU College of Engineering & Technology Redesign - Part I
The following is a two-part article. This article discusses the design and development of the College of Engineering and Technologies (CET) website. Five designs were created by various teams. The second part of the article focuses on how these designs were assimilated and established as a style guide.
The College of Engineering and Technology at Utah Valley University had a poorly designed website, which left users feeling confused and frustrated. Additionally, they were having a difficulty time determining who their audience was. Together, I along with my colleagues were tasked with restructuring and redesigning the website so that it would be more
user-friendly. The project was divided into the following steps:
- Stakeholder Interview
- Surveys
- User Interviews
- Prototype Designs
- Final Designs
Stakeholder Interviews:
We began by conducting a stakeholder interview to highlight the current state of the website, address various problems and constraints, and allow for the establishment of desired outcomes.
According to stakeholders, the largest problem with the website was:
“So much going on… [A] new building [is] coming, but not here for 4–5 years. [We] want to target students who have not declared major yet, and want [the] look and feel of the website to capture [the] story of [the] college and what we have to offer.”
Their main goal of the new site was:
“ … take key components from tech companies, but merge [them] with convention[s] of the University’s site, so it still fits in … but has look and feel of tech company. Want modern, contemporary and clean.”
The stakeholder interview went on to establish, success metrics (a clean and navigable website), key users (potential students and donors), and constraints (completion of prototypes by the end of three months).
Surveys:
Next, a survey was undertaken to determine what direction to take the designs and prototypes. Questions asked included:
“When planning for college, how likely are you to reach out to an advisor for more information about education?”
“On a university’s department page, what kind of content is most important to you?”
“If you are considering going to college or are currently going back to college, how do you plan to pay for it?”
“Would you be willing to participate in an interview with us?”
Interviews:
The surveys were sent out resulting in roughly fifty responses. Of the fifty, five individuals were willing to be interviewed. The interviews were aimed at discovering who the CET’s audience was and what their primary concerns were. Questions provided to the interviewees included:
- What kind of content is most important for you to find on a university’s department page?
This was used to determine what content a student was most concerned about. Answers included timelines/deadlines of when things needed to be turned in and how to sign up for internships.
- What have you done to look for scholarships? What resources/tools have you used to find scholarships?
This was included as the College of Engineering and Technology has over $400,000 of scholarship money to give out each year (according to Kazeem Soraby, Associate Dean, CET). There was a strong need to provide this information to potential students to increase their likelihood of enrolling.
- If you’ve ever donated to an organization in the past, what factors influenced you to donate?
This highlighted how the website should be presented to students as well as potential donors. There was a need to market to both audiences.
- When you are on a web page, are there any challenges you face accessing information?
This helped determine what areas were most challenging for users to navigate to avoid potential potholes in the prototypes/designs.
- Have you ever contacted an advisor to help with your studies/career? If so, what factors influenced you to do that?
For many students, the initial step when applying to UVU was to meet with an advisor. The end goal was to make advisor information more easily accessible.
Site Analysis:
After establishing site specific criteria our team conducted a heuristic review of the site. The goal was two-fold:
1) To determine what parts of the site were working and what wasn’t.
2) To establish what design patterns we wanted to include. Through the review we were able to establish the following:
• There was a lack of consistent branding.
• Too many spots where information was outdated, old, or didn’t describe accurately what the search was for.
• Page information was not clearly spelled out or included as general information on different pages.
• Titles were unclear or unintentionally misleading.
• Information seemed carelessly grouped in clumps without explanation.
• Main portions of the page lack actionable items. It seemed more laid out as decorative.
Personas:
After the heuristic review, our group undertook the creation of personas to better understanding our audience. My persona focused on “Monica”, a grocery store clerk who wanted to return to school for a better job:
Along with the personas, we created scenarios highlighting when the user would first make contact with the site.
Although the personas were fictional, they helped to accredit hopes and desires of potential students and donors.
Wire Frames:
The next step taken by our team was the creation of wire frames for desktop and mobile. I created the Student Resources Page, The Machine Shop, and the CET IT Support Page:
After the creation of the conceptual wire frames, I implemented them in Adobe InDesign:
For brevity, the mobile versions have been omitted from this case study.
Usability Test:
After completion of the paper prototypes, our team completed high-fidelity prototypes using InVision.
With these prototypes, we conducted usability tests to determine how easy it would be for users to use the website.
Because of COVID, we had to utilize family members rather than finding people who utilized the website. Still, the test were enlightening. The tests required the following tasks be completed:
- Navigate to the Web Design and Development Department page.
- Suppose you are a student looking for scholarships based on academic merit.
- Pretend that you are a student and you have less than 30 credits. Set up an appointment with your advisor.
The results were as follows:
“Had a hard time finding the Web Design and Development page. The user seemed to think that the page was unable to be scrolled down on. I had to point out that you could scroll. The scrollbar on the right side kept disappearing. In addition, the user was using a scrollable motion pad, instead of a mouse, which made it more difficult.”
On the second task, I navigated back to home page and had them look for academic merit scholarships. They were able to find it immediately. However, for the prototype, it was not able to be clicked on.
During the last task, the user started to notice the navigation bar at the top and started to use it more to be able to navigate. The user also felt frustrated that there was no drop down with the navigation bar.
They also questioned about what if they were a student taking three credits or less. When asked what they thought they should do, they suggested that the would probably click on the 30 credits or less option.
In conclusion, the laptop mouse added to their frustration, so it may be easier to navigate with a movable mouse.
Final Thoughts:
With the conclusion of the prototypes and usability testing, the project presented five different prototypes to the stakeholders. The stakeholder was pleased and wanted to move forward with the research and prototypes. The next article will analyze how I with my team helped synthesize these prototypes into one standard version.
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 2240 Course) and representative of the skills learned.