“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”
“Alexa, tell web design to add a background image related to nature”
“Alexa, tell web design to add a white border to my page”
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:
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.”
While waiting, I saw some other cool projects like: VR Dance Party, The Blind Date Club, and Helix.
Two hours later, I got the go-ahead to present again. This time rather than trying to speak the commands to Alexa, I typed them directly into the debug console and prayed for the best.
It went well, but definitely wasn’t anything to write home about.
So, you can understand that I was completely surprised when the judges announced Alexa Site had won.
A Look Behind the Curtain.
How it works
Alexa Site uses Amazon’s Alexa Skills Kit and a Node.js library I built to communicate with Squarespace’s APIs.
Alexa Site works as follows:
- A user makes a request for a change with Alexa
- Alexa breaks down the request into an Intent (the action the user want’s to preform e.g. align) and Slots (the parameters of the action e.g. left)
- Then it runs an associated Amazon Lambda Function (a short lived application instance)
- The Lambda Function runs and communicates with Squarespace to make the change.
- Lastly, the Lambda Function gives Alexa either a success or error response to speak.
Here’s what some of the code looks like:
First you list the intents you want Alexa to respond to
Then you supply a few sample commands a user might give.
And it’ll call methods like these:
And that’s the gist of it.
Going Forward.
What’s next for Alexa Site?
Some common questions I’ve gotten are:
- When can I use it?
- Are you going to release it for public use?
- Are you going to continue working on it?
- Are you going to open source it?
Honestly, I don’t know the answer to any of these questions.
On one hand, there are a bunch of things I’d love to do with it:
- Get it to work with all of the Squarespace themes, any style tweak, and any type of page
- Allow you to adjust styles outside of Squarespace’s set list
- Get it to work with non-Squarespace websites
On the other hand, there are a few of uncertainties:
- Squarespace’s API has no license agreement and could change at any time
- I’m not sure this a product that needs to exist
- I’m not sure I want to try my hand at a startup right now
If you want to know the answer to these questions as I figure them out you can follow my twitter: @chrisgco and my website: chrisgrant.co for updates.
If you’d like to help out feel free to shoot me an email at chris@chrisgrant.co, so that we can chat.
Special Thanks.
This was a team effort
Although I wrote the code for Alexa Site, I didn’t get to that stage by myself. I’d like to thank:
- Mark and Norman for advising me to not use Selenium (I should’ve listened)
- Dillon for practicing and pitching the project with me
- Andre for keeping me company during the late hours of the night and for introducing me to Dillon
- The Rob McCauley and Paul Cutsinger from the Alexa Team for helping me debug
- The stage crew at Tech Crunch for putting up with my pleading for another shot and for helping to resolve a host of technical issues
- The judges for seeing something in my project
- And finally my Mom for putting up with all of these shenanigans on Mother’s Day
