717

                        UMBC IES WEBSITE - USABILITY EVALUATION

ABOUT THE PROJECT

As part of our Course Study, we conducted Usability Analysis on the University of Maryland Baltimore County's (UMBC) International Education Services (IES) Website. The IES website is a gateway for the International Students to UMBC. The Current UMBC IES website is loaded with information. This might prevent the users from accomplishing their goal quickly and easily. Usability analysis will help us understand how real users interact with the site and would give us the opportunity to improve it based on the results.

GOAL OF THE STUDY

The goal is to better understand how real users interact with the IES website and to improve the website based on the results. The primary purpose of their usability report is to minimize design and enable users to accomplish their goals.

 

METHODOLOGIES

Competitive Analysis | Direct Observation | Interviews | Task, User & Environment Analysis | Heuristic Evaluation | Participatory Design | Think-Aloud Testing | Usability Testing


METHODOLOGY 1: COMPETITIVE ANALYSIS

We identified six competitor IES Websites based on their Navigation, Layout, Usability and Aesthetics. We identified similarities and dissimilarities with the UMBC IES Website as a part of findings. We analyzed the websites' core strengths and weaknesses. We then derived some Key takeaways to use them as a benchmark for the UMBC IES website. We conducted the Competitor analysis on 12th February 2018. 

new

     Findings 

  • All the websites have have News updates, Event Calendar and Immigration news on home page
  • Some of the websites have testimonials from students that reflect positivity
  • Sites have main menus with drop down menus for users to access with ease
  • Sites look organized and draw attention to important content
  • UMBC IES website lacks balance between texts and images

  • UMBC IES Website’s content is loaded with text. It is hard for users to spot the important links and items

Recommendations

  • UMBC could put more emphasis on dates of the events for more clarity and easy scanning
  • UMBC IES Website could include Testimonials from Students to reflect positivity
  • UMBC IES website can use better visual design, with complementary colors to enhance the look and the feel. Also, it can help highlight the important content.

METHODOLOGY 2: DIRECT OBSERVATION

Direct observation is a “non-Intrusive” technique. As researchers, we carefully observed two participants perform the assigned tasks without interrupting them. We took notes while observing the participants. We selected two International graduate students as our participants. 

Assigned Task: “Apply for Curriculum Practical Training from the website". 


Observation


Findings

  • Navigation worked comparatively well.
  • Users were able to navigate successfully to the CPT page.
  • One user used navigation menu, while other user used search functionality.
  • There were usability challenges in reading text heavy pages.
  • They found themselves lazy to read through the text heavy pages

 

Recommendations

  • Recommendations will be to improve the Information architecture by arranging and grouping, so that user will take less time to identify which information to focus upon. This is a severe issue as it could affect the cognitive load of user while interacting with the page and result in user disengagement.

METHODOLOGY 3: USER AND CLIENT INTERVIEW 

In the Interview method, we gathered information as much as possible from the Users and Clients concerning the user experience. This method helped us understand their experiences and expectations from the system. We used open-ended and close-ended questionnaires. We recorded and documented Clients and participants responses to our questions, their opinions and  feedback.

 

interview questions

 

Findings

  • Both the students were satisfied with the way IES websites works.
  • When given the task to find a particular content, both of them used the search  functionality instead of the navigation while one user felt the lengthy content rich
    pages of ‘F1 student’ to be informative other student felt its could be arranged properly.
  • Both the students traversed through the navigation menu correctly which means the navigation is self-explanatory.

 

Recommendations

  • Suggestion was made to include a visible link of IES in UMBC main website.
  • The website can have a FAQ session which will be helpful for the students.

 

METHODOLOGY 4: TASK, USER & ENVIRONMENT ANALYSIS

Hierarchical task analysis was conducted to determine the number of steps it takes to complete a particular task. Some of the Tasks were to apply for I20, Search and find CPT application form, Search and find OPT application form.  Environmental Analysis was conducted to gain insight into user’s environment in which  he/she performs a particular task. User Analysis was done by developing personas to represent the target user group. Our target user groups are the international Students - Current and prospective, and International Staff.

 

UTE analysis

 

Findings 

  • Enrolled students are diverse in their culture, language, technology usage.
  • Majority of them are international students who are away from home.
  • Navigation plays a major role in performing the tasks correctly.
  • Users were taking more time to analyze the text heavy pages.
  • The website is based on WordPress template. IES Staff is responsible for design and implementation of the website.

 

Recommendations 

  • Imrpoving on the navigation menu.
  • Refinement of the content is required to address all type of students to bring an inclusive nature to the design.
  • Include visual elements such as chart, icons, and sketches to reduce the text and convey information more easily.

 

METHODOLOGY 5: HUERISTIC EVALUATION

Heuristic evaluation is conducted to improve usability, utility and desirability of the designs. We based our Heuristic Evaluation on Nielsen and Molich’s 10 User Interface Design Heuristics. As part of the Heuristic Evaluation, we looked through several pages, design elements, interactions, navigations, visual design elements to analyse and identity the parts of the website that did not meet the usability guidelines. We have documented these issues in the Usability Action reports (UAR). 

 

HUERISTIC

 

Findings 

  • There were proper naming conventions for Primary Navigation which helps the user to match with real world
  • Proper visual indicators for state change helped to navigate seamlessly
  • There were certain hyperlinks which were not active, resulting in page errors.
  • The order of the menu is in sync with actual journey of a student
  • There are issues with menu item labels that did not resemble the type of actions available under that menu
  • There is a little deviation in the consistency with respect to the language tone
  • Most of the website page content is text driven

 

