This project was fun to work as I have once been part of a college which had a really annoying website. I can actually feel the pain students going through just to complete simple tasks like finding course information.
There are different kinds of people in this world. People of different age, sex, culture, few are tech savvy, few are novice users etc etc.. Then who is going to be our target audience among them. It is very important to build a persona to understand who are going to use our product. The most important thing for a UX designer is start thinking each and every aspect from users point of view. So creating a persona and a story about that persona helps in finding the problem in the product.
For this project our persona is John; he is a Special education teacher. He wants to make improvement in his career and wants to continue his education at Texas state university. The reason he choose this university is firstly he has been part of Texas State University — College of Education earlier and secondly he stays very close to the college. Being a single working father staying close to the university will be an advantage.
John wants to check if the College of Education has a Graduate program of Special education with the help of his desktop or mobile . If it does what are the requirements of the course and instructions of the application. He wants to check if there are any upcoming events related to his course and find out the information about it. He also wants to find out the background of Staff/ Faculty who will be teaching him this course.
Considering the requirements of John I decided to put myself in his shoes and came up with the tasks based on his priorities.
· So the first most important task is to find if the College of education has a Graduate program in Special education.
· Second is to find the requirements of this course.
· Third is to find the application instruction for applying to this course.
· Fourth is to find Faculty/Staff background and their contact information.
· And fifth, is to check upcoming events.
First step was research; I started sketching out the user flows based on John’s tasks. It was difficult for me at first to find and complete those tasks, as there were so many unfamiliar terms and vague words like “About” and “Students” on the secondary navigation or quick links to “Curriculum & Instruction” and “Health & Human Performance” on the homepage. The quick links also had an option of “Undergraduate advising center” which made me think if this college provides Graduate program at first glance of homepage. The “Apply button” which is call to action was found right at the bottom of global footer.
The site was very complicated and hard to understand; hence I started jotting down the flow of the tasks on spreadsheet. Here is the link to my content inventory:
After fiddling with the site for a long time and maintaining a content inventory of the website, I understood that under Texas State University- College of Education there are 3 departments:
· Curriculum & Instruction — short form C&I
· Health & Human Performance — short form HHP
· Counseling, Leadership, Adult Education, and School Psychology — short form CLAS
Special education program comes under Curriculum & Instructions department. These departments have a lot of weightage in the university but had failed to show it on the site as there wasn’t any proper description of them. So for those of who are visiting the site for the first time it will be so difficult find their course of interest within these departments. Most of the information like faculty information or information regarding upcoming events passes through the department’s section.
To understand the information architecture of different college websites, how their content is categorized & organized for their users to understand, I started with comparative analysis of other three different universities — Ohio State University, Chicago State University and Pittsburgh State University. I selected these universities as they are well known and had college of education department.
I sketched out user flows and did content blocking of these three universities considering John’s tasks. While doing this I found out that all these college sites have a very simple secondary navigation with predictable drop downs, as the terms used on it were to the point and simple to understand by the novice users. Their main content is upfront on the home page and the supporting imagery & supporting content was either below or on the right side of the site.
The image above is the site map of current website. I have used different color boxes for different tasks.
· Red boxes path leads to special education requirements, courses and application instruction.
· Blue is to find faculty & staff information and
· Yellow is for News & Events.
The reason I thought of constructing the original site map was for me to understand the flow & structure of the website. Like you can see above most of the content can be found under department’s section but it is wrongly categorized under “Above” section. The “Students” navigation option, which sounds so broad, leads to the Applications process for the Prospective Students. There are 2 ways to find information about faculty one is “Faculty & Staff” navigation option on the homepage which leads to the information of the entire faculty & staff members of the University and second is Faculty and Staff option under departments which leads to information about specific faculty & staffs of that department. Same situation is with News & Events section, there two ways to find upcoming evens either from homepage or from departments sections.
User Testing on original site:
All the above data collections were based on my assumptions and prediction about John. So to check what other users think about the website and see if they can complete John’s task I conducted a user test on original sites prototype. This is the homepage wireframe of original site and below are the findings of the user tests:
Results of user testing on original site:
· Users were not able to find course requirements.
· They took a very long time and too many clicks to find the application instruction for Graduate program of Special Education.
· No user made use of the department section, which was under “About” on secondary navigation.
· They did not expect to find prospective graduate students section under “Students” on secondary navigation.
· Users who clicked on “Faculty & staff” on secondary navigation wanted information only about faculty of their course and were irritated to go through all the contact info of non course related members.
· Few of the users were given information about 3 departments under college education, even they did not understand in which department to find Graduate Special Education program.
· Only those users who were given information about the departments under college of education, took help of the quick links and were able to comple their tasks.
· The imagery used on the homepage, which is not a link, users, tried to click on it.
· To find an event none of the users scrolled down to see the upcoming events section.
Based on the results of user testing on original site I decided to do “Open Ended card sorting” as well as “Closed ended cart sorting”. I started with open-ended card sorting, the reason to do it was to let users decided main category and its sub categorizes. The users were totally baffled with names of the departments and broad terms leading them to categorize them into entirely different groups.
In the close-ended card sorting main categories were created and users were told to sort the cards under them.
New Site map:
The open-ended and close-ended card sorting definitely helped me a lot to come up with the solution. I sketched out a new site map for the website. Below is the image of the new site map:
· Red box leads to program overview, degree requirements as well as admissions requirements page.
· Blue box is of quick links for novice users who are unfamiliar with departments.
· Yellow is faculty information, events & events within that department.
Mid fidelity wireframes & prototype:
From over all research process considering John as well as novice users I constructed a new site map. This made things easier for creating a mid fidelity wireframes. The secondary navigation contains — About, Departments & Program, Research & Center, Alumni & Friends and Apply button. On Homepage is imagery and description of all 3 departments and links directing to those departments page. I also added quick links on the Homepage to Prospective Undergraduate, Graduate and Certification program. The upcoming events section
Below are the Mid-Fi wireframes of “Homepage” and “Department of Curriculum & Instructions”:
Here is the link to the New desktop prototype : https://invis.io/VB7M028J3
User testing results:
After conducting user test on the new prototype there were many positive results and also few changes suggested by the users.
· Users were able to understand the terms.
· User were a little hesitate to click on the apply button on navigation.
· They were able to find graduate degree program and the course they were interested in using the quick links.
· Secondary Navigation was well organized and termed.
· Users found information about faculty of their department.
· Users made use of “departments & program” to find the graduate program requirements and application instructions.
Considering the feedback and suggestion from the users I made change to the prototype. I also created a prototype of mobile version of the sites as one of the requirements of John was he should be able to access the site from anywhere and from any device. Hence the site should be responsive website.
· To test the mobile prototype (https://projects.invisionapp.com/share/6P7M02FQV#/screens)
· Take feedback from the users and make changes and test again.
· Create wireframes for tablet.
· If user testing goes well then create high fidelity wireframes.
· Conduct user tests and take feedback from the users