FreeDoc Website Redesign

A comprehensive website redesign project

Context

Summer 2020

Systems Experience Designer at FreeDoc

Informational Sales Website

Sole Designer/Developer

Skills

Competitive Analysis

Info Architecture

Wireframing

Visual Design

Tools

Pen & Paper

WordPress

GIMP

Inkscape

Background & Approach

Project Background

For my first project in my role at FreeDoc as Systems Experience Designer, I was asked to completely modernize and revamp the company’s informational sales website.

The existing website, hastily built over five years ago, suffered from a number of fundamental problems. Due to budget and schedule constraints at the time, little planning was put into creating the structure, content, and visual appearance of the site.

Compared to competitors’ websites, the existing FreeDoc site was hard to navigate, lacked deeper-level product information, and looked unorganized and unprofessional. 

Before COVID19, other sales channels made up for deficits in the site, but creating a convincing site was crucial for the company’s success in the new business environment.

Project Goal

The project’s goal was straightforward: Create a more convincing website to generate more inbound calls and emails from potential customers.

Constraints & Challenges

As a small company in a tough business environment, the project came with quite a few constraints.

As the only employee in the company trained in design and website development, I would be the sole person involved in the design and development stages, with others only contributing to content creation.

I would also need to create the site using an existing WordPress installation, a platform I had no prior experience on.

Finally, limited time could be spent on the project, with a target of only three 30-hour weeks total to complete both the design and development phases.

Design Approach

With a lot of work needing to be done, I knew I would need to be diligent in allocating my time. I decided that my first task would be to complete an expert analysis of the current site to see what could be reused.

Because purpose of the new site would be very similar to that of the company’s competitors, I would then spend the remainder of my research time performing competitive analyses on the company’s top three competitors’ websites to find methodologies and design patterns that could be used on the new company site.

Once the research was complete, I would execute three design and development cycles, completing approximately a third of the site each cycle.

After selecting the pages to work on at the beginning of the cycle, I would create rough wireframes for each page that I would then use to create the page within WordPress.

As I would be serving as both the initial designer and the developer, the wireframes would serve as rough approximations rather than complete visual mockups.

Research

Current FreeDoc.com Expert Analysis

I began the research phase by completing a complete expert analysis of the entire existing FreeDoc website. Going page by page, I took screenshots and wrote notes about all the issues that I saw.

The site suffered from quite a few visual design issues and inconsistencies, creating an unprofessional appearance. A separate but related issue was that the site was not designed to be responsive and suffered major usability issues on mobile devices.

An example of the poor and inconsistent visual design found on the old website
An example of the poor and inconsistent visual design found on the old website

The next major issue I identified was poor information architecture. The top-level headings on the site didn’t adequately describe the content that belonged beneath them, and many pages later added to the site after original development were improperly forced into existing categories.

One of the main navigation headings featuring an odd variety of pages
One of the main navigation headings featuring an odd variety of pages

Finally, and perhaps most concerningly, the site overall lacked substantial content of any kind. Users browsing the site would struggle to get even a surface-level understand of the products and services offered by FreeDoc, making the probably of potential customers reaching out very low.

The info page for one of the company's main products, with little information content
The info page for one of the company's main products, with little information content

Competitive Analysis

With the expert analysis complete and a poor prognosis for reusing elements and content from the existing site, I knew I would need to rely heavily on insights from FreeDoc’s competitors’ sites to quickly get the site up to modern day standards.

Although I would have liked the time and resources to conduct my own primary research to exceed the competitors’ designs, I knew early on this wouldn’t be possible given the constraints.

Using a similar methodology to the one I used to conduct the expert analysis, I examined three competitor sites page by page, taking screenshots and notes as I went along. I would use these in my final research report.

Research Report & Key Findings

My expert analysis and all three competitors’ sites helped to provide valuable insights I would later use to design the new FreeDoc website. I used the screenshots and notes to generate a research report that would help me transition from the research phase to the design & development phase.

Below is a heavily summarized version of the research report I created:

  • Competitors seemed to consistently divide their site into a solutions section and an about us section. Their top-level navigation also reflected this structure.
  • Several competitors had a separate technical support section.
  • Each competitor also had a clear call to action at the bottom of each page.
  • One competitor had an effective product comparison table for the different versions of a particular product.

In addition to these more prominent aspects, I gained a lot of insight into content strategy and design patterns that I would use to help design the FreeDoc site.

Design & Development

Information Architecture

In preparation for the rest of the design phase, I first crafted a complete information architecture diagram/sitemap to help fix the site’s structural issues.

The site would have six main top-level pages: the home page, a solutions directory page, a resources directory page, a dedicated support page, an about us page (with linked subpages), and a dedicated contact us page.

Under the solutions directory would be individual sales pages for each product and service offered.

Under the resources directory page would be a variety of helpful resources provided by FreeDoc.


IA Diagram/Sitemap

Home

Solutions

  • Laserfiche
  • FileBound
  • ECM Comparison
  • FreeDoc Capture & Conversion
  • Laserfiche Capture
  • FileBound Capture
  • PSICapture
  • Our Consultants
  • Our Consulting Work

Resources

  • FreeDoc Winter Records Fourm
  • Webinars
  • Blog
  • Case Studies
  • WA State Archives

Support

About Us

  • Our Leadership
  • Hopelink Food Drive

Contact Us

Design & Development Sprint Format

