Notetaking App Help

Client: British Columbia Institute of Technology
Type: Student project
Contribution: Written content, web design, web development
Year: 2019
Tools: MadCap Flare, Caret, Sublime Text

This project is a responsive HTML5 help system for the Google Keep desktop web app.

View the Project

Why I Wrote, Designed, and Developed This Help System

I needed to enable users to easily find, understand, and act upon instructions and reference material when working with the Google Keep desktop web app.

How I Wrote This Help System

I wrote how-to guides and background information for working with Google Keep:

I divided each topic into its own webpage to simplify and streamline information delivery.
I chunked content with headings, lists, and note boxes so users can quickly locate and absorb the information they need.
I established a consistent structure for each topic:
- Headings identify each topic and subsection.
- Numbered lists highlight instructions.
- Each list item contains only one step.
- Supplementary information appears separate from the listed steps.
I directly addressed users to appeal to them personally.

How I Designed and Developed This Help System

I compiled and structured my content with MadCap Flare to produce an HTML5 help system:

I structured the table of contents to establish a logically organized and searchable help system.
I marked up all written content to semantically structure each help topic.
I configured style sheets to establish visually coherent and tidy help topics.
I hand-coded CSS and JavaScript to solve any design problems that were unsolvable in MadCap Flare.

What I'm Sharing with You

This help system is a student project that I built at the British Columbia Institute of Technology:

I produced a functioning HTML5 help system for a real-world product.
I omitted some product features because this project required exactly 10 topic pages.
This project is in no way affiliated with, sponsored by, endorsed by, nor authored by Google.