webhint.io

The Problem

The original site scanner was originally built to help detect issues with Internet Explorer compatibility and was built into the Microsoft Edge developer portal. The PM who owned the scanner wanted to completely separate the scanner from the Microsoft Edge brand in order to remove any sort of company bias from the scan results. The team wanted an unopinionated scanner that was built around common and accepted best practices for the web. The team ended up donating the project to The JS Foundation to help establish it as actually unopinionated and open source. This opened up the possibilities when it came to branding, a task I was happy to tackle.

Branding

webhint went through three name change due to other tooling with similar names. It’s first iteration was Sonar, then Sonarwhal, finally landing on webhint. We first landed on the name Sonar for a scanner which influenced the mascot of the site, Nellie the Narwhal. In my research, I found that narwhals have some of the strongest echolocation, natural sonar as it were, among sea creatures. The choice for a cute mascot was deliberate. I looked at other projects, like npmjs with their cute groundhog character and the Azure Advocates team with their raccoon illustrations. This cute factor would play into the rest of the user experience of the site further down the road. Despite the name changes, we kept Nellie so that she would be a familiar face to developers who had been using our website through the name changes.

webhint became the final name with the literal meaning that this a tool intended to give you hints about how to improve your website.

Competitive Analysis

Google’s Lighthouse product was our key competitor but at the time of our launch, they only had a tool built into the Chrome Developer Tools. I looked at other free pages like Web Page Test that checks for performance but our results were to span more categories than performance. I ended up looking at a variety of open source projects to get a feel for how the sites were constructed in terms of information architecture and page layout design. That, with input from the team, helped drive the initial user experience.

Sketches and Initial Wireframes

User Experience and Visual Design

The team had no funding for user research so we took feedback about UX via the GitHub repository. I followed established patterns for the layout of site and was making iterative updates consistently once the initial site launched. We could start to identity spots in the design, that in theory worked, but in practice, once live, weren’t ideal solutions.

One concern I had when building out the website was the fact that the site had to put people who wanted to run a scan into a queue to wait. Even though the project was owned by the JS Foundation, I was concerned because Microsoft employees were the main contributors putting out a new tool. I didn’t want the fact that users had to wait for the site scan to complete to bother them. Our solution was to put the users on a page that gave them a link they could return to later once their scan results were complete. On the page there was a picture of Nellie the Narwhal, working furiously away on her computer in the dark, concern and sweat dripping down her narwhal head, next to a headline that said “Nellie is working overtime right now” and an additional caption to let the user know what was happening.

Someone tweeted shortly after this implemented, “I wanted to be annoyed I had to wait for the scan, but I just felt bad for Nellie instead ☹.” This delighted me, as this was the exact response I was hoping for from a developer. Eventually, as the backend infrastructure of the site improved, we no longer needed to put users into a queue and this experience is absent from the current iteration of the website.

Nellie has become our star of the project, being re-imagined by an actual illustrator, while still maintaining the essence of my original designs, the team creates customs stickers for each conference the webhint team attends or speaks at. Nellie has been printed on socks and t-shirts, both items of swag flying out of the conference booths.

I have driven all the visual design and front-end development for the project since we started in 2017, providing art direction to a handful of design vendors when my time was prioritized elsewhere.