The static infographic shown below can be found at the Inc.com website. It’s designed to help managers determine their leadership style. The graphic serves as our starting point for an Articulate challenge which involves building a branching interaction scenario.
As with any new design, there are a lot of decisions to be made. For example, in designing this demo, I asked the following questions:
- What color scheme should I use?
- What font would the famous Instructional Designer Jackie Van Nice use? Do I have it on my computer?
- Should I utilize illustrated or photographic characters?
- Do I want a polished look or something more whimsical?
So, here are my answers to those questions.
I found the inspiration for the colors from one of the Storyline characters, Nicky. I call her Emily in my demo, but that’s another story. I matched the navigation buttons to the pink in the blouse she was wearing. Of course, purple (a very hard color to work with), was a natural choice to complement the pink. For the font, I chose Segoe UI Light which is used by those people over at Microsoft. In regard to using illustrated or photographic characters, I chose the photographic route. I wanted the final demo to have a professional / corporate look and knew there were several built in characters from Storyline that would fit my needs. The final result looks very professional and “corporate” to me. I hope you think so.
The layout was pretty automatic based on the amount of information needed for each branching item. For each question, I added a Choices button to let the user pick from the available options which were presented on a new layer. On the Choices layer (see below), I added a Read Scenario button that can be used to return to the question just in case additional reflection was required on the user’s part.
After completing the branching scenario, the user is taken to a results screen. I really wanted to make this screen visually engaging. To accomplish this, I worked with Photoshop to add the Storyline characters into a mockup of an iPhone. Clicking the Learn More link in the phone or the purple results strip at the bottom, takes the user to a new layer that explains their specific leader type traits. The mockup of the iPhone is courtesy of Jackie Tran.
If you look closely, you will notice the user name is shown in the purple Results strip. This was accomplished by asking the user for their name and then storing the result in a variable when the demo first starts. For this type of demo, I think it makes sense to personalize it.
I hope you enjoy this one. It took me about 2 days to build. Click the graphic below to launch the demo.