webhint.io | 2017-present

creative directions, user experience, visual design, front-end development

View Live Site

webhint is an open source project that continues to be improved each month. This is one of those special projects that will never truly be finished as long as the community continues to use it.

In 2017, the Microsoft Edge team started on the webhint project. There was an old website scanner that was living on dev.microsoftedge.com, where developers could scan their website and check for issues with Internet Explorer. Webhint is the next iteration of that project but much larger and much more inclusive with what it scans for.

Webhint is a linting tool that scans any public URL and will give developers hints on how to improve their website with best practices and standards.

I have driven all the visual design for the project since we started in 2017. Before we changed the name to webhint, the tool’s name was Sonar, which helped determine our logo and accompanying imagery. Sonar is similar to echolocation, and narwhals have some of the strongest echolocation, which is why our logo and mascot is a narwhal named Nellie.

I wanted webhint to have a playful element to it, largely in part because the project is mostly worked on by Microsoft employees despite being an open-source project. It is often labeled as owned by Microsoft and I knew that there would be people who would use it, and if something went wrong with the scanner, there would be frustrated users who would roll their eyes and close the website window, grumbling about Microsoft. I wanted to try and offset some of that frustration with Nellie’s design.

My choice with Nellie’s design was validated when a user tweeted to me, “I wanted to be upset that I had to wait [in a digital line] for my scan to complete, but then I felt bad for Nellie.”

If users are popped into a queue because there are too many scans trying to take place at once, they see a screen with a stressed Nellie the Narwhal, sitting in the dark in front of a computer with a message that says “Nellie is working overtime” and explains why the user needs to wait and what they can do while they wait for their results.

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.

As of the beginning of 2019, the webhint team is looking at improving the website and I will be leading user experience and visual updates for those improvements.