Overview

Management directed me to develop a prototype for an interactive, hands-on, activity-based assessment that could be embedded into our digital training products. This prototype had to allow learners to play with computer hardware, assemble it, gain feedback, and provide basic usage metrics.

I was directed that this must be a highly-stylized concept that was visually stunning and relied on creative interaction models. This would help form a compelling argument to the executive team to fund more of these interactives. This project would also be used to test time, cost, and discover additional requirements for future interactives.

I designed the interaction model, interface, feedback, general visual design, and functionality. I also performed QA testing and worked with a developer to implement small usability tweaks. This work was done over 2 weeks.

Concept Development

Our requirements stated that we had to control cost and scope while still creating a compelling hardware simulation. I opted to focus on the process of assembling hardware components onto a motherboard as this was a traditional and long-standing request from users.

In terms of instructional design, we had to force a user to first prove they knew what a hardware slot was, then to identify it on the motherboard, and finally, to select what component fit into that slot. We wanted to only provide basic feedback and instructions as this was to be a more open-ended assembly simulation as opposed to a structured set of steps.

Finally, we wanted to provide very basic metrics upon completion. This included time and a number of attempts (a score).

On hover, hardware slots are outlined and lit to indicate they may be interacted with. User testing indicated that additional instruction was needed to identify slots; however, the interactive would not be stand-alone in a real world application of …

Initial State Mockup - A learner is presented with just the motherboard and instructions. They must locate the hardware slots, which are highlighted on-hover. Usability testing revealed that additional labels were required to identify slots on-hover. Labels were added in the final prototype.

As a user selects slots, components appear radially around the motherboard allowing the user to select which component to insert into the selected slot. Green check marks indicate hardware components that have already been added correctly. Yellow "a…

In-progress State Mockup - On selection of a hardware slot, a radial menu appears to provide possible hardware to add to the slot. Green checkmarks would alert a user to what’s been completed. The yellow alert icons were later deemed unnecessary and removed.

Visual Development

I opted for isometric, 2D images (faux 3D) because we already had access to a library of high-quality, visually-standardized hardware images and because of the high cost of developing a custom set of objects in 3D.

The idea for the slot highlights actually came from the video game Halo 3: ODST (Bungie, Inc., 2009) that featured environmental and non-player character highlights/outlines to help a player identify important game elements.

While similar objects from competitors often opted for hardware lists or groups where you drag and drop objects, I instead opted for a more radical radial menu that would fly out upon selecting a slot. This would provide a unique, usable, but visually striking form of menu. Upon selection, the object would be removed from the radial menu and show an animation of it being assembled.

Altogether, the 3D-styled, animated, and radial components would help build a high-concept, visually stunning interactive object.

A video (0:55) of a user performing the interactive in real time. Hardware images copyright 123rf.com user vadymg. Interactive Prototype contents are the property of CompTIA, Inc.

Outcome

Through presenting this prototype, our team was able to gain funding to produce objects similar to these, but with more practical visual style than this high-concept prototype. We now employ hundreds of performance-based objects in our products that have been collectively used by tens of thousands of learners over millions of instances.

Further, the visual style of these objects led to the creation of our visual style guide for all our products and is now the standard visual style for everything we do on our team.