Interface Look Book reaction document

We like ideas. We like reactions even more. The purpose of this Look Book is to elicit your reaction to potential treatment options for the look and feel – not the function. Hint: ignore all words, think of concepts. In the notes section, please provide your initial thoughts. The Look Book

“Don’t Bug Me!” Look & Feel

Main Menu From this menu, the learner can access all three of the activities.

Look & Feel – Main Menu Screen

Bug Buster The Bug Buster activity is an exploration through a customer’s environment. By clicking the target icons, learners can travel from the lawn, to the garden, and to various rooms within the home as they hunt down bugs, capturing them in their collection bar along the top of the screen. Note that not all hotspots have been drawn in at this time. Functionality, such as what happens when one of the bug hotspots is clicked, dialogs, and choice screens have not been created at this point. We wanted to get the general look and feel approved before delving too deep.

Look & Feel – Bug Buster – Location submenu The empty circles along the top are filled in as bugs are found in the exploration. The targets are buttons that lead to different areas to explore.

Look & Feel – Bug Buster – In the garden User can select the buttons on ether side of the screen to navigate to the other areas of the house.

Look & Feel – Bug Buster – In the garden Treatment for when a hotspot is clicked. In this case, the Rotten Tomatoes hotspot was chosen as an example.

Look & Feel – Bug Buster – In the garden Added product images and reduced choices to two, down from three. After the right bug is identified, followed by feedback (not shown), the second set of questions is displayed.

Look & Feel – Bug Buster – Around the lawn As bugs are identified, they are added to the Collection Box along the top.

Look & Feel – Bug Buster – In the home

Right in the Aisle Of the three activities in the Don’t Bug Me! course, Right in the Aisle is considered core, meaning it involves the key performance objectives. We’ve gone with the more subdued background and toned down the illustrated plants along the Mind Map bar, as well as removed the blue flower drawing from the customer’s dialog box. Not shown here is an expert wearing a red vest and a headset, but we will replace or use one provided for final.

Look & Feel – “Right in the Aisle” Interaction Screen We’ve removed all of the fauna accents. To be consistent with the treatment used in the Bug Buster activity, we added a wood border and subtle texture to the background of the Insights panel.

Look & Feel – “Right in the Aisle” Coach Screen Note: Will use an image of an Ace expert in a red vest with a headset for final.

What’s Extra? What’s Extra? is a fun, speed-sorting gamelette. Product images will appear in the cart, and the learner will have to match the correct extra item, which will be in one of the boxes on either side of the basket. When the correct combination is chosen, a golden dollar sign will float up from the basket.

Look & Feel – What’s Extra? Note: Reworked the layout of this interaction to have room for three items in the basket. Used a more generic, iconic basket graphic to keep the focus on the products. Added product names.

Look & Feel – What’s Extra? Will use a relevant image for the aisle in the background. Note: Dollar signs will float up from the cart as positive feedback to show that the correct combination has been chosen.

Colors & Fonts Style Guide Though this might change or evolve as the course is finalized, this guide will serve as a general blueprint for building the art design into the interactions.