Over the past 14 years, LiveCareer has helped more than 10 million jobseekers, build stronger resumes, discover their career paths, interview with confidence, and boost their chances of finding the right job faster.
Reshaping a brand
Although Livecareer offered amazing resume building tools, it’s marketing materials and website were outdated in terms of design. I was hired to help reshape the website and breathe new life into its social media image and email marketing materials.
Original design:
Observations:
In general, there was a lack of consistency in the UI:
- The menu bar varied from page to page. This caused a sloppy user experience and generated a lack of trust in the website
- The iconography designs, use of colors and testimonial designs varied from page to page
The homepage had an enormous header image that took up too much retail space, pushing valuable content below the fold, and the image itself did not feel authentic or natural, much like most of the imagery used through the site.
Original design:
There was a lack of typographic hierarchy
Many interior pages displayed nothing but seemingly endless lists of job titles. Although this helped achieve some excellent SEO rankings, it hurt the user experience, thus potentially limiting conversions
Many of the resumes displayed were low resolution and did not reflect the quality of the resumes that the company offered through it’s builder
Proposed solutions and final UI
I studied the dashboard and products to explore what UI elements could be brought to the forefront to create a unified look and feel throughout the entire website.
I realized that there was going to be a lot of structural repetition. So I first broke the website down to its basic components. Then I created a modular design based on atomic design principles, so that assets could be repurposed, thus shortening the amount of dev work needed.
I shortened the height of the homepage image by swapping it out with one that felt more authentic. I also ensured that the quality of the resumes displayed was high, and that the iconography was consistent in both stroke width and color. The menu header was tightened up so it took up less space. I also made sure that it was the same throughout the entire website.
The slanted square shape that derived from the logo was applied on the homepage image, testimonial images and other selected header and social media imagery as well to help push the brand identity and hopefully make it stand out from the already crowded resume builder market.
Animation proposed for landing pages:
Illustrations and Social Media
Seeing that the color orange, alongside the slanted square shape could help differentiate the brand, I decided to apply both to social imagery and illustrations as well. Due to the heavy volume of posts needed on a weekly basis and time constraints, I opted on searching for a stock library we could use. I landed on an editorial style library of illustrations that could also be used for infographics and header imagery on the site.
