HotDocs Help Site.

Landing pages linking to the HotDocs knowledge base

Project Overview

The HotDocs Help website provides customers with links to the HotDocs knowledge base, encompassing documentation for HotDocs Advance, Core Assembly Service, Author, and Classic products.

As a Technical Writer at CARET Ltd, I suggested redesigning and developing the existing HotDocs Help website to reduce lengthy navigation paths and improve the overall user experience.

  • One page scrollable website

  • Maintainence of hard-coded URLs

  • Visual consistency with knowledge base

Project Requirements

Year

Duration

9 months

2023

Technology

HTML / CSS / JavaScript

Note: This project is in review under the employment of CARET Ltd. In this case, the project code is the confidential in nature.

Please see the available TEST site.

Project Aim

This project aims to design and develop a new and improved website which provides users of HotDocs products with an easy-to-use point of access to the HotDocs knowledge base.

The existing website was outdated, required multiple clicks to find information, and was not mobile-responsive.

Current site to be superseded - help.hotdocs.com

UX Research

Information was gathered to highlight some of the foundational issues noticed by team members as well as customers. For example, issues that had been raised through the support team. Some of the issues raised by customers were directly related to the contents of the knowledge base and not to the website’s landing pages. However, these comments were considered and added to the documentation team’s backlog.

In addition to data collected from team members, interviews were conducted with existing customers to help support this information and gain further insights. These interviews were conducted with primary users like integration and site administrators who would likely be searching for documentation regularly to complete tasks.

This enabled me to identify some of the features that were not used such as the navigation menu in the header. As the links to documentation were provided in the main body of the pages, the header navigation became a redundant feature.

Wireframing

Having collected information from users of the website and providing a comparison with the feedback from the internal HotDocs teams, I began wireframing. I designed a one-page layout, categorising the links by product overview, release notes, installation and admin guides, user guides, and API guides.

Participants highlighted that a feedback section would be useful to provide feedback on documentation. This was an existing feature of the previous website, however, the page was not highly visible. To counteract this, I designed a contact form section, including fields for the document in question and an area where they can upload images.

Wireframe redesign of help.hotdocs.com landing page, from website header section

Desktop Layout

Mobile Layout

Style Guide

Following the research stage, I selected a font and kept the colour scheme in line with the HotDocs branding. Alternative HotDocs colours were required due to issues with appropriate contrast ratios.

Colour Palette

Primary
GreyScale

#F6F7F8

#263238

#CFE4F8

#0D47A1

#90CAF9

Typography

Font: Roboto Medium 500

Font: Roboto Regular 400

Branding

Buttons

Font colour #263238 / Background colour #CFE4F8

Font colour #F6F7F8 / Background colour #0D47A1