To efficiently wireframe and build the WordPress site, I would divide the site into three design & development cycles. This would help prevent burnout in either task and help me iterate future designs based on my development experiences.

Sprint 1: Home Page & Top-Level Pages

Home
For the home page, I wanted to create a quick and easily skimmable landing screen that would show information to highlight the experience and customer satisfaction at FreeDoc. A compact solutions directory is present at the bottom of the page to guide users to their informational destination.

An example of the old FreeDoc homepage
An example of the old FreeDoc homepage
The top of the new homepage, featuring skimmable statistics to encourage further reading
The top of the new homepage, featuring skimmable statistics to encourage further reading
Quotes are used further down on the page to highlight customer satisfaction
Quotes are used further down on the page to highlight customer satisfaction

Solutions Directory
The solutions directory page provides a unified way for users to get to the information page that best fits their needs. A link to every information solution subpage on the site is present on this page.

Resources Directory
Facing a unique challenge unifying various resources under a single section, I chose to use a 3×2 image overlay grid to act as a directory, using images to illustrate the content within each subpage.

Support
I created the support page to provide resources and a contact form to current FreeDoc customers. The page also helps demonstrate the company’s commitment to ongoing customer support to potential customers.

About Us
Hoping to personalize the company, I designed the about page with a short elevator pitch and timeline, a list of company values, and links to more in-depth subpages featuring leadership bios and philanthropic efforts.

A old timeline on the original About page
A old timeline on the original About page
A sketch of the new About page (timeline & bios)
A sketch of the new About page (timeline & bios)
A new, condensed timeline with cleaner formatting and more significant events
A new, condensed timeline with cleaner formatting and more significant events

Contact Us
The contact us page provides various contact methods, including a customized form I created that would route the submission to the most appropriate salesperson.

The old contact form
The old contact form
The new contact form, using a newly-installed plugin with more flexible options
The new contact form, using a newly-installed plugin with more flexible options

Sprint 2: Specialty Pages

ECM Comparison
The ECM comparison page is designed to compare the different systems sold by the company. I created the page as a comparison table after viewing a similar page on a competitor’s site which seemed to convey a lot of information in a clean format.

The newly created product comparison table
The newly created product comparison table

FreeDoc Winter Records Forum
I designed the page detailing the annual records forum to explain the basics of the conference, followed by a few testimonials to help convey its value. A shorter section detailing the previous winter forum gives users a better idea of what to expect.

The old Winter Forum info page
The old Winter Forum info page
The updated page featuring cleaner formatting
The updated page featuring cleaner formatting

Webinars/Blog/Case Studies
The webinars/blog/case studies pages were all designed to use WordPress’s built-in blog post display widget so that each type of content could be posted as a blog post.

An old webinars detail page
An old webinars detail page
The updated page featuring a more readable layout
The updated page featuring a more readable layout

WA State Archives
I retained the general format of the existing WA State Archives page. The page features a short description of the organization, links to helpful pages, and a section at the bottom that allows users to view helpful resources.

The new WA SOS resources page layout
The new WA SOS resources page layout

Hopelink Food Drive
I also retained the general format of the existing Hopelink Food Drive page. The page shows images from the food drive, a few short paragraphs about the company’s involvement, and a link to donate to the food bank.

Sprint 3: General Pages

Bio Pages (Our Leadership & Our Consultants)
I created the Our Leadership & Our Consultants pages with a similar standardized format in mind. A picture on the left side of each bio puts a face to the name, creating a more emotional connection. Bullet points highlight the employee’s most notable accomplishments in a quickly skimmable format, and a longer paragraph bio goes into more detail. Contact buttons to right provide a clear call-to-action.

An example of an old bio
An example of an old bio
A sketch of the new layout
A sketch of the new layout
An example of the new layout format
An example of the new layout format

Product Pages Template
The product pages template I designed was created to be used in a variety of contexts to provide information about the products and services sold by the company.

The top header section, with the product/service name, logo, and a description, is designed to draw users into reading the main content and give them an idea of what it is the product/service does.

Next are three side-by-side panels designed as bullet points to convey some of the highlights of the product/service.

The bulk of the information is contained within a customizable combination of left-right panels featuring either a short list of bullet points or a short paragraph, combined with a relevant image.

Finally, at the bottom of the page is a list of links to other pages on the site, a newsletter signup form, and a call to action leading to the contact us.

An old product page for one of the company's products
An old product page for one of the company's products
A sketch of part of the new template
A sketch of part of the new template
The top of a new product information page
The top of a new product information page
Further down on the same page, with an example of the information sections used widely on the product pages
Further down on the same page, with an example of the information sections used widely on the product pages

Results & Reflection

Overall I’m satisfied with how the whole project turned out. The new site is visually much cleaner than the old site and does a much better job conveying information about the products.

Google Search rankings for the site as a whole increased dramatically. Results for critical keywords jumped as much as 40 places, bringing the FreeDoc website near or onto the first page of results. An increase in the number of users and the time spent on site was observed as well.

Given more time and resources, I would have liked to do more primary research to better determine the factors potential ECM purchasers use to make their decisions. By doing so, I could make the information gathering process even easier for them, increasing sales.

I also would have spent more time before wireframing the first part of the site learning more about WordPress and the layout tools it offers. By understanding what was and wasn’t possible from the start, I would have spent less time translating from wireframe to finished page.

Even so, the new website I designed provided a base for FreeDoc to anchor its new online presence. Combined with a new social media and digital marketing strategy, the company is well on its way to a modern digital presence.