WHAT I DID

I did a usability analysis on UMBC HR’s website in an effort to uncover and address their usability issues.

WHY I DID

The UMBC HR’s website is old and also when I spoke to a couple of HR staff that uses and maintains the website, they have mentioned the difficulties faced when using the website. So, I approached them with an idea of conducting a usability analysis on the UMBC HR’s website as a part of my capstone course ‘HCC 729 – ‘

HOW I DID

EXECUTIVE SUMMARY

A systematic evaluation approach was followed by conducting these 10 methods
Document Review – This is a method to review all the in-house documents for the client’s organization to get a better idea of the organization. This was conducted on 2/7/2017.
Competitive Analysis – This is to observe and inspire different trends followed by different similar organizations. This was conducted on 2/9/2017.
Contextual Inquiry – This is a process of observing a participant doing a particular task and analyzing the path, complexity and/or difficulties faced by them in finishing the tasks. This was conducted on 2/15/2017.
Interviews – This is to understand what they want, to gather the actual user needs and also to understand the difficulties they face while using the website. This was conducted on 2/23/2017.
UTE Analysis – This is to understand the actual user base for this website and creating personas to create better designs for them keeping the user base in mind. This was conducted on 3/8/2017.
Heuristic Evaluation – This is a process of teaming up with another usability expert and find the different usability problems on the website in order to get an outsider view of the website. This was conducted on 3/15/2017.
Participatory Design – After uncovering the usability problems in the website, this successfully involves the stakeholders, designers, researchers and end-users in the design process in order to help ensure that the end product meets the needs of its intended user base. This was conducted on 3/30/2017.
Think-aloud Evaluation – This is a method of asking the participants to speak out their thoughts while interacting with the website and understand the impacts of suggested design changes in the previous methodologies and make the changes accordingly. This was conducted on 4/6/2017.
A/B Testing – This is a method of giving the user a choice of two or more different designs and to pick the better design among them. Its also called multivariate testing. This is to prevent users from thinking that they are being designed at instead of designed for. This was conducted on 4/20/2017.
Eye Tracking – This is a method to track the user’s eye movement while they are using the website and understand what catches the user’s eye as soon as they enter the website and to emphasize on them or to place the important content at those locations on the website. This was conducted on 4/23/2017.

This table outlines the problems and issued discovered on the UMBC HR website, proposed design solutions and rationale behind them

FindingsProposed Design ChangeRationale
Location of ‘New Employee Resources’ menu optionPlace the ‘New Employee Resources’ menu option among the image links on the landing page
Links for Current Employees and Prospective Employees are on the landing page but the link for New Employees are somewhere hidden. So, having the link on the main landing page would be more accessible for the users.
Contact details for the HR department’s staff is not accessible to the users easilyMake ‘Meet the staff’ menu item as a separate navigation bar menu itemDuring the study, experimenter observed that users would like to contact the relevant person if need be, so having this option more accessible to the users would be logical.
There are many acronyms used throughout the websiteHave a popup with the abbreviation of the acronym whenever user hovers on the AcronymNot all of the users that access the HR website are familiar with the acronyms used. So a popup with the abbreviation would definitely help the users to better navigate through the site.
There are some broken links on the website.Fix the broken links or remove those elements from the HR websiteHaving broken links on the page frustrates the user, there is a potential chance of user leaving the website as well. So, We need to keep track of those links or keep updating all the pages frequently.
Icons representing the files are present on some of the pages but not all of them.Have icons representing the file types throughout the website.Icons representing the file types helps the user to know what type of the file to expect upon click and sometimes where would the file open after downloading it. So following this practice throughout the website is highly recommendable.
Quick links is present in different locationsHave Quick links present in one location throughout the websiteHaving quick links in different locations on different pages makes user to think that the options are changing but since the options are not changing in the quick links section, having it static in one location throughout the website is very easy for the user.
There is no feedback for when a user clicked on the image links present on the landing page.When a user clicks on the image links on the landing page, have the images to stand out to show the difference from other linksImage links are static on the landing page, Couple of users were confused whether they are images or links, so incorporating a highlight mechanism would be very helpful for the users to recognize which option is selected among them.
Different highlighting mechanism used for different links on a same page.Have a same highlighting mechanism for different links on the page (navigation bar, image links etc)Links in the main navigational menu are highlighted upon hover and the links in quick links section on the same page are underlined upon hovered, having a same highlight mechanism for all the links would help the novice users in navigating through the website.
Too much unused white space on the landing pageRelocate 2 of the sections on the right to the left to reduce the unused white space on the landing page.Some of the users mentioned they missed the wellness section on the landing page. So shifting 2 of the sections from right to the left would be very helpful.
The Main menu items of the navigation bar needs be reorganisedSub menu items in all the navigational menu bar needs to be rearranged to make it easier for users to navigate.Some sub menu items in the navigational bar are confusing. There is not much informational scent for the users to traverse through the website. For example in policies tab, there is no sub menu items,hence the users have to go to the page in order to search for some policies. So, making the page headings in to sub menu items would be very easy and accessible for the users in navigating the website.

Medium fidelity prototypes

Eye Tracking Results

Finally, I created a one page poster to present the holistic view of the project

Final Recommendations that I made based on the results of various tests

1. Place the ‘New Employee Resources’ menu option among the image links on the landing page
2. Make ‘Meet the staff’ menu item as a separate navigational bar menu item
3. Have a popup with the abbreviation of the acronym whenever user hovers on the Acronym
4. Fix the broken links or remove those elements from the HR website
5. Have icons representing the file types throughout the website.
6. Have Quick links present in one location throughout the website
7. When a user clicks on the image links on the landing page, have the images to stand out to show the difference from other links
8. Have a same highlighting mechanism for different links on the page (navigational bar, image links etc)
9. Relocate 2 of the sections on the right to the left to reduce the unused white space on the landing page.
10. Submenu items in all the navigational menu bar need to be rearranged to make it easier for users to navigate.

Some of these are under consideration for their next design overhaul