Two stakeholders within CPI approached me about a possible redesign of the CPI website. Multiple people within the company complained about how it represents the company and how frustrating it is to communicate information effectively to customers. This case study is my response to their frustrations.
The process
With time constraints, a process was created to determine what would be most beneficial to the website redesign in the short time allotted. I created this process by analyzing impact vs. effort. This is a result of that analysis:
The before
The original CPI site was designed in WordPress and contains the following:
A lot of text
Outdated information
False descriptions of services
Few examples of work
A pop-up chatbot that scares us all
Many forms and buttons fishing for emails
A lack of hierarchy
A lack of any discernable user flow
At a glance, it is easy to see that the entire site is overwhelming. It encourages viewers to move onto another site and look for another marketing team rather than pick through the information to figure out what is relevant to them. It appeared as a scam or cash grab to people informally surveyed. The emphasis on money and getting email addresses seemed prioritized over information for deciding whether to work with the company and understanding how the company could help their business succeed. In order to redesign the website while avoiding the missteps above, I will be looking at potential customers, current customers, and employees, analyzing their needs, wants, and pain points.
The journey
I started with three journey maps: the seeker, the potential customer, and the current customer. These allowed me to take stock of what is and isn't working and gain a better understanding of the website as it currently stands, learning from what has previously been done.
The stakeholders
The stakeholders in this case study are those who work at the company and have a say in how they would like the website to look. I conducted a stakeholder analysis, analyzing information from the common complaints and needs to find a website that can work for all CPI employees and customers.
The stakeholder’s priorities:
The analytics
As I was working with a tight budget, finding, recruiting, and interviewing those seeking a marketing team wasn't possible. So instead, I looked at the website's current analytics to deduce where people are dropping off and understand the reasons why. The organic search traffic had a bounce rate is 63%, which is very high, and the average session duration was 3 minutes. Some people would enter the site from a blog, and some would enter through specific marketing service pages. The bounce rate is higher on pages with more text, less hierarchy, and no discernable reason for existing beyond hitting more SEO keywords.
Here are the most visited pages, from the highest traffic to the lowest. That page's bounce rate is listed as well.
Home - 62%
Contact Us - 83%
Construction Marketing Blog - 62%
Content Marketing Services - 53%
Video Marketing Agency - 64%
Local SEO For Contractors - 87%
Contractor Sites Landing Pages Funnels - 87%
Email Marketing For Contractors - 82%
Websites For Construction - 75%
What we see is the standard entrance pages, home, content marketing services, and video marketing agency have slightly lower bounce rates as people are willing to click on a tab to see if there is better information on another page. However, most visitors don't make it past three pages before giving up, as they haven't found the information they were looking for.
The risks and constraints
Before designing, I weighed the risks and constraints and made plans for navigating them.
The problem statement
How might we provide potential and current customers with the information they need to make an informed decision about whether to work with us?
The goals: Give clients a clear idea of…
The flow
Here is a diagram of the proposed primary website flow. The content flow of the page is placed below each page title.
The sketches
Here are the final sketches after brainstorming ideas for laying out the content.
Low Fidelity
I designed the homepage to display a brief overview of CPI so someone viewing the website for the first time knows what CPI is and what they do. The overview also orients them so they can effectively decide what to click on next. It is simplified so returning visitors can quickly find what they are looking for and don't have to sift through information that isn't relevant to them.
The marketing services pages truly get into what working with CPI would look like. I combined the digital pages from the original (SEO, Funnels, Websites, and Email Marketing) into one page. I formatted the content marketing page to focus more on our print content marketing, which is a large part of the business. As the part of the business that is growing most rapidly is video, video marketing also needs to have its own page. This reorganization effectively emphasizes CPI's standard services and leaves room for any ideas they may have instead of detailing everything into an extensive yet inflexible and specific services list.
I outlined examples of our work and the basic processes we use to create them and prioritized them in the layout. The comprehensive pricing information and options were taken out, as each project is different, and the list was frustratingly inaccurate and inflexible.
The blog was the area that had the fewest changes to it. The blog is vital to the SEO team, and it makes the website seem fresh and up-to-date, showing that we add content regularly. However, the blog should shift to discussing marketing techniques for construction, and on-the-job stories from our journalists and photographers, as it would give people looking at the blog a clear idea of who we are and what we believe when it comes to marketing, construction, and business.
High Fidelity
I designed the homepage to be image-based, with few words directing the viewer further into the website. Included is a short blurb for an about-us. A shortened overview of the process gives viewers the information they need to get started and continue looking for the specific marketing service they are interested in. The imagery was changed to be all designed/photographed in-house, with priority given to the work that we have done for clients, showcasing our team's talents and design style with a glance.
I remade the contact page into one cohesive unit instead of only the header and footer with no content. The ways to contact the company and an image of the office location help establish CPI as a legitimate company for someone looking for a marketing team.
We removed the content we did not make from our marketing services pages and changed the imagery, videos, and text to be written, photographed, and designed in-house. This change represented the company better and created a cohesive style throughout the pages. The client work included on the marketing services pages highlights our key services, magazines, videos, and digital marketing (social media, emails, blogs).
Customers frequently needed clarification on our marketing process and help to understand what marketing with CPI would look like. CPI has specific processes we follow with few exceptions, so to remedy this, I placed illustrations of them on their respective pages to accompany the examples of work and short descriptions.
A contact form is placed at the bottom of every page, so it is easily accessible anywhere on the website but not so prominent it feels like viewers are pressured with sales tactics. This change in contact form gives a feeling of power back to potential customers to make decisions that will best benefit them and their companies.
On the blog overview page, I removed the excessive text in the description, which repeated itself, and prioritized three things 1. The images 2. The title, and 3. The main tag. These changes created more effective skimming through the blog titles. The blog was reformatted to be neater, removing the excessive tags and repeated information.
I removed the contact information as virtually all visitors that enter directly to the blog aren't potential customers, they are just looking for information on a topic, and potential customers don't land on the blog as an end page. The contact information is available at the top of the page and any other page they may click.
The next steps
Continue testing the site, looking for where potential drop-offs may occur, and conduct a heuristic analysis to find usability issues.
Check the developed website against WCAG and general accessibility best practices.
Determine if a simplified pricing guide can be added to the website for transparency or if pricing is too variable and constantly changing.
Change blog content over time from exclusively content we have made for clients to incorporating content about marketing, about us, and our process.
Add employee information, such as names, roles, and a quick about, to the homepage or a dedicated "Who we are" section.
The Website
The end result of the website after I ran the development in WordPress, incorporated visual design tweaks, ran user tests, and and incorporated stakeholder feedback.
The lessons
Learn from what has been done before
Consider all the use cases
Show, don't tell
A user shouldn't ever feel lost or feel like they are searching