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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.