“The Medium IS the Message”
When I was an Amazon Alexa Evangelist, I kept thinking: “I want to Alexa to play a larger role in my trainings, and I want my presentation to be voice-driven.” I was frustrated by having to deliver content in a rigid sequence. What if I wanted to vary the order? What if someone had a burning question? Without switching context or losing time, I wanted to be able to respond with the right slide at the right time, and then jump back to my place in the show.
I envisioned an experience, where I could say things to Alexa like: “go forward, go back, jump to the slide with the skill diagram, or find the slide with the purple cow”. By leveraging a framework called WebSlides, I was able to use the Alexa Skills Kit and my voice to drive the presentation.
How I Build It
As you can see in the diagram below, the primary use case, voice, uses the Alexa Skills Kit SDK (ASK) to trigger a Lambda function. Additionally, the arrow keys on the keyboard plus an IoT button/clicker are included as standard inputs.
I added keywords to the language model which correlate to specific slide numbers. In this way, I can say, for example: “Alexa, jump to the slide with the sales data” – passing the keywords “sales data” to my function code. The keywords are mapped to a slide number – which is then appended to the URL in my web presentation. At the same time, the URL is saved to Dynamo DB – allowing for a “single source of truth” or place to store the current slide number. In this way, I’ve set things up so I can say: “go next” or “go back” and Alexa knows the request is relative to the current slide number.
When I first joined the the Alexa team, explaining the process of skill building was hard because it involved multiple tools with disparate interfaces. We were missing the continuity of a single IDE, curriculum, and training methods.
WHAT I DELIVERED
-organized multiple agendas to meet the needs of diverse audiences
-built sample apps to showcase a range of APIs
-created step-by-step video tutorials
-published numerous skills
-provided regular feedback about developer UX and tools
Within my first 7 months, I trained thousands of developers how to build skills for Alexa. In fact, I was also the first person to introduce Alexa to the UK and Germany- which meant I could use my cultural awareness and linguistic abilities as well. Currently, I continue to use my UX design background and German language skills to inspire others to build skills for Alexa.
GIVE ‘EM A GO!
Fortune Cookie and Phone Booth are 2 of my best skills. (Available in English and German).
SMART HOME EXPERIENCE
I’m on a mission to connect everything in my home to voice. At first, I bought a few plugs, light bulbs, and LED strands, but was disappointed with the experience. Devices don’t talk to one another and are finicky about connecting to Alexa. Then there’s the process of locating reading glasses, unlocking the phone, and finding the right app to control a lightbulb. (Admittedly, all of of this would be much faster simply by flipping the switch!)
DISCOVERING BELKIN WEMO
While preparing for a recent hackathon in Munich, I learned about a popular library, “fauxmo”, which uses the Belkin Wemo protocol. This protocol is 100% compatible with Alexa devices and provides the key to controlling lights, fans, security cameras. . . virtually any home appliance with your voice.
MAKE YOUR OWN SYSTEM
I’ve written a short Home-Smart-Home” tutorial with detailed instructions on how to prototype your own system with an Elegoo Starter Kit, an ESP8266 module, and an Amazon Echo device.
Expanding upon this theme, the same techniques can be applied to IR devices . In fact, replacing the remote control with voice has several practical benefits. If you’re like me and have an LED strip installed behind the TV (or on the underside of a molding or table) — it’s in a difficult spot to reach with the remote control. But with a strategically placed breadboard and Alexa – the same LED strip is made easy to operate with voice.
When publishing mobile apps, games, or skills for Alexa – developers often lack the tools or design eye to produce good looking graphics. If they don’t have access to creative talent or a ready-made icon library, the lack of graphics can be a barrier to publishing. In order to facilitate efficient publishing to the Alexa skills store, I designed and built the Icon-Maker tool.
The idea was to create a free online tool so that developers could use it within a browser anywhere. Although there are a number of similar web-based tools with large icon libraries, sifting through all of the glyphs can be tedious and time consuming. Therefore one of the cornerstones of building the Icon-Maker, was creating a database and tagging each glyph with keywords and categories. This allowed me to implement search and filter functionality – which saves loads of time in terms of icon discovery. Another advantage was being able to add unique glyphs to the library as needed. Each time we publish new templates, there’s an opportunity to provide new icons that go with that particular theme. (Think “City Guide” and iconic landmarks such as the Space Needle, Empire State Building, etc.)
WHAT I DELIVERED
-Leveraged open source icon fonts to provide 650+ glyphs
-Built the tool using jQuery, CSS, HTML
-Created a database and assigned keywords and categories to each glyph
-Implemented category filter and keyword search to speed browsing/finding icons
-Added approximately 100 new icons (created them in Adobe Illustrator)
-Managed the review and approval processes
TRY IT OUT
BRINGING ALEXA PI TO LIFE
Recently, I created a new skill for Alexa and found the process easy and enjoyable- until I began testing in the simulator. Without the lights and feedback of a physical device, I felt severely limited in my understanding of voice interaction and the natural language experience.
Unwilling to spend $179.99, I invented my own Echo with the help of an online tutorial (https://github.com/amzn/alexa-avs-raspberry-pi/blob/master/README.md), and a handful of spare parts: Raspberry Pi 3, Logitech speaker, USB microphone, and a discarded whiskey bottle container.
Although the AVS tutorial led to a successful outcome in the technical sense (i.e., it yields a working “Alexa Pi”) – there was something missing. I needed more feedback – something that showed me the device was working. I also wanted a clear indication of when it was my turn to speak and when Alexa was about to say something.
VOICE & GESTURE
To be more precise, what was missing from the conversation were the usual tonal shades of color, facial expression, and gesture. To solve this problem I wanted to add a string of flexible lights and found NeoPixels would do the trick.
WHAT I LEARNED
While making “Alexa-Pi” I learned how to prototype on 2 popular circuit boards (Arduino and Raspberry Pi), how to code in 3 simple scripting languages, and how to interact with 1 exciting service -AVS. As a result, I’m very excited about voice technology and the seemingly infinite applications for IoT, connected home, and natural language UX design.
“Necessity is the mother of invention” and with thousands of tiny glyphs to choose from – finding the right icons for your project can be tedious and time consuming. This was the genesis for the project – addressing these core needs:
- Visual tools to help browse, filter, search more efficiently
- Easy access to corresponding classes or code
- Method of refining selection set to build a cohesive family
- Method of SAVING selections by project
- Better naming conventions/consistency
WHAT I DID
– Created BB10 icon library
– Added 50 Healthcare icons (July 2015)
– Added categories and keywords to all icons
– Created the search and print features to find and manage icons
– Save time hunting for the right icons
– View glyphs in proximity – build cohesive family
– Save your selections and corresponding codes
Teaching developers how to create and produce app icons (in up to 40 different sizes) efficiently.
WHAT I DID
1. Researched automation techniques in Adobe Illustrator
3. Produced 3 video tutorials (20 min total) in Premiere Pro
Beyond the blog post, custom templates and scripts, this experience has inspired me to write a book, appGRAFIX, slated for publication in Summer 2016.
JS Animation inspired by CodePen:
One of the best books I’ve read on mobile design is Tapworthy by Josh Clark. In fact, I was so inspired by the in-depth analysis of iOS patterns and Josh’s observations about mobile UX overall – that I enrolled in his online course. During those 10 weeks, I wrote the creative brief, created the sketches, produced mockups, and built a working prototype for 2Scoops.
There are 3 prmary mobile use cases:
– I’m local
– I’m multi-tasking
– I’m borded
Beyond SMS & calls, one of the most frequent uses of mobile devices is navigation. I wanted to build upon the first use case: “I’m Local – what’s nearby?”. Drawing upon previous experience living in Italy – I also wanted to build on the experience of discovering new flavors and gelato shops. For several weeks I visited local purveyors, tasting, comparing, selecting for the database.
Perhaps the biggest lesson of all was that time to market is crucial and that using well honed skills in HTML, CSS, JS is the fastest way to publish an app. (This goes double for publishing cross-platform.) Initially, I published 2Scoops using Appecelerator Titanium – a very powerful JS framework. Gradually though – keeping up with the framework and APIs became more work than building the app.
If speed is the top priority, I would recommend jQuery Mobile and packaging/publishing with PhoneGap Build. If performance is paramount, then it may be worth leanring a JS framework like Appcelerator Titanium or Sencha Touch.
Two Scoops was a finalist in the App Circus competition held at BlackBerry JAM Orlando in 2012. Currently, it’s available for Android and iOS devices.
RS Mobile/Site Redesign
When I first met RS they were experiencing an extraordinary degree of shopping cart abandonment. According to their analysis, this was due to products being too difficult to find. Therefore my remit was to improve the UX around search and buy. They had budgeted 30 odd days – which I thought generous considering the very limited scope of work.
WHAT I DID
Beginning with an “expert review” or first-person immersion into their site, I began shopping and buying items from RS online. There were indeed immediate improvements that could be made to the home and checkout pages as they had surmised. But the real problem, I discovered, was everything in between.
The portal site was dated and missing a lot of the functionality we take for granted today
There was only one view of search results – an endless AJAX-driven list
It was nearly impossible to identify the right parts from product titles & tiny thumbnails
Further research yielded glaring omissions like compare views and social shopping. The latter was really important because, 1/2 of the personas I had identified were junior employees. They didn’t yet have the expertise necessary to make final buying decisions on their own. They needed a way of saving product pages and sharing them with more senior staff to confirm their selections.
In sum, the project that was initially budgeted for 30 some days grew to 18 months(!), during which time I redesigned the entire portal from the ground up. In collaboration with the lead UX Designer from RS, I championed the user-centered design process -creating wireframes, visual mockups, and HTML5 prototypes. Using responsive design techniques, the site became accessible from tablet and mobile devices as well.
WHAT I DELIVERED
Led the user-centred design process
Personas, wireframes, mockups, & HTML5 prototypes
Design documentation and working front-end code
Further insights/data from usability studies
Dramatically increased conversion rates
VISA payWAVE was a big project and the Creative Director at Icon Mobile needed help developing the signature user journeys.
MY ROLE: UX/UI Designer
I created extensive flow documents detailing both the user experience and the visual “look and feel”. Regular drafts became the foundation of client review meetings and later formed the basis of a comprehensive style guide. The detailed style guide along with a working prototype comprised the main deliverables to the implementation team at VISA, Europe.
WHAT I DELIVERED
High fidelity mockups
Comprehensive style guide
Smooth handover to implementation team
WHAT IS LOYAL ZOO?
Loyalzoo is a mobile app for keeping track of your loyalty points on your phone. There’s also a corresponding app for merchants allowing them to manage marketing campaigns, grant awards, and track results.
Given my experience working with JS frameworks for BB10 devices, I was asked to recommend a mobile web strategy and to build the web app version for both BB10 and Windows Phones.
I delivered working versions of the Loyalzoo App for BB10 and Windows. In the process, I learned a ton about jQuery Mobile, REST, and JSON. I’m certain these skills will come in handy in the near future – especially when building rapid prototypes across all major platforms.