Problem Statement
The premise of this project was to improve upon an existing application (web or mobile) using fundamental principles of Human Computer Interaction. The redesign should be centered around three main features, and should be thorough in that usability tests have been conducted in addition to a full overview of the initial application analysis, redesign thought process, and usability results.
Application overview
The app I chose to conduct a study of was Glassdoor – a largely popular web application that helps people find employment. The three main features that were prototyped were the home page, search feature, and user profile page.
Key Features:
- Transparency – clients have access to information about companies that come directly from employees
- Search function based on factors such as location, salary, company preference, and work hours
- Career path insights
- User recommended jobs
- User profile containing personal information, resumes, and job preferences
- Email notifications and ability to save jobs for later
- Company job postings – ability to sign in as an employer and recruit new hires
Design Requirements
- Maximized readability
- Distinguished titles
- Easily accessible buttons and interactive features
- Focal point denoting main purpose of each page
- Minimal design that is not be distracting or confusing
Comparison & Improvements
Home Page
Current Home Page Analysis:
- Feels cluttered
- User may not know where to look first
- Abundance of features makes navigation counterintuitive
Design Process:
- Three things to tackle: readability, accessibility, minimalistic appearance
- Logo, profile, and notifications icons should be enlarged but can remain in the top most corners of the page to adhere to Fitts’ Law
- Search bar can be enlarged and moved a bit more towards the center of the page so that the main feature of the application stands out
- Explore section can remain placed under the search tool, following the law of Miller’s Magic Number with 6 ways to explore Glassdoor
- Reorganize information below explore section so that it looks more cohesive – take the four main categories of the home page and create well defined sections for each one while making the whole page continuous
Profile page
Current Profile Page Analysis:
- Generally well organized
- Certain buttons and features seem to be sized in a disruptive way
- Placement of features goes against the flow of the page
- Redundancy amongst buttons/profile editing options
Design Process:
- Fit the main features of Glassdoor as seen on Home Page at the top while maintaining the sizing differences – keep the functionality of the Home Page without detracting from the Profile Page
- Move the 3 large buttons in the middle of the screen (Update Profile, Download PDF, Manage Privacy) to the left hand side of the screen to maintain continuity
- Change the font weight for the above three options to distinguish them as profile actions
- Profile section on the left should follow Miller’s Law and more importantly, Gestalt’s Principles (namely proximity and similarity)
- Extra “add” buttons can be placed at the end of different sections
- Use solid lines and change in font to distinguish between sections as well as headers – place emphasis on readability
Search Page
Current Search Page Analysis:
- Heavy on information but feels disorganized and a bit cluttered
- Overall layout makes sense but margins and placements feel overwhelming at a glance
Design Process:
- Maintain the overall aesthetic used for previous pages through rounded bounding boxes
- Filters at the top follow Miller’s Law & get a bit more space and added weight to remain distinguished from other text without being overpowering
- All job results can remain on the left hand side with important info at a glance
- When a job posting is clicked on it is highlighted in blue on the left hand side and a more detailed description shows up on the right
- Job title is the header for the description, followed by the company, location and recency of the posting as a sub header
- Salary, number of applicants, and company rating are all placed right below as these are key pieces of information to applicants when job hunting
- Easy Apply and Save buttons are placed below this information, are larger in size, and are different in color so that it stands out while avoiding clutter
- Top right can instead feature notification alerts and a menu option to share or report the job posting
- Maintain the horizontal scroll bar between different sections for all job details while avoiding any overlaps in information
Usability testing
Metrics
- Navigation Time – This metric measures how long it takes for the user to navigate through each page. A shorter navigation time is ideal and promotes efficiency, while a longer navigation time indicates that the webpage is unorganized, unclear, and has a poor user interface.
- Task Time – This metric measures the act of searching for a job or completing a task through Glassdoor. A shorter task time is ideal and demonstrates that the filters are easily accessible and fully functional. A longer task time is indicative of poorly placed filters & misleading information.
- Functionality – This metric measures how well certain features of the website, such as buttons and drop down menus, work. Higher functionality is preferred as that means the user can use all the features of Glassdoor to their full potential without issues.
Tasks
Home Page
- Navigate to the profile icon and click on it.
- Navigate to the Recommended For You tab and click on a job listing.
- Navigate to the search bar and click on the search icon.
User Profile Page
- Navigate to the explore menu and hover over each of the four options.
- Find the option labeled “Update Profile” on the profile page.
- Navigate to the search results page from the current page.
Search Feature
- Navigate to the three dots in the job panel and hover over the icon.
- Find the “Apply” button on the search results page.
- Navigate to the company logo and click on it.
Results
Vignesh Thyagarajan
- 25 year old male full time software engineer that is currently employed at Cisco
- relatively new to the workforce but has gained a good amount of experience
- keeping his options open for a change in employment should the opportunity arise
- tech savvy and very well versed in technology
- amicable, more on the quiet side
- determined, persistent, diligent
Test Case Results
- Navigate to the profile icon and click on it.
- Navigation Time: 3 seconds
- Task Time: 1 second
- Functionality: takes user to the profile page
- Navigate to the Recommended For You tab and click on a job listing.
- Navigation Time: 4 seconds
- Task Time: 2 seconds
- Functionality: takes user to the search results page
- Navigate to the search bar and click on the search icon.
- Navigation Time: 1 second
- Task Time: 2 seconds
- Functionality: takes user to the search results page
- Navigate to the explore menu and hover over each of the four options.
- Navigation Time: 3 seconds
- Task Time: 6 seconds
- Functionality: shows a drop down menu for each option
- Find the option labeled “Update Profile” and hover over it on the profile page.
- Navigation Time: 3 seconds
- Task Time: 1 second
- Functionality: shows the option to update the user profile
- Navigate to the search results page from the current page.
- Navigation Time: 4 seconds
- Task Time: 2 seconds
- Functionality: takes user to the search results page
- Navigate to the three dots in the job panel and hover over the icon.
- Navigation Time: 3 seconds
- Task Time: 1 second
- Functionality: shows a drop down menu of options
- Find the “Apply” button on the search results page and hover over it.
- Navigation Time: 1 second
- Task Time: 1 second
- Functionality: shows the option to apply to a job
- Navigate to the company logo and click on it.
- Navigation Time: 1 second
- Task Time: 2 seconds
- Functionality: takes user to the home page
Isha Shah
- 21 year old female accounting student at UCSB graduating Spring of 2022
- Has been employed in the past and has a full time offer lined up after graduating
- tech savvy, quick to catch on/learn things
- relies on technology on a day to day basis
- outgoing and friendly, reliable, level headed
- hard working, intelligent, focused
Test Case Results
- Navigate to the profile icon and click on it.
- Navigation Time: 2 seconds
- Task Time: 1 second
- Functionality: takes user to the profile page
- Navigate to the Recommended For You tab and click on a job listing.
- Navigation Time: 3 seconds
- Task Time: 2 seconds
- Functionality: takes user to the search results page
- Navigate to the search bar and click on the search icon.
- Navigation Time: 1 second
- Task Time: 1 second
- Functionality: takes user to the search results page
- Navigate to the explore menu and hover over each of the four options.
- Navigation Time: 2 seconds
- Task Time: 3 seconds
- Functionality: shows a drop down menu for each option
- Find the option labeled “Update Profile” and hover over it on the profile page.
- Navigation Time: 2 seconds
- Task Time: 1 second
- Functionality: shows the option to update the user profile
- Navigate to the search results page from the current page.
- Navigation Time: 2 seconds
- Task Time: 1 second
- Functionality: takes user to the search results page
- Navigate to the three dots in the job panel and hover over the icon.
- Navigation Time: 2 seconds
- Task Time: 1 second
- Functionality: shows a drop down menu of options
- Find the “Apply” button on the search results page and hover over it.
- Navigation Time: 2 second
- Task Time: 1 second
- Functionality: shows the option to apply to a job
- Navigate to the company logo and click on it.
- Navigation Time: 1 second
- Task Time: 1 second
- Functionality: takes user to the home page
Thyagarajan Swaminathan
- 53 year old full time Senior IT Manager that is currently employed at ICE Mortgage
- extremely experienced and has been in the workforce for a long time
- very well versed in technology both old and new
- tech savvy; very well versed in technologies both old and new, but not as up to date with trends/products used by the younger generation
- friendly, cautious/wary, logical thinker
- hard working, problem solver, takes their time with problems/tasks
Test Case Results
- Navigate to the profile icon and click on it.
- Navigation Time: 4 seconds
- Task Time: 2 seconds
- Functionality: takes user to the profile page
- Navigate to the Recommended For You tab and click on a job listing.
- Navigation Time: 6 seconds
- Task Time: 2 seconds
- Functionality: takes user to the search results page
- Navigate to the search bar and click on the search icon.
- Navigation Time: 3 seconds
- Task Time: 2 seconds
- Functionality: takes user to the search results page
- Navigate to the explore menu and hover over each of the four options.
- Navigation Time: 5 seconds
- Task Time: 6 seconds
- Functionality: shows a drop down menu for each option
- Find the option labeled “Update Profile” and hover over it on the profile page.
- Navigation Time: 5 seconds
- Task Time: 2 seconds
- Functionality: shows the option to update the user profile
- Navigate to the search results page from the current page.
- Navigation Time: 5 seconds
- Task Time: 1 second
- Functionality: takes user to the search results page
- Navigate to the three dots in the job panel and hover over the icon.
- Navigation Time: 5 seconds
- Task Time: 3 seconds
- Functionality: shows a drop down menu of options
- Find the “Apply” button on the search results page and hover over it.
- Navigation Time: 3 seconds
- Task Time: 1 second
- Functionality: shows the option to apply to a job
- Navigate to the company logo and click on it.
- Navigation Time: 2 seconds
- Task Time: 1 second
- Functionality: takes user to the home page
Usability testing Analysis
Navigation Time
Task # | Goal | Passed Tasks / Total | Passed percentage |
1 | 5 seconds | 3/3 | 100% |
2 | 5 seconds | 2/3 | 67% |
3 | 3 seconds | 3/3 | 100% |
4 | 3 seconds | 2/3 | 67% |
5 | 5 seconds | 3/3 | 100% |
6 | 5 seconds | 3/3 | 100% |
7 | 5 seconds | 3/3 | 100% |
8 | 3 seconds | 3/3 | 100% |
9 | 3 seconds | 3/3 | 100% |
Desired pass rate: 85% Test pass rate: 93% Result: PASSED |
Task time
Task # | Goal | Passed Tasks / Total | Passed percentage |
1 | 2 seconds | 3/3 | 100% |
2 | 2 seconds | 3/3 | 100% |
3 | 2 seconds | 3/3 | 100% |
4 | 5 seconds | 1/3 | 33% |
5 | 2 seconds | 3/3 | 100% |
6 | 2 seconds | 3/3 | 100% |
7 | 2 seconds | 2/3 | 67% |
8 | 2 seconds | 3/3 | 100% |
9 | 2 seconds | 3/3 | 100% |
Desired pass rate: 85% Test pass rate: 88% Result: PASSED |
Functionality
Task # | Goal | Passed Tasks / Total | Passed percentage |
1 | profile page | 3/3 | 100% |
2 | search page | 3/3 | 100% |
3 | search page | 3/3 | 100% |
4 | explore menu | 3/3 | 100% |
5 | update profile | 3/3 | 100% |
6 | search page | 3/3 | 100% |
7 | more options | 3/3 | 100% |
8 | apply button | 3/3 | 100% |
9 | home page | 3/3 | 100% |
Desired pass rate: 95% Test pass rate: 100% Result: PASSED |
Comprehension: Learning the ins and outs of the UI was a bit difficult for some at first, but became easier the more the users interacted with the prototype.
Efficiency: The users were quite efficient overall, as they did their best to focus on their tasks and complete them as quickly as possible.
Memory: Over time, the users were able to become more familiar with the recurring symbols, options, and information presented in the prototype.
Errors: Some users took a while to navigate items due to distractions, a lack of focus, and misinterpretation of the task.
Satisfaction: The users were generally satisfied with the UI presented to them and thought that it was minimalistic and effective in terms of usability.
References
Glassdoor Job Search | Find the Job That Fits Your Life. https://www.glassdoor.com/member/home/index.htm
JustInMind Prototyping Tool
Sharp, Helen, et al. “Interaction Design: Beyond Human-Computer Interaction, 5th Edition.” Wiley.com, 4 Apr. 2019, https://www.wiley.com/enus/Interaction+Design%3A+Beyond+Human+Computer+Interaction%2C+5th+Edition-p-9781119547303.