UX/UI Design Lead
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
There is a high barrier to create skills on Alexa; you need to know how to code.
Amazon needed a simple user interface that allowed all Alexa customers to engage with the product in a new creative way.
Fulfilled the clients needs and won a larger project with the company
Alexa is a voice-based virtual assistant by Amazon. Through devices like Amazon Echo, users can play music, order from Amazon, search for real time information, control smart home devices, and more. What’s special about Alexa is that you can install specific Skills that are developed by third-party vendors or the Amazon team. This is where RAIN agency came in. I was fortunate enough to be contracted to design and prototype the user experience for Amazon Alexa’s custom game builder.
We were first given a client brief end of September, days before we were set to fly out to Seattle. This had been a project a few developers had thrown together in their spare time and wanted to bring to life. They had created a basic desktop interface that sandboxed several game creation processes: custom audio stories, Apples-to-Apples trivia style game, and combat trivia. RAIN’s job was to take this prototype and make it usable and beautiful on both desktop and mobile. We were a part of a new experiment for them – do people actually want to build with Alexa?
Day one in Seattle, we met with the team who built the initial prototype. They gave us much more insight into the motivations, features, and feel they were looking for to expand this product. After this interview process, I came out with a list of three core motivations and a solid user flow with suggested screens.
We did this through sticky note brainstorming activities (see above), reviewing brand guidelines, and collecting many inspiration / references (see below). These three directions were an AWS inspired hand drawn aesthetic, a simple flat illustration direction, and a safe classic Alexa branded version for comparison and backup.
After returning from Seattle, I got straight to wireframing. Due to the short timeframe for this project, I sketched out high fidelity layouts and placed them in Invision for review. There were many iterations where I refined the navigation, got into the details of new flows like the signup flow, and whittled down what was really necessary for the client and the user to accomplish their goals.
The most complex screen was the game editor screen. The user needed to be able to choose from three different input with optional advanced customization features. They also needed to be able to delete, edit, and preview their choices all within staying in the limited audio upload capacity of the product (five audio files). Also, the product had to be responsive for desktop and mobile browsers. The key takeaways from this design exercise were that the icons and labels really mattered for comprehension, and the advanced features UI needed to be respond to a single click on both desktop and mobile.
As I was working on the wireframes, another designer played with the visual designs. I made sure to hand over samples of each style at the beginning of the week, but then it was handed back off to me to finish.
She followed through with a combination between the first and second style, which I refined to reflect the client’s preferences we talked about in Seattle.
From there, I created a style guide, applied it to the wireframes, and created a prototype using Principle to sell to the clients.
RAIN presented Amazon with full visual designs for mobile and desktop, a complete style guide for future additions, and several video and clickable prototypes for them to use when selling the idea to the higher ups at the company. I personally was able to complete the project requirements in about half the time that was expected, giving us the opportunity to add on the video prototypes, which the client loved.
During this process, I learned how fast things can happen when you sit down and listen to and work with the client directly. The trip to Seattle really set things off in the right direction and made it so I could pop out what they needed in half the time.