Game Creator App

Mobile to desktop browser interface for all ages

Amazon

//

2017

//

UX/UI Design Lead

//
VISIT SITE

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text

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.

Challenge

There is a high barrier to create skills on Alexa; you need to know how to code.

Goal

Amazon needed a simple user interface that allowed all Alexa customers to engage with the product in a new creative way.

Outcome

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.

Client Brief

Do people actually want to build with Alexa?

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?

Brainstorm in Seattle

An iterative brainstorm with the Seattle Amazon team gave us fast and deep insight into the motivations and direction for the product.

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 were designing this product to test these user motivations. Do they really feel these things? If so, which and how much?Type image caption here (optional)
‍First iteration of the sitemap – Refined through wireframing and testing into a final version (see below)
‍Starting user flow produced in Omnigraffle to determine screen and asset creation as well as scope

We were also able to determine a few possible visual directions based on brand guidelines and target audiences.

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.

‍‍I provided a simple visual and text based moodboard to help align the team and with the client.

Quick, iterative wireframes & prototypes

Within a week, I had refined full desktop and mobile wireframes prototyped and presentable to the clients.

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.

‍Before building out all the user states and flows in detail, I presented a list of the core screen types and their actions.

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.

‍These are the different states for the most complex game types, with the working title Blanks.

Once these key screens were mapped, I built out all the potential flows and states as clickable prototypes in InVision. You can see the desktop version here and the mobile version here.

‍With a plugin, I was able to provide full clickable prototypes that converted to Invision, making it easy to send to the client.

Visual design & implementation

The visual design was a collaborative process, where we ultimately landed on something the client could sell to the company but was still its own brand.

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. 

‍‍I handed off quick mockups to another designer of the three visual directions we decided to explore.

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.

‍I presented a few similar options based on the original client needs. The second iteration was the one chosen.

From there, I created a style guide, applied it to the wireframes, and created a prototype using Principle to sell to the clients.

Results

The client was very happy with the end result and RAIN won future work from Amazon.

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.

Featured Work