Recommendations 

  • The website can provide a relevant navigational terms which will help the user to recognize the related information quickly.
  • The Website can follow terms with consistency in tone and language of navigations menu.
  • Regularly updates should be done to check if all the links are active. If possible such hyperlinks should be taken down and redirected to the correct pages
  • There should be proper balance of text and visuals to improve the users reading experience.

METHODOLOGY 6: PARTICIPATORY DESIGN

We conducted participatory design which actively involved our users in our design process. Participatory design process helps us ensure the result meets the user’s needs and is usable.

 

Untitled-4
PD Session

Findings 

  • Participants were able to navigate through the content easily when the important information was represented in visuals.
  • They were able to easily figure out the three step process for applying for CPT, when represented visually.
  • Participants were able to easily access the important links when they are placed on top of the F1 CPT page.
  • They were able to distinguish between different types of content when presented in (Frequently Asked Questions) FAQ format
  • Participants still find it difficult to identify a certain type of document from the IES homepage menu.

 Recommendations

  • Sub-Menu items need to be labeled and grouped appropriately to resemble the type of actions available under the Main menu

METHODOLOGY 7: THINK-ALOUD EVALUATION

In the Think aloud Evaluation, we  involved the participants to think aloud while performing their assigned tasks. The participants were allowed to speak out anything that comes in their mind related to the task. It helped us to understand their cognitive process, gather data and analyze for further improvements in the design.

 

thinkaloud

 

Findings 

  • User was spending more time looking at the new icons instead of identifying the "apply now" button. 
  • User was not sure where to download the form due to the complex nature of the links.
  • User took more time to find the sub-menu option from the main menu selection

 

Recommendations

  • A separate prominent button can be given for ‘apply CPT’ and ‘contact’ task.
  • Icons were replaced by a card layout which clear gives the instructions in an order.
  • The location of apply CPT button can changed to the top of the page to get better visibility for expert users.
  • Language can be changed to clearly convey the action.

 

DESIGNING MEDIUM FIDELITY PROTOTYPE

 

do
one

 

METHODOLOGY 8: USABILITY EVALUATION

Usability Evaluation is a technique involved to test the product with the real users. We successfully evaluated our prototype with four real users (International Students) in the usability lab. Our main goal is to identify design usability issues to improve the efficiency, productivity, and user satisfaction by determining design inconsistencies, usability problem areas. The target audience of the website are the International Students. An eye tracking software "Tobii"  collected the participants’ gaze information and stored data in the application. After the  task, the participants completed the post-task and satisfaction questionnaire and elaborated on the task session with us. 

Eyetracker

Findings

  • There were multiple fixations on the actual CPT screen, I-20 page indicating users' failure to correctly connect with the required content.
  • The required action button was on the top portion of the page but the users gazed through the entire length of the page to identify the respective action button.
  • The gaze was mostly on the left side of the page on the headings.
  • There was an occurrence of a strong fixation at “download form” in our prototype CPT page. The result indicates that design was successful in directing the attention of the user towards the right content. This pattern was found for both the versions of finding the CPT application with both the participants.
  • Usability Evaluation on our Prototype : I-20 Page - Both the participants had to gaze through the entire page and had single fixation on the right content when compared to the current webpage where the participants had multiple fixations
  • Users were able to navigate through the content easily when the information is represented in visuals.

 Recommendations

  • Include visual elements such as charts, icons and graphics for users to find the important information easily.
  • Important links can be placed in the top section of the page, so that users do not have to gaze through the entire page searching for information.

 

ONE-PAGER EXECUTIVE SUMMARY

 

Screen Shot 2018-06-22 at 6.35.28 PM

 

REFLECTION

The Usability Evaluation Project gave us an opportunity to evaluate the UMBC International Education Services (IES) website. We started our project with a very generic problem statement “Define the pain points faced by  students while interacting with IES website”. After our first conversation with our Client, we redefined and narrowed down the scope to only F1 students’ specific pages. This helped us to focus on a limited area and thus do more justice to analysis and research. As we did our first observation and contextual enquiry, it became visible to us that navigation menu and page content plays a crucial role in user engagement. While the former aided ease of accessing a page,  later helped in understanding important information which was only available in IES website. 

Most of those information was very critical in nature as it dealt with visa and work related information. So we broke down the whole scope into navigation and page content. This helped us to tailor our user interview questions focusing on those aspects. The student interviews were very effective and clearly reflected the pain points faced by them in these areas. During the client interview we were able to identify the pain points faced by them and it aligned very well with our finding. This was a clear indication that our analysis is on the right direction. The participatory design is a good learning technique. We involved the users in our design process and it allowed us to understand their needs and goals. The process enabled us to think from their perspective and include their ideas in our redesigns. The findings from the usability testing,  that was conducted using an eye-tracking software, confirmed the usability issues with the existing website. The users were finding it difficult to find the required information in content heavy pages. Our prototype which had visual representation of important content such as “Steps to apply”, helped the users to easily analyze and easily perform the tasks.

The possible next steps will be to redesign the navigation menu structure and work on labels based on the page contents. Each page content needs to carefully analyzed and represented in a more visually balanced manner.

Overall, it was a great learning experience interacting with our client, Users and peers and applying various methodologies to understand and analyze the usability issues.

Projects

UMBC IES WebsiteUsability Evaluation

Website RedesignPrototyping

Wonder Woman BraceletsUser Interface Prototyping & Development

UMBC Choice ProgramGraphic Design

Design PrinciplesFundamentals of Human-Centered Computing

Design Challenge - IDEO & AcumenHuman-Centered design