WordPress Website Design for a Resume Consultant: A Case Study

Summary: I designed and developed a WordPress website for a resume consultant so she could demonstrate her knowledge of how to create high-impact resumes for information technology (IT) professionals.

By Derek Chiodo

View The Final Design Images

Use the links below to see a larger version of each image. View the live website at: https://www.itresumetips.com

The rest of this page will discuss my strategy for designing these pages.

About The Product

ITResumeTips.com is a website that provides tips, examples, and best practices to help information technology professionals create their own resumes.

The Problem

My Client Wasn’t Demonstrating Her Expertise or Generating Leads

This consultant’s previous website was failing to generate leads, in part because it didn’t adequately showcase her expertise. She needed a website on which she could provide tips, best practices, and examples and that would allow visitors to ask their questions for free. This would not only provide value to the visitors but would also enable her to build relationships with her audience, leading to more income from consulting services. It would be a win-win both for her and her site visitors.

My Role

I was the UX website designer and developer for this project and communicated directly with the site owner. My responsibilities were to:

  • Design a website that would showcase the consultant’s knowledge and expertise in creating high-impact resumes for IT professionals.
  • Develop the website in a way that visitors can easily find and sort through the consultant’s tips, best practices, and PDF resume examples that apply to the visitors’ own particular job roles.
  • Provide a way for visitors to ask the consultant their resume questions and receive an answer.

The Solution

I chose the following solutions based on the project’s requirements, research-based UX guidelines, and various design principles.

Website Design and Development Using WordPress

I first met with this consultant to discuss her requirements. She provided a PowerPoint presentation with a mockup of the web site. I was able to take this mockup and expand on it, revise the layout, and offer my UX design suggestions.

I used Figma to design the home page, style guide, and information architecture. After my client approved the design, I started developing the website in WordPress on a staging server.

I chose WordPress because it is a proven and reliable website building platform that powers 43% of all websites.1 Most importantly, WordPress allows for seamless ongoing management of content and design at scale. I also knew there were plugins for the features this website needed.

Home Page

A home page should introduce visitors to the website, the company, and its offerings. For this client, her offering was free content that helps IT professionals create their own resumes. Giving away the content in this way would be an effective way to display the consultant’s expertise and also provoke interest in her consulting services.

  • Have a strong value proposition - At the top of the home page, in the "hero" area, I wrote a value proposition that tells a visitor what this website is about, who it's for, why it's important, and what the visitor will gain from the website. The headline part of the value proposition is a clear and concise benefit, and the supporting paragraphs elaborate.
  • Make options clear - When a visitor arrives on the home page, is it clear what they can do on this website and why? Are high-priority tasks emphasized? I accomplished these aims by prominently displaying five links boxes, one for each key page of the website. From this newly designed home page, then, a visitor can see all their navigation options as well as recent website updates.
  • Build trust - It's important to build trust with visitors if you will expect them to invest time reading your website. I accomplished this in the consultant’s case by including on the home page her bio, which explains why her resume tips are reliable. I also provided links to all the free information she offers.

Don't leave a visitor wondering about your website. Make it clear what they can do on your website and why they should do it.

Resume Questions *Listing Page*

The goal of this page is to list all past questions received and answered and to provide a space for visitors to ask new questions

  • List past questions - This page displays all the past questions the consultant has received from website visitors. Since many people have similar questions, this page is a great way to provide value to those visitors.
  • Let visitor ask questions - My client wanted visitors to be able to ask their question on the website. I fulfilled this request by adding a contact form to the sidebar. I've detailed below (under the heading "Build an Ask-a-Question Form") how I accomplished this.

Resume Questions *Q&A Page*

The goal of each of these pages is to display a particular question that a person has asked, along with the answer. I designed this page to use labels and formatting that clearly distinguish the "Question" from the "Answer" (e.g., I used different fonts for the question and the answer). I also included the "Ask Your Resume Question" form on this page.

Resume Examples *Listing Page*

The goal of this page is to list resume examples according to different job roles. In addition to the job role, I've also displayed a short summary of the example. On the left sidebar is a filter option allowing a visitor to display results for a specific job role.

Resume Examples *PDF Example Page*

