Case Study
Google Careers
Project: Google Careers Site Redesign
UX Research and UI/Prototype Design: Simon Gutkovich
Completed: February 2016
  • Tags
  • Web
  • HTML
  • JS/JQ
  • UI
  • UX
  • Mobile
  • Art
Welcome to my Google Careers Site Redesign case study. This is a personal project I completed to showcase my UX/UI process, methods and competency. (Be sure to check out the high fidelity prototype at the end!)
Background
Google, like many large companies, maintains an entire site dedicated to helping people learn about the company and finding employment there. The purpose [1] of this type of site is twofold: 1. Help potential jobseekers find a career they are interested in, 2. Promote the brand and culture through a memorable experience with engaging content.
It was my hypothesis that the current (2015) iteration of the Google Careers site is not accomplishing the aforementioned core objectives because of two key factors: 1. The site is not inherently designed to deliver an ideal mobile-friendly/responsive experience, 2. The dated and inconsistent appearance does not promote the brand as well as it could–given Google’s pioneering initiatives in the area of interaction design (through its Material Design language).
Update!

On April 20, 2016 Google updated their Careers site! The case study that follows here was completed before ever seeing the new/current Google Careers site. It is interesting to see the direction they took the new site in regards to UX and aesthetics.

The visual design is a unique take on the Material Design methodologies we have come to expect from Google. The features added mirror many of the decisions I made when constructing my updated version including: “Material Design” design language, responsive layout, expanded search sorting/filters, unrestricted sharing, artwork based role header/hero image (not unique by location-yet), and colorful action buttons.

Overall it is a welcomed upgrade that I think will accomplish the same goals I envisioned my own redesign would: a better experience and a more positive opinion of the brand for the user.

See it for yourself here.

www.google.com/careers

Screenshot of Google Careers website (2015)
UX Research: Survey
To see if I was right, and to further my exploration of the redesign project, I would need to poll an unrestricted demographic about their thoughts on the current site (good and bad), general feelings towards career sites, and get baseline technical/demographic data points (collected at the end to prevent “stereotype threat”). I built a survey using Google Forms and used Amazon Turk to recruit people to participate.
Feedback Form Screenshot
Qualitative Survey Questions: Top Answers
Top 3 Elements or Features People Liked:
  1. Site Layout / Structure
  2. Simple / Clean Interface
  3. Features (Filtering / Sorting / Related Content / etc)
Top 3 Elements or Features People Did Not Like:
  1. Lack of Color (Bland Styling)
  2. Not Mobile Friendly
  3. Outdated Styling
Top 3 Suggestions for Improvement:
  1. Include More Filters (and Make Them Easier to Use)
  2. Use a More Dynamic Color Palette
  3. Use a Non-white Background Color
The purpose of my qualitative survey questions was to give users an open-ended way to respond freely about any concerns, likes, and first impressions they had while using the careers site.
Quantitative Survey Questions: All Results
Results: Quantitative Survey Questions Results: Quantitative Survey Questions
The purpose of my quantitative questions was to force users to consider the importance a career site has in the impression they get of a company, as well as to collect general demographic data for analyzation and persona creation.
UX Research: Competitive Analysis
To further determine which features should be present on a career site from a company like Google I did a competitive analysis using the career sites of 12 similar companies (using this LinkedIn data about where Google hires from) to help me decide where candidates might also be looking for a job).
scroll/swipe for more
Career Site
Features
Custom Site
Responsive
Search
Persistent
Search
Browse
by Location
Browse
by Team
Location
Photo
Location Art
Employee
Articles
Employee
Videos
Share Role
Related
Roles
Career Site
Features 		Airbnb Facebook Amazon Microsoft Yahoo! Pinterest Apple Twitter Salesforce IBM HP Oracle
Custom Site
Responsive
Search
Persistent
Search
Browse
by Location
Browse
by Team
Location
Photo
Location Art
Employee
Articles
Employee
Videos
Share Role
Related
Roles
- Feature is present
- Feature is missing (or not applicable)
- Feature is partially available
My research data from other career sites
UX Research: Personas
I used data collected from my own survey as well as some prominent national surveys and reports [2][3][4] to build three common personas to aid in the next steps of the redesign process.
Persona - Jimmy: entry level jobseeker
Persona - Jimmy: entry level jobseeker
Persona - Tanya: mid-level jobseeker
Persona - Tanya: mid-level jobseeker
Persona - Laura: manager-level jobseeker
Persona - Laura: manager-level jobseeker
UX Research: User Journeys (Task Flow)
To evaluate what users would be expecting and interacting with while on the career site I built 2 user journey flowcharts. These represent two of the most common goals jobseekers have (searching and learning) and include all the features and actions they require to have the most fulfilling experience while using the career site.
User Journey - Goal: Search for Role
User Journey - Goal: Search for Role
User Journey - Goal: Learn about Teams/Roles
User Journey - Goal: Learn about Teams/Roles
Design: Wireframes
These low fidelity artifacts take everything I learned from my research and present it in an actionable and easily digestible way. I was able to rapidly prototype and iterate using Axure RP to build these wireframes. The four designs below feature the two most important and complex pages that users will encounter during their time interacting with the site using search.
Wireframe: Search Results Page
Wireframe: Search Results Page
Wireframe: Role Page
Wireframe: Role Page
Wireframe: Role Page (Mobile View)
Wireframe: Role Page (Mobile View)
Wireframe: Role Page with Drawer Open (Mobile View)
Wireframe: Role Page with Drawer Open (Mobile View)
Design: UI
Google’s Material Design system is rooted in all of Google’s core products and websites. The minimalist and mobile-first philosophy is what defines Google as a leader in interaction design and forward-thinking methodologies. I wanted the design to fit seamlessly into Google’s corporate branding identity while maintaining all the current functionality and content; as well as adding new desired features.
I also added something unique to help the site stand out from the rest of the corporate career sites: a location based header image done in a Google Now/Brent Couchman style which I created myself using reference photos of the Google HQ in NYC.
www.google.com/careers
New Google Careers UI
Design: Mobile / Responsive
My design is completely responsive and utilizes Google's Material Design drawer to contain most of the main navigation items for narrow screens. The secondary interface items (favorite, back to results, previous listing, next listing, share, etc) are efficiently presented in one horizontal space-saving bar.
Mobile / responsive view
original (2015) mobile / responsive view
Development: High Fidelity Interactive Prototype
I built an interactive and functional (responsive, clickable buttons, etc) prototype using Google’s Material Design Lite library to get an impression of how the site looks and functions on a variety of devices. Click the big circle below to check it out; thank you for reading my case study.
Live Site
Take me to SIMEDesign