Project: Careerbuilder Homepage Redesign
Client: Careerbuilder
When: Q2 2015
Role: Information Architecture, Visual Design, Prototyping, Front End Development
A Deeper Dive
If you haven't had a chance check out the Careerbuilder redesign as this will be a deep dive specifically on the homepage.
Finding Existing Value
As shown in the Carerbuilder redesign project a gap analysis was done across all pages on the sites, including the homepage.
What was found was a lack of value in a lot of the information presented on the page, which muddled the page from allowing users to quickly and easily accomplish what they came for.
Iteration
In an attempt to focus on a few powerful paths to take users down I began to sketch out layouts and blocks of content that would focus on three main concepts.
Search first and foremost
Show users the value in using our site
Careerbuilder as a visual modern website
Experimenting with single page layouts, scroll patterns and account for SEO content with a variety of layouts.
The Test
Utilizing in person user testing I facilitated using a discussion guide collaboratively created by myself and our research team users took us through their job search as well as using a series of HTML prototypes I created we were able to discover some key points
Drag and Drop was loved and thought was unique for a job board
Use of occupational imagery negatively impacted users if it didn't match
Users didn't explore down the page when a section took the full window
Success stories were seen as superfluous
Numerical insights were powerful (applications viewed & jobs posted today)
"Be Discovered" piqued interest, users didn't know one of our greatest features
Additionally making use of Usertesting.com to expand the research to confirm our findings from in person testing in an unmoderated setting.
Refinement
Taking our findings from testing I refined the flows and interactions of the prototypes. Allowing development to take over in order to release to a small percentage of users, gaining quantitative insights on how the design works.
See the animation and flow prototype for drag and drop.
Done using Sketch and FramerJS
Learning From Failures
The updated design was rolled out to a small percentage (1%) of users and our metrics were all at or above the expected levels.
However after rolling out to a larger percentage of users, our resume conversion rate started to drop.
Heatmaps even indicated that users were more likely to interact with the "Click to Browse" link opposed to drag and drop events fired seen in Google Analytics.
Users unanimously showed interest and interacted with drag and drop with ease during in person and unmoderated testing. Out in the wild though the interaction proved unsuccessful.
Pivoting on the idea we scaled back the process of the call to action for posting a resume.
Showing both the value of qualitative and quantitative testing being able to quickly learn and pivot from failures.
The Outcome
In the end we were able to not only recover the dropping conversion rate, but were able to improve resume conversions by 200%.
While other metrics such as registrations and applications were improved by 12%-25%, and bounce and exit rates decreased by 14%.