This web standards piece was created to introduce learners to the different types of intrisic rewards then present a scenario depicting two employees. The learner then evaluates the qualities of these two employees and examines what types of intrinsic rewards might appeal to each employee. I designed the UI/UX, wrote the HTML, CSS, and jQuery and created the Flash animation embedded into the piece depicting the scenario. I collaborated with a developer to allow learners to email their answers to themselves so they could have a take away for a discussion or paper throughout the course.
I spent the most time on deciding how to organize this piece, the information architecture, and thinking about the different ways the user would interact with the piece. I decided to break the piece into two tabs — the diagram and the scenario. The diagram is used as an overview for the types of intrinsic rewards where each quadrant displays a different set of characteristics. When the page loads the title of each quadrant is visible, when you hover (or click on mobile) the title is replaced with the specific characteristics for that quadrant allowing the user to interact with the diagram versus simply looking at it to recieve the information. On the scenario tab there is a Flash animation embedded in the page that describes the scenario of the two employees. Once the animation is complete the user is directed to the questions about the employees to lead the user through the thought process of considering their intrinsic reward structure.