• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Jackie Van Nice

E-Learning Goodness by Jackie Van Nice

  • Home
  • About
  • Blog
  • Portfolio
    • Articulate’s ELH Challenges
    • Sales Mobility Software
    • Product Sales
    • Sexual Harassment
    • Code of Conduct
  • Freebies
    • Free Storyline Templates
    • Free PowerPoint Templates
    • Free Images
    • Freelancing Tips
    • Free Resources to Help Get Started in eLearning
  • Work With Me
  • Contact

Storyline 1 to 2: Passport Makeover Edition

June 24, 2015 By Jackie Van Nice 13 Comments

Select Image to Launch (New) Demo

Select Image to Launch (New) Demo

I was always fond of this little passport how-to I did in Storyline 1, but when Articulate was kind enough to feature it on their E-Learning Examples page recently and people seemed to like it – it got me thinking about how I could update it using Storyline 2’s great features.

Navigation: Before & After

Before: A Tab-Based Layout

Before: A Tab-Based Layout

After: A Paris-Bound Jet Guides You

After: A Paris-Bound Jet Guides You

One of my favorite features in Storyline 2 is the slider for its ease of use and power to deliver a lot of information in a compact way.

I knew it would be perfect to get the entire application on one screen where the user could see everything from a high-level overview to a mid-level peek to detailed animations showing how to fill it out – simply by sliding the Paris-bound jet down the runway.

The thing is, you could still create this basic design in Storyline 1 (using this layout for a more compact presentation and navigating via clicking or tapping) – but there’s something about the slider that makes things like this easier to ideate, create, and (on the learner end) use.

Updated Animations

John Hancock Would Be Proud of the Signature Animation

John Hancock Would Be Proud of the Signature Animation

The other feature-based update I made was to the animations. In the original I relied on a fade animation to bring in handwriting and typing, but being able to use the new built-in wipe animation improved the look and feel quite a bit, so I was happy about that.

See the Jet-On-the-Runway Slider!

Here’s the updated jet-fueled slider demo, and here’s the original demo for comparison. Enjoy – and bon voyage!

Share this:

  • Click to share on LinkedIn (Opens in new window) LinkedIn
  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on X (Opens in new window) X
  • Click to share on Pinterest (Opens in new window) Pinterest
  • Click to share on Tumblr (Opens in new window) Tumblr
  • Click to email a link to a friend (Opens in new window) Email
  • Click to print (Opens in new window) Print
  • More
  • Click to share on Reddit (Opens in new window) Reddit
  • Click to share on Pocket (Opens in new window) Pocket

Like this:

Like Loading...

Related

Filed Under: E-Learning Tagged With: Articulate Storyline, Characters, Context, Design Makeover, E-Learning Design, ELHChallenge, Instructional Design, Motivation, Show Your Work, Visual Design

Previous Post: « How to Go Full-Screen & Lose the Player in Storyline
Next Post: Buttoned-Down Design (+Free Storyline File!) »

Reader Interactions

Comments

  1. June Ganes says

    June 24, 2015 at 11:47 am

    Great makeover Jackie! Love how you captured the sections and the animations!

    Loading...
    Reply
    • Jackie Van Nice says

      June 24, 2015 at 11:58 am

      Thank you, June! I’m glad you like it. :)

      Loading...
      Reply
  2. Jenn St Amand says

    June 24, 2015 at 11:55 am

    I love this example. Nice work!! My only recommendation in the new version is to potentially add some directions on Page 1 to direct the user to continue to use the jet slider to get to the sub-topics. At first, I thought the slider was only for the main topics (Page 1, Page 2, and Submit. This presentation is one of the best I’ve ever seen in Storyline. I just started following your blog today and I’m already glad I did :)

    Loading...
    Reply
    • Jackie Van Nice says

      June 24, 2015 at 12:08 pm

      Hi Jenn! Thanks so much for your great comments – and for following my blog. :)

      Yes, level of instructions is always a balancing act. I did carefully consider what you’re suggesting and in the end decided to let the user explore and discover the details of how it works for herself to enhance curiosity and overall engagement.

      If I think the average user will figure it out without the risk of getting too lost or frustrated, I’ll leave directions at a bare minimum. I also think if it’s a really good design users should be able to figure it out just fine. It’s a goal I keep in mind as I’m designing.

      So that’s my approach – but your suggestion would work beautifully too. Thanks again for sharing your ideas!

      Loading...
      Reply
  3. Lynne Warring says

    June 24, 2015 at 4:47 pm

    Thanks for sharing. It’s great see the new (fantastic) Storyline 2 features put into practice in a sleek and profession way. It keeps ideas fresh in my mind. I love your blog and learn so much from it.

    Lynne

    Loading...
    Reply
    • Jackie Van Nice says

      June 24, 2015 at 5:06 pm

      Hi Lynne! I’m so glad if it helps give you some fresh ideas. Thanks for following my blog, too! It would be a far lonelier site if there wasn’t anyone here to share with. :)

      Loading...
      Reply
  4. Dan Sweigert says

    June 24, 2015 at 7:57 pm

    Beautifully done Jackie. I wish I would have had that wipe animation back when I was creating software training and wanted to show fields being typed into on a screen and the final signature. I’ll remember to use the wipe next time since I now have Storyline 2. You chose a fun setting to present what can often be a boring topic.

    Loading...
    Reply
    • Jackie Van Nice says

      June 24, 2015 at 9:27 pm

      Thank you, Dan! It’s so funny that something as simple as a wipe animation can make such a big difference in the final impression – but it can. I’m glad you’ll be keeping it in mind. :)

      Loading...
      Reply
  5. Ellen says

    June 25, 2015 at 12:49 pm

    Jackie, the slider is cool but my favorite part is the “hit you in the face” directions stating this is the functionality – so necessary and frequently overlooked. Great job once again! Thanks for sharing.
    Best,
    Ellen

    Loading...
    Reply
    • Jackie Van Nice says

      June 25, 2015 at 12:56 pm

      Thanks, Ellen! That’s a great point. I faaaaaaar prefer that directions are as minimal, simple, and easily digested as possible.

      I have almost ZERO patience wading through cramped, detailed directions – especially in e-learning where I feel our job is to design to avoid that excess weight (cognitively as well as in screen crowding) as much as possible.

      Loading...
      Reply
  6. Lori P says

    June 3, 2016 at 10:46 pm

    you rock! thanks for your wonderful posts and love the passport interaction

    Loading...
    Reply
  7. Lily Yang says

    May 17, 2017 at 3:27 pm

    Jackie,
    Your Passport Application demo was an absolutely well-thought design. I haven’t tried the Storyline yet but am in the middle of learning its capabilities. I would love to apply your demo sample to my future user guide to our processes.

    Loading...
    Reply
    • Jackie Van Nice says

      May 17, 2017 at 3:40 pm

      Thank you, Lily! I’m so glad you found it helpful. :)

      Have fun learning Storyline. It’s my fave development tool!

      Loading...
      Reply

What do you think?Cancel reply

Primary Sidebar

Welcome!

I’m an award-winning instructional designer and proud Articulate Super Hero who creates e-learning for large organizations. I blog to explain my design process, share tips and tricks, and help others succeed. I hope you enjoy my refreshing gallery of e-learning goodness!

  • View jackietrains’s profile on Instagram
  • View jackievannice’s profile on LinkedIn

Tags

Articulate 360 Articulate Rise Articulate Storyline Articulate Studio Audio Avatars CCAF Characters Community Context Design Makeover Dials Drag & Drop E-Learning Design ELHChallenge Emotional Engagement Free Download Freelancing Games German Glossary Instructional Design Languages Makeover Menu Mobile Motivation Pantone Portfolio PowerPoint Professional Development Quick Reference Quizzes Sales Training Scenarios Show Your Work Software Training Storyline 360 Tables Technical Training Templates Typography Video Visual Design Voiceover

Top Posts & Pages

  • Portfolio
    Portfolio
  • Home
    Home
  • Sexual Harassment Training
    Sexual Harassment Training
  • Sales Mobility Software Training
    Sales Mobility Software Training
  • Navigating a Tasty Circular Menu
    Navigating a Tasty Circular Menu
  • Articulate's E-Learning Heroes Challenges
    Articulate's E-Learning Heroes Challenges
  • About
    About
  • Free Visual Storyboard Template
    Free Visual Storyboard Template
  • Free Storyline Templates
    Free Storyline Templates
  • How to Go Full-Screen & Lose the Player in Storyline
    How to Go Full-Screen & Lose the Player in Storyline

Copyright © 2025 Jackie Van Nice and E-Learning Goodness by Jackie Van Nice

%d