Taking inspiration from Pentagram.
Much has been said about the logo Pentagram designed for Hillary’s 2016 presidential campaign. First came the waves of dissent that critically questioned many aspects of it. It did not take long, however, for a wave of apologists to come and praise the logo’s simplicity and versatility.
It was the versatility of Hillary’s 2016 logo that ultimately spurred my interest in creating a profile picture generator. Celebrities like Katy Perry, Mariah Carey, and Michelle Kwan had already begun supporting the Hillary campaign with their own personalized H’s, but there was still not a way for most supporters to easily create their own.
So after Hillary’s 2016 campaign launch in New York I spent the next couple of days validating my idea, designing it, and finally launching it.
Wizard of Oz
Before immediately diving into designing the application, I wanted to first make sure that there was in fact demand for it, so I used the Wizard of Oz technique to evaluate my idea.
There had already been a few requests on Twitter for personalized logos, so I opened up Pixelmator, created a simple filter, and began fulfilling them. It did not take long, however, to become inundated with too many requests. Clearly the demand was there, so I moved forward with designing the actual service knowing full well that the site would become a success.
Designing with Hillary’s brand in mind.
To maintain consistency with Hillary’s current branding, I borrowed elements from the stylesheet on her own campaign website. From there I had access to her fonts, colors, and icons, which I could easily use like Lego bricks to build my own website.
In the end, I had broken up the application into four discrete steps that were incredibly easy to work with, both on desktop and on mobile allowing it to spread remarkably fast.
You can check out the final design at hillaryavatar.com.
Growing smarter with data.
Throughout the entire process I was particularly interested in how people used the site. Within Cloudinary I had the ability to quickly view the photos being uploaded, while within Google Analytics I could see in real time which step each person was on thanks to the event handlers I included on the page.
With this data, I had a better grasp of where people were coming from so I could adjust my social media marketing to fuel more visitors to the site and to make small tweaks to improve conversions. Additionally, I used the data to fine tune my placements of ads through A/B tests to subtly improve my click through rate.
— Michael Bierut (@michaelbierut) June 17, 2015
My 15 minutes of fame.
Within the first day, the site had gone viral on both Twitter and Facebook. By the second, it had even spread to seedier places like 4chan, which The Next Web covered. Perhaps most exciting, however, was the fact that the tool had become a big hit within Hillary’s campaign headquarters in New York, and it got a mention by Michael Bierut himself.
While the success did not last forever, the experience was definitely a good one. Within a few days I got to experience everything from product validation to trying to keep a wildly popular application alive on a less than stellar server.
In the process, I learned how to use new design techniques and tools like Cloudinary. Bust most importantly, I learned how to support a rapidly growing application with analytics and social media marketing.
As a solo project, I completed everything from the design of the app all the way to the implementation. Shout outs definitely have to go to Pentagram and Michael Bierut for coming up with the logo in the first place and for whoever I stole the site styles from on the Hillary 2016 website.
Performed Wizard of Oz product validation
Designed entire user flow
Integrated Cloudinary and cropper.js
Analyzed data within Google Analytics and Ad Sense
Fueled engagement with social media marketing