Online Manual

screen in a mac mockup

Created for

The ACFE

Completed

2018

What I did

  • UX/UI
  • web design + development

Tools

  • Sketch
  • HTML + CSS
  • WordPress

attentionThis project is proprietary to my workplace and requires payment to access so I will highlight the design process instead of showing detailed designs.

Background

The manual this project is based on is a reference tool used by anti-fraud professionals on the job/in the field and to study for their Certified Fraud Examiner (CFE) credential. It is often used in conjunction with the CFE Exam Prep Course. The manual currently exists only in print and as a PDF.

Problem

Because the manual currently exists only in print and as a PDF, it is not user friendly for using on the go, or as a study tool. When used with the CFE Exam Prep Course, individual questions reference locations in the manual but there is no way to automatically click through to that location (deep linking). Additionally, relevant multimedia resources can’t be incorporated into the information. Finally, a recent increase in membership dues presents an opportunity where providing more value to members is a top priority.

Requirements

  • Can be updated by research team (non-coders)
  • Users can toggle between two editions: U.S. and International
  • Duplicated (and updated) year over year
  • Search functionality
  • Supports images and videos
  • Requires purchase to access
  • Subscription option

Proposed solution

Make the manual into a website, or online manual, using WordPress. A website would be a more convenient tool for users, serve as a member benefit, as well as a revenue-generating opportunity. WordPress is the preferred choice because it's free, the set-up is easy/quick time to market, and the content team can easily update it.

Comparison Table of old method vs proposed
Navigation considerations

The navigation is a pillar of the online manual. This manual contains quite a bit of information so creating an easy to use navigation was paramount. The navigation should serve as a guide of where the user is within the manual. Also, it corresponds to the printed/PDF manual's organization. I sought inspiration from other online manuals/information centers such as Wikipedia or Facebook for developers.

side navigation
General design

I kept the overall design simple because this product really is all about the content. I used the ACFE's brand colors, and added in a dark green to differentiate content display modes. The header (and footer) change from dark blue to dark green if the user toggles from the U.S. content version to the International content version.

Blue and green header comparison

The header of the online manual in 2 different view states

Text formatting

Another consideration was the formatting of text. The content team has specific styling for different text headers in the printed/PDF manual and they wanted to bring in a system for styling them here. I established styling and configured a WordPress plugin to allow content inputters to simply highlight text and select the text header style they want from a dropdown list.

text header styles
Making it all work

Back-end developers set-up authentication and configured access to the online manual via our CRM. The user flow daigram below shows the two main ways users will access the manual.

user flow diagram

Validation

An email address for questions/concerns regarding the manual has been set up and can be found on the home/welcome page of the site. We anticipate being notified of potential bugs through that. 6 months after launch, we will survey users on its usefulness.

← back