The goal of this page is to display the PDF resume example that a visitor selects, while still blocking any download of the PDF and simultaneously keeping the visitor on the page. This can be difficult since PDFs usually open in a new window that takes the visitor away from the website. I've described how I accomplished this below under the heading "Embed PDF in WordPress Page."

Career Storytelling *Listing Page*

The goal of this page is to show visitors how storytelling can add dimension and depth to their resume. This page lists all the storytelling examples available, along with an option to filter these examples by job role.

Career Storytelling *Example Page*

The goal of this page is to provide visitors with an example of compelling storytelling.

Branding Statements *Listing Page*

The goal of this page is to offer various branding statements, which are statements that can be used on resumes to help individuals differentiate themselves from competitors and stand out from the crowd. The visitor can filter these branding statements by job role.

Branding Statements *Example Page*

The goal of this page is show how a branding statement may evolve based on feedback from the consultant. I've used headings to show the difference between the three examples: (A) Original, (B) Reworked, and C (Revised). Different fonts are used to distinguish between the introductory words and the actual example words.

Build an "Ask-a-Question" Form

One of the website requirements my client wanted was the ability for visitors to send her their resume questions and get her advice.

To accomplish this, I set up a web form in a sidebar. Since visitors go to this page to look at other people's questions, it made sense to include this web form in case the visitor has their own question.

The web form sets expectations for the visitor by letting the visitor know what information the consultant needs (via form fields), when she will respond, and how the visitor will receive their answer.

Once the visitor's question is submitted, the consultant receives an email containing the question. Since emails get lost and are sometimes unreliable, the visitor's question is also stored in the website's WordPress admin area. This way, my client can log in at any time and see every question that has been submitted via the web form.

Embed PDF in WordPress Page

My client wanted to prevent her resume example PDFs from being downloaded but also make them easy to view while staying within the website. This was a concern because, typically, a PDF will open in a new window, taking the visitor away from the website.

To accomplish my client's requirements, I embedded the PDF within the page so a visitor can easily scroll through and read the example without leaving the website. This embedded PDF is also mobile friendly.

Use Faceted Search and Filtering

Because the number of resume examples on the site will continue to grow, and because each visitor's job role is different, it was important to offer the ability to filter examples by job role so that a visitor can quickly find the examples that apply to them.

I achieved this by creating custom WordPress facets and filters that a person can use to filter by job role.

I designed it such that every time a filter is selected, it is clear which results are being displayed (in red text) so the visitor doesn't get disorientated and frustrated.

Add a Better WordPress Search Function

Because this website contains a lot of content and examples, it was important to have a reliable search box. The native WordPress search function doesn't do a great job. We needed a better search option because of the different types of content, and because I used custom fields and custom post types developing this website, which aren't searchable using the native WordPress function.

I achieved the goal of having a reliable search feature by using a plugin to create a custom search function. This improved the native WordPress search function by enabling it to:

  • search custom fields,
  • search document content, and
  • search custom post types and taxonomies.

The Outcome

These are the outcomes this consultant gained from her new website.

A Place to Demonstrate Her Knowledge

This consultant can now post her tips and provide examples of good IT resumes, thus demonstrating her expert knowledge of the topic.

Ability to Generate Leads

Since visitors gain value from the consultant’s free tips, examples, and answers to their questions, they are more likely to contact her about paid consulting.

Easier Website Management

Using WordPress makes it easy to manage content and design changes at scale. This consultant can now easily post new articles, examples, and more. I've developed this website in a way that is "point and click" so that a person who is not a web designer can manage it.

Challenges

Embedding PDFs that Are Easy To Use

Embedding and protecting PDFs in a WordPress page while still making the page easy to read on desktop and mobile devices can be tricky. This was a challenge that I surmounted by using the right plugin.

Observations

Give Visitors a Way to Search and Filter Information

Understand your audience and their needs. In this case, it's likely most people will have different IT job roles; therefore, not all the tips and examples on the site would apply to them. Rather than make the visitor sift through the irrelevant information, I included both an improved search function and a filter function that makes it easy for them to find information regarding their specific job role.

Make Text Scannable

As noted above, for the examples I've used either headings, colors, or different fonts to make the pages scannable and easily consumable. Without this, a visitor could have a hard time understanding the different components and the purpose of a particular web page.

References

1 - https://wordpress.org/about/features/