“Ok Alexa, design my website”

How I won the 2016 Tech Crunch Disrupt Hackathon

A tool should empower its user.

It should augment the human experience, making easy what is hard and possible what is not. Whether it be software or gardening scissors, the tool should meet a user’s expectations. And it shouldn’t force compliance with an arbitrary interaction model. In an ideal scenario, it should anticipate, understand, and act on a user’s desires. Tools like this will revolutionize industry in the same way that the assembly line did in the early 20th century.

As web designers our main task is to turn a client’s goals into a beautiful, intuitive, conversion optimized design. This process is easy enough when a client is able to communicate their concerns. Sometimes, however, a client’s vague comments like “I don’t like it” or “It looks aggressive” make our work more difficult. This is no fault of theirs. Clients don’t need to concern themselves with the specifics of web design, that’s our job.

The understanding of feedback is further inhibited by not being able to act on it immediately. Instead, we are left to try and remember hours after the fact what our meeting notes meant.

What if you could easily modify your design during a meeting and get immediate feedback on your work?

Well, you can.

It’s called Alexa Site

Alexa Site allows web designers to edit the visual design of their websites with simple voice commands.

This means that when your client says: “I don’t like how all of the text goes to the left,” you can say something like, “Alexa, tell web design to move the text to the center.” The change will take place instantly and Alexa will even reload the page.

Here are some examples of the other commands you can give Alexa Site:

“Alexa, tell web design to left align the text on the page”

Using Alexa Site to Left Align Text

“Alexa, tell web design to add a background image related to nature”

Using Alexa Site to Add a Background Image

“Alexa, tell web design to add a white border to my page”

Using Alexa Site to add a Page Border

You can watch a short demo of Alexa Site here:

The Backstory.

Here’s a Challenge: Build a Product in 24-Hours

Every year TechCrunch hosts Disrupt, an annual global conference centered on all things entrepreneurship. And the weekend before Disrupt they hold a Hackathon: a 24-hour competition where teams of developers compete by building new products and presenting them to a panel of judges. I’ve attended the Disrupt Hackathon every year since 2013 set on winning the grand prize but, this year was different.

I registered for a ticket and just showed up. No team. No ideas. And no intention of competing.

I began the event by making my rounds of the sponsors tables. A few piqued my interest, but none more than Amazon Alexa. The chance to build an A.I. powered project was just too good to pass up.

Unfortunately, this interest didn’t materialize into an actual project idea until around 7:00 PM (14 hours left). I decided to use Alexa and Selenium to control Squarespace. That way you could make a couple of utterances to completely change the design of your website.

I spent my first hour of work discovering that trying to use Selenium on Squarespace’s mostly JavaScript rendered interface is a nightmare. To get around that, I decided to skip Squarespace’s editor and communicate directly with their API. The only problem?

Squarespace has no publicly documented APIs. So my evening was spent pouring over screens like these:

Squarespace API Calls

Minified Squarespace Code

After two hours of this…

I got text alignment working.

Despite how little progress I made curiosity had gotten the better of me and I worked into the night. At this point entering the project into the competition wasn’t even on my radar. I just wanted to figure out how it all worked.

Fast forward eight more hours.

The project is done and entered. I’ve got a script for the pitch and someone to help me deliver it. Everything was perfect.

I took a deep breath, walked on stage, and started reciting my lines:

“Alexa, start web design”

(No response)

“Alexa, start web design”

(No response)

The next 45 seconds were filled with awkward attempts to get a response from Alexa. I tried to explain what would’ve happened had the stage wifi worked and then my time was up.

Once behind the curtains, I ran around begging various people to let me to present again. Eventually I got, “If there’s time at the end, you can go again.”