CharacterCounter Product Design Case Study: Scratching my Own Itch

Jason Crabtree
Feb 26 · 7 min read

Overview: What’s the Product?

CharacterCounter is a simple, lightweight tool to count how many characters you’ve entered into a simple textbox.

Focused on working as quickly as possible, CharacterCounter gets you the information you need exactly when you need it. Then, you can get back to what you were doing.

Having a precise, easy way to count the number of characters they’re using helps writers be measured and deliberate when they’re writing, editing and creating content. This can be useful for writing headlines, ad copy, tweets, email subject lines, designing interfaces or filling in web forms.

You can check it out at (just make sure you come back to finish the case study!)

You can also visit the Product Hunt launch if you’d like to see how that went at

GIF of CharacterCounter showing the 12 characters in the phrase Hello World!

CharacterCounter gives you the info you need when you need it, getting you back to what you were doing.

Project Overview, Lessons and Contributions:

This was a personal project built to scratch my own itch while .

As I worked on the design and development of this project I realised just how often I had previously been opening Google Docs for just this purpose. CharacterCounter is custom built for this use case, getting the job done quickly and effectively.

My design goals focused on speed, simplicity and clear visual hierarchy. People who use the tool should be able to open a new tab, type or copy in their content and instantly get the results they need before moving on.

This project was a joy to work on and is one of the first JavaScript tools I’ve conceived, designed and built from scratch. It was a ton of fun (and a great learning opportunity)

Design Challenge: What problem is being solved?

It can be time-consuming to quickly and accurately check how many characters are in a given section of writing. The importance of specific character counts is relevant in a number of situations; writing emails, article headlines, tweets, interface design and even filling in web forms.

Existing solutions like loading a google doc or other similar word processing tool can take 20–30 seconds, interrupting workflows and slowing you down.

Character Counter gives a quick and focused solution to this problem.

The ideal use-case (to complete in just a few seconds):

The Ideal Use-Case. 1. Realise Product Need, 2. Quickly Use Product, 3. Get back to Original Task!
  1. Load a new tab or page (or navigate to an existing tab!)
  2. Navigate to the CharacterCounter page URL
  3. Type or paste in text to confirm character number
  4. Return to original task without breaking flow state

Design Constraints: What Constraints Exist?

Because of the primary goal of speed, the final solution needs to be lightweight. This limits codebase size, features and complexity.

This speed constraint also restricts the use of third-party libraries such as (I want this to be AS fast as possible, every micro-second counts in the goal of avoiding flow-state disruption).


Research: User Research & Existing-Solutions

As a project primarily built to scratch my own itch — the research for this focused on my specific use case and needs. I would mostly be using the final product for interface design, writing article headlines, designing interface line-lengths and filling in web forms.

I started by exploring existing options. Surely I reasoned, a solution already existed. And, some did! But nothing quite fit.

Image of Right-Click Services AppleScript Function to Count Word and Characters
  1. The first solution I found was an . This created a system-wide function that enabled you to select text, right click and then be told the number of words and characters present. After some testing, I discovered that the script didn’t work in Figma (my main design tool — and one of the common use-case) and that drag selecting text, right-clicking and using the script itself was clunky and awkward.

Tweet requesting a MacOS MenuBar Character Counting App

2. After discounting the AppleScript solution, I explored the possibility of a MacOS Menu Bar App. When Google failed to produce results I turned to Twitter. Unfortunately, the lone heart proves my request for a new product didn’t go as viral as I might have hoped!


Eventually, I hacked together a solution. Perfect! Ship it. (I’m sure this is awful code, but I’m so proud it works!)

3. Finally, I decided to build the solution myself. Enter several (too many to admit) nights of copying and pasting JS from while trying to figure out how to A) connect JS to a textbox, and B) then count the number of characters present. Eventually, I hacked together a working solution. Perfect! Ship it.


Testing Usability: Version 1.0

The first version worked, in the sense that you could type text and it would load quickly. Unfortunately, usability fell over. I initially picked a Google Font. This caused page-delays while the font loaded. The font I chose (and quickly changed) was thin, making quick scanning of the relevant info difficult.

After a few weeks testing this out I realised the improvements I could achieve with a system font stack (using default computer system-level fonts) and strong visual hierarchy. This led to Version 2.0, where we are today.

The first version of CharacterCounter. Functional, but not pretty.

Plus, the first version also completely broke on mobile screens and narrow browser windows. Not ideal.


The Great Iteration: Incorporating Usability Lessons

After a few weeks using the original, hastily designed Version 1.0, it was time to make some changes. The focus would be on designing a minimal, well-spaced layout emphasising strong visual hierarchy to help identify key information.

The new design would incorporate a copy button to make usability easier — allowing any text to be quickly copied and carried away.

Different Iterations of Formatting/Layout and the Final Layout used to plan the HTML File

Presenting the Product: Final Polish

The final product is minimal, focused and fully responsive, working across mobile and desktop. It uses CSS Grid, Vanilla JS and loads the system fonts associated with your computer, preventing a delayed trip to load a font.

The page loads quickly and easily, a perfect addition to my workflow for writing, designing and general internet usage.

Hopefully, it’ll be helpful for others too 💯🥳

The Finished Product! The final image of Character Counter on Desktop and Mobile

I’ve even managed to include a small animation. The button interaction confirms the textbox content has been successfully copied.

GIF of the copy button in action, including the button label changing. Fancy!

Implementation: Technical launch and Implementation Details

This was the first project I’ve made using JavaScript (that wasn’t following a tutorial!). All in all, the CSS and HTML is solid — while the JS itself could definitely be improved in the future.

Key technical features:

  • The code is hosted on , while the page itself is deployed through . Netlify offers free domains — and a global CDN network to help with speed and performance.
  • Media queries have been used to make the page more usable on a mobile phone (including small screens such as iPhone SE’s).
  • The ‘Copy Text’ button dynamically changes when clicked — confirming the text has been copied.
  • The page automatically counts characters after each keyboard interaction, creating a smooth interaction experience.
  • Future technical improvements: The click to copy button doesn’t work on mobile and has been disabled. Something to fix!

Outcomes: Results vs. Goals

The speed results are the main outcomes I’m interested in. I aimed to build a fast, effective tool for my own workflow. This absolutely achieves that goal.

I can load a new tab (⌘ + T on Mac, Ctrl + T on Windows + Linux), type or paste in whatever I’m working on and get back to my original task within a few seconds — consistently and every time. No more strange, delayed google doc loading freezes (for this particular task at least!)

Pingdom Website Speed Test: Load time 452 ms

Lessons: Lessons Learnt

  1. It’s so cool to want a tool — and then just go and make it!
  2. This is the first JS thing I’ve done outside a tutorial. Honestly, I’m not even sure if I know how it works, but I hacked it together to achieve the goal I wanted (including the bells and whistles of the click to copy button, and the button text changing!)
  3. The goal of speed was absolutely met which feels very rewarding.
  4. The visual design and usability feel solid, I’ll happily load this multiple times a day as needed!

Overall, this was a great mini-project to hack on. Definitely a lovely sense of joy in creating your own solutions. For now, onwards to the next one!

PS. After publishing this I spoke with — a designer manager at Intercom. While chatting over coffee Kostya was kind enough to give me some feedback on how I could improve and refine the visual design of Character Counter.

The main feedback focused on simplifying typography. As a result, we’ve gone from 8 different slight colour/boldness/size variations (it sounds like so many said like that!) to 4 different variations. These changes have been updated in the images — so you get to see the final outcome! Enjoy.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade