Existing Website UX Audit
7 likes•2,053 views
This document provides a UX audit of Dick's Sporting Goods' careers website in preparation for a redesign. It includes a competitor analysis, identification of accessibility issues, analysis of existing user pain points, and a request for additional data. Key findings include opportunities to improve the job search functionality, navigation on mobile, and meeting common design patterns from benchmark sites. The goal is to inform wireframe design and ensure an accessible, easy to use experience for job seekers.
Existing Website UX Audit
- 1. Careers Website Redesign UX AUDIT | 7.27.16 Page 1eCommerce User Experience Table of Contents Executive Summary.................................................................................... Competitor Analysis................................................................................... Hiring Analytics............................................................................................ Accessibility................................................................................................. User Experience Analysis.......................................................................... Existing Data................................................................................................ Going Forward ............................................................................................ Page 2 Page 3 Page 6 Page 7 Page 8 Page 12 Page 16 Careers Website Redesign Existing Website UX Audit | 7.27.16 Tim Broadwater
- 2. Careers Website Redesign UX AUDIT | 7.27.16 Page 2eCommerce User Experience Executive Summary DICK’S Sporting Goods (DSG) is beginning the process of redesigning their Careers website located at http://www.dickssportinggoods.jobs. This report and its content serves as a user experience (UX) audit that identifies and analyzes competitive benchmarking, identifies accessibility concerns, identifies interaction elements that are inconsistent with user expectations, presents data requests that will inform and impact wireframe design, and proposes additional usability testing that could positively impact the DSG Careers website. This report does not contain usability testing, usability testing results, customer personas, in-depth analytics/quantitative data, final recommendations, or wireframes. Research Objectives • Research competitive benchmarking of the DSG Careers website • Compare and assess UX elements of the current DSG Careers website to those of identified benchmarks • Identify accessibility concerns with the current DSG Careers website • Identify pain points and instances of potentially problematic UX with the current DSG Careers website • Present data requests that informs wireframe design • Propose additional opportunities for usability testing
- 3. Careers Website Redesign UX AUDIT | 7.27.16 Page 3eCommerce User Experience Competitor Analysis Introduction In the initial meeting and discussion that was scheduled through MeetingPlanner (ID# 469577), the eCommerce Project Manager identified the following website as being a relevant per institution and career application experience: UX & Workflow Discussion - 7.26.16 • Vanity Fairs Corporation: http://www.vfc.com/careers Additionally, the eCommerce Competitor List created on Jun 30, 2016 can be used as a starting point to identify a list of similar websites that are consistently noted as having positive eCommerce user experiences. The following competitor career websites are predominantly standalone, responsive, contemporary, and reflect the peer baseline for UI and UX that the DSG Careers website should strive to achieve/surpass: Baymard Institute Usability Study Average Rankings • Gilt 40.5 Average Rank http://www.gilt.com/careers/ • Rakuten 39.2 Average Rank http://www.rakuten.com/jobs • Best Buy 39 Average Rank http://www.bestbuy-jobs.com/ • Foot Locker 35.7 Average Rank http://sneakerjobs.com/ • Ann Taylor 35.6 Average Rank http://www.anncareers.com/anntaylor/ • Toys’R’Us 33.8 Average Rank https://www.toysrusinc.com/careers • Williams-Sonoma 33.4 Average Rank http://careers.williams-sonomainc.com/ • Kohl’s 32.4 Average Rank http://kohlscareers.com/ • Disney 31 Average Rank https://jobs.disneycareers.com/ • Cabela’s 30.8 Average Rank http://cabelas.jobs/
- 4. Careers Website Redesign UX AUDIT | 7.27.16 Page 4eCommerce User Experience Competitor Analysis Comparison After an examination of the ten previously identified career websites - Ann Taylor, Best Buy, Cabela’s, Disney, Foot Locker, Gilt, Kohl’s, Rakuten, Toys’R’Us, and Williams-Sonoma - the following are career website attributes to consider when redesigning the DSG Careers website: HistoryStatement Mission/Values Team/Culture Locations/Offices Text/VideoBiographies Benefits/Perks MultipleJobSearches InternshipsInformation ContactMechanism InHeader InFeatureArea InWebpage InNavigation InHeader/Hamburger SearchAllOption Hamburger(>1024px) Hamburger(<768px) ResponsiveWebsites SocialMediaInFooter HeaderPathToWebsite Ann Taylor Best Buy Cabela’s Disney Foot Locker Gilt Kohl’s Rakuten Toys’R’Us Williams-Sonoma Homepage Content Job Search Box Interactive Elements
- 5. Careers Website Redesign UX AUDIT | 7.27.16 Page 5eCommerce User Experience Competitor Analysis Percentages Compiling the benchmark career website comparisons into percentages, and focusing on the landing page, the primary call-to-action of searching/applying for jobs, and examining the main interactive elements, provides insight to elements that can be included in the redesign. Consideration should be given to the following elements that have a score of 50% or higher for the DSG Careers website: Homepage Content Mission/Values 60% Team/Culture 50% History Statement 50% Benefits/Perks 50% Another Job Search Outside Navigation 50% Text/Video Biographies 40% Contact Mechanism 40% Locations/Offices 30% Internships Information 30% Job Search Box Location In Navigation 100% In Header 70% In Feature Area 20% In Webpage 10% Other Job Search Features Search All Option 100% In Header/Hamburger (Mobile) 80% Interactive Elements Hamburger Navigation (>1024px) 30% Hamburger Navigation (iPad Landscape) 10% Hamburger Navigation (iPad Portrait) 50% Hamburger Navigation (<768px) 100% Other Elements Responsive Websites 80% * Header Path To Main Website 70% Social Media In Footer 60% * Remainder is 10% no mobile and 10% server-side redirection.
- 6. Careers Website Redesign UX AUDIT | 7.27.16 Page 6eCommerce User Experience Hiring Analytics Hodes The following are the top key performance indicators (KPI) from July 25, 2015 through July 26, 2016 for the DS Careers website: • Visits 373,980 • Conversions 26,108 • Hires 21,105 • Media Spend $285,716 • Media Hires 1,070 • Media Cost Per Hire (CPH) $267 Top Five Hiring Media Sources Top Five Hiring Non-Media Sources * Data statistics/visualization are based on a year of analytics data.
- 7. Careers Website Redesign UX AUDIT | 7.27.16 Page 7eCommerce User Experience Accessibility The following errors are based on major to medium infractions identified using the Web Accessibility Evaluation Tool (WAVE) and a web console. All errors pertain to the homepage, primary navigation pages, and secondary navigation pages. Web Content Accessibility Guidelines - Level AAA • Featured Jobs .widget_joblist_row class fails contrast check * • DSG Logo has non-specific/insufficient alternative text • Heading 2 is skipped on homepage/Featured Jobs should be H4 or without heading tags Headings provide document structure and facilitate keyboard navigation by users of assistive technology. These users may be confused or experience difficulty navigating when heading levels are skipped. • Twelve broken same-page and redundant links A link to another location within the page is present but does not have a corresponding target, and adjacent links go to the same place. • Four links to PDF files/Link to website, or host content in-page Unless authored with accessibility in mind, PDF documents often have accessibility issues. Additionally, PDF documents are typically viewed using a separate application or plug-in, and can thus cause confusion and navigation difficulties. • A <noscript> element is present/Ensure scripted content in accessible Content within <noscript> is presented if JavaScript is disabled. Because nearly all users (including users of screen readers and other assistive technologies) have JavaScript enabled, <noscript> cannot be used to provide an accessible version of inaccessible scripted content. • Title attribute text is the same as text or alternate text The advisory information presented should not be identical to or very similar to the element text or alternative text. General • Website title isn’t self-explanatory/user friendly (CWS?) JavaScript • Prefixed Fullscreen API is deprecated In Mozilla Firefox the Fullscreen API provides an easy way for web content to be presented using the user’s entire screen. Resolve by unprefixing the DOM fullscreen API; details can be seen at Bugzilla. • Google Maps API warning: NoApiKeys The script element that loads the API has no API key. Resolve by including a valid API key as a key parameter by generating a new API key on the Google API Console. Web Content Accessibility Guidelines - Level AA • One linked image is missing alternative text • Four forms don’t have a corresponding label • Fourteen anchor tags/links contain no text • Featured New Stores’ scrollbar fails contrast check The visual presentation of text and images of text has to have a contrast ratio of at least 4.5:1 for interactive element and medium to small scale text.
- 8. Careers Website Redesign UX AUDIT | 7.27.16 Page 8eCommerce User Experience UX Analysis Navigation 1 2 3 1 2 3 This is potentially confusing by not being on DSG brand, and if coming from the main website. The user expectation would be able to go to/navigate back/return to main website through a global and local navigation. Hover states are off from vertical bars. This creates confusing interaction and targeting for users. Hover anchors/links should change based on div hover, not just text hover. For a user it is difficult to see if you are hovering over the correct list item. Virtual tour buttons have overlapping navigation direction and individual slide buttons. 4 4
- 9. Careers Website Redesign UX AUDIT | 7.27.16 Page 9eCommerce User Experience UX Analysis Job Search Box 1 2 1 2 Users expect search box location to be at the top of the webpage, in the top right of website header, or contained in a top-right utility navigation. Homepage feature, layout, or user interface should explain taxonomy through content and photo blocking buttons, and not simply rely on industry labels and verbiage. The feature is sparse and has no content about DSG as an employer. The company’s history should be included and values should be included to preface such a huge ‘Search Jobs By’ call to action. There is not enough emphasis placed on the primary action - applying/searching for jobs - with the search box being below the header and feature area, and in a gray box. Users might be presented with too many search options, and not a ‘search all positions’ option. User memory studies by the Nielsen Norman Group show that it’s taxed when labels are included in the form rather than above, or a float label pattern. Form labels could be audited for improvement. 3 3 4 4
- 10. Careers Website Redesign UX AUDIT | 7.27.16 Page 10eCommerce User Experience UX Analysis Footer 1 3 1 2 On a mobile device content runs together. These chunks of content need separators, possibly more vertical space, or make .LinksHd class visually different to make content more digestible. Contact or help links shouldn’t link to a PDF file that potentially could have accessibility issues. Integrate a contact form mechanism. EOE verbiage could be separated from links, and have a different <p> treatment to visually differentiate links. Users expect social media to be present at the bottom of the webpage instead of the top. The scroll-up button should be more visually dominant by enlarging the carrot, differentiating the color for interaction elements, or changing the shape to a circle. 3 4 2 4
- 11. Careers Website Redesign UX AUDIT | 7.27.16 Page 11eCommerce User Experience UX Analysis Mobile Navigation 1 1 2 The mobile menu icon is a bulleted list, and should rather be a hamburger/list icon for user DSG brand recognition (possibly with the word ‘Menu’, and contained in a border. Upon click, the icon takes up too much vertical mobile screen real estate, when mobile user interfaces should be more about spatial economy. An SVG of a menu icon should be utilized over a font family in case users have ad-blocking that disables font loading enabled. With a medium to large primary navigation the vertical space of the mobile menu could be better economized with the use of + and – (or carrots). This allows for expandable navigation for secondary and third-tier elements, and reduces toll on a user’s memory storage. 2
- 12. Careers Website Redesign UX AUDIT | 7.27.16 Page 12eCommerce User Experience Existing Data Requests To inform the construction of the redesign wireframes, it would be beneficial and informative to request both qualitative and quantitative data for the existing DICK’S Sporting Goods Careers website. Applicant demographics, position demographics, and any help requests – combined with analytics, server-side statistics, and traffic reports – will greatly inform the focus and interaction of future/potential applicants, thereby affecting the wireframes for the project. Qualitative Data - Human Resources • Applicant Demographics • Searching Preferences - primary, secondary, tertiary sorting mechanisms • region • keyword • category • business unit • Target Audience - primary, secondary, and tertiary target audience • percentages - age, race, sex, education level, spoken languages, etc. • current employee demographics - sharable? • improve diversity • Position Demographics • Most Available/Turnover - informs featured jobs on homepage • Most Applicants • callout areas/news • featured jobs on search pages • Help Requests - ‘If You Require Assistance’ link Quantitative Data - Analytics & Traffic • Analytics/Server-Side Statistics • Device and Browser Width - wireframe sizes/responsive break points • Task Priority • original applications/resume building - desktop • sign-off/agreement/continuing steps – mobile • Region - primary or secondary sorting mechanisms • Referral Traffic Statistics • DSG Footer Career Link Referrals - necessitates breadcrumbs/hierarchy • Employment Site Referrals • negates the need for breadcrumbs/hierarchy • expedite application process
- 13. Careers Website Redesign UX AUDIT | 7.27.16 Page 13eCommerce User Experience Existing Data Hodes * Data statistics/visualization are based on a year of analytics data.
- 14. Careers Website Redesign UX AUDIT | 7.27.16 Page 14eCommerce User Experience Existing Data Google Analytics • Audience Overview: • New Visitors 71.3% • Returning Visitors 28.7% • Geographic Location of Visitors: • United States 99.00% • India 0.13% • Canada 0.09% • United Kingdom 0.07% • Mexico 0.05% • Browser/OS: • Chrome 43% • Safari 31% • Internet Explorer 13% • Firefox 6% • All Others 7% • Acquisition Channels: • Referral 59% • Organic Search 24% • Direct 16% • All Others 1% • Job Search Box: • Keyword/ID 13,592 Clicks • Location 22 Clicks • Category 22 Clicks • Business Unit 17 Clicks • Resolution Ranges: • Desktop 57.09% • < 1024 • 1010x670 1.97% • Laptop (1366 by 768) • 1350x670 5.76% • 1370x670 3.89% • 1350x640 3.00% • 1370x640 2.08% • 1350x660 1.57% • 1350x650 1.12% • 1280x740 0.59% • 1260x920 0.58% • 1280x650 0.56% • 1280x640 0.53% • 1350x630 0.90% • > 1024px • 1580x800 1.20% • 1900x980 1.15% • 1370x660 1.12% • 1900x960 0.96% • 1600x800 0.93% • 1580x780 0.83% • 1600x780 0.83% • 1920x980 0.78% • 1900x970 0.75% • 1920x960 0.74% • 1370x650 0.70% • 1370x630 0.70% • Tablet 7.15% • 980x640 11.25% • 1020x670 11.23% • 770x930 10.13% • 980x1180 9.56% • Mobile 35.76% • 375x667 22% • 360x640 22% • 320x568 17% • 768x1024 11% • 414x736 7% • All Others 21% * Data statistics/visualization are based on a year of analytics data.
- 15. Careers Website Redesign UX AUDIT | 7.27.16 Page 15eCommerce User Experience Existing Data CX & SEO * Data based on comments provided by Customer Service/CX/Voice of Customer, and search engine terms from SEO examinations. Comment from May, 26th 2016 The job site is poorly written. It’s a waste of time. Time is most peoples most valuable resource. There is no way to contact anyone when the hourly wage window will not let you through. There are no listing parameters and nobody to communicate with for clarification that should have been provided up front. It looks to me like Dick’s Sporting Goods is trying to insulate themselves from the public. For DSG to require personal information from job applicants without a very clear avenue of real (or quick anyway) time two way communication is in my opinion unacceptable. My personal information is clearly more important to me that DSG thinks it is. I didn’t even finish filling out the job application before I ran into technical problems with the interface after uploading my information. I think these are some very basic problems with DSG’s on line job application process. I will probably not be finishing my job application. Too bad too. I’m well qualified. Average Monthly Searches (exact matches only) dicks sporting goods jobs 14,800 merchandising jobs 4,400 dicks sporting goods careers 9,900 ecommerce jobs 1,600 dicks careers 1,000 dicks jobs 880 jobs at dicks sporting goods 260 corporate retail jobs 170 pittsburgh marketing jobs 110 pittsburgh finance jobs 70 retail jobs pittsburgh 40
- 16. Careers Website Redesign UX AUDIT | 7.27.16 Page 16eCommerce User Experience Going Forward In addition to the observations made in this UX audit, there is a general lack of career content contained in the DSG Careers website. More robust data could provide additional insight for continuation, but the following content improvements and usability measures could also provide valuable information in redesigning the DSG Careers website: Content Improvements • Promote Internships • Possibly link to http://www.dsgopen.com/internship-program.php • Possibly link to http://www.vault.com/internship_program/retail/dicks-sporting-goods/overview • Show culture by incorporating photographs of diverse employees - alone or in groups - working, collaborating, and having fun. • Develop employee biographies and/or video biographies to engage users, and increase applicants. • Company snapshot, or a truncated version of ‘About Us’, should be developed. This is what applicants need to see and experience first and foremost through the website. This includes our history, values, team climate, and mission. Data Improvements • Enable Google Analytics Demographics/Interest Reports • Setup a CX feedback mechanism into website • Link Google Search Console with Google Analytics. Usability Testing Opportunities • Card Sorting – determine information architecture/navigation structure against user’s expectations • Label Auditing – determine if terminology is confusing (SSC, Distribution Center, etc.) • Current Employee Surveying – quantitative feedback on their experience with the application process