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 https://charactercounter.netlify.com/ (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 Product Hunt: CharacterCounter
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 learning about typography ideal line-lengths.
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.
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):
- Load a new tab or page (or navigate to an existing tab!)
- Navigate to the CharacterCounter page URL
- Type or paste in text to confirm character number
- 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 Clipboard.JS (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.
- The first solution I found was an AppleScript hosted on GitHub. 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.
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 w3school tutorials 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.
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.
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 💯🥳
I’ve even managed to include a small animation. The button interaction confirms the textbox content has been successfully copied.
Implementation: Technical launch and Implementation Details
Key technical features:
- The code is hosted on GitHub, while the page itself is deployed through Netlify. 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!)
Lessons: Lessons Learnt
- It’s so cool to want a tool — and then just go and make it!
- 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!)
- The goal of speed was absolutely met which feels very rewarding.
- 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 Kostya Gorskiy — 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.