Example

GokceInan's avatar
GokceInan
Community Member
2 months ago

Guide to a Healthy Lifestyle: Nourish, Move & Mind

Experience it

I recently saw an interactive e-learning example in a Mastercard and really liked how it embedded lots of info in a simple, clear way. It inspired me to try something similar—organising content into smaller, engaging chunks that are still meaningful.
I thought of healthy habits right away—it’s a topic anyone can relate to, and some ideas immediately popped into my mind.

Learning Goal & Audience

Goal: Share the three basics of wellness—nutrition, exercise, and mindset—in a quick, engaging, and friendly format.
Audience: Anyone looking for small ideas to improve their daily wellbeing.

Concept & Structure

I set it up as a three-tile menu: Eating Habits, Physical Activities, and Mental Health, each including key subtopics, brief explanations, a "Did You Know?" feature, and simple definitions to keep the content light but informative.
The structure is flexible—you can easily scale the number of tiles, tabs, or content items based on your learning goals or time constraints.

Visual & Interaction Design

I used soft colours like blues, yellows, and purples to give it a calm and positive feel.
I also added light background animation and small object movements to make the screen feel more alive without being distracting.

Development & Triggers

Each tile links to its own layer on a separate slide. I used buttons and triggers to keep everything smooth.
Motion path animations were added to the pop-ups so they slide in nicely when opened.

Tools Used

  • Illustrator for the graphics
  • Vyond for simple animations
  • Articulate Storyline for building everything and setting up the triggers

Challenges & Solutions

I started with custom motion paths but switched to built-in animations—they worked better and were easier to manage.
I also made small fixes to the GIF and icon states after testing, just to make sure everything responded well.

Outcome & Next Steps

I’d be happy to share my process in more detail if it’s helpful—always glad to exchange ideas and learn together.

Let me know what you think—I’d love to hear your feedback! ...and let's share, connect, and inspire: my Linkedin

10 Replies

  • This is beautiful!! I love the color scheme and how clean every slide is. Very fun interaction!

    • GokceInan's avatar
      GokceInan
      Community Member

      Thank you so much! 😊 I just wanted to choose a topic I love and bring it with the design together in a simple, fun way.

  • Katahar's avatar
    Katahar
    Community Member

    😍Exceptionally beautiful and professional work. Each screen is clear, even though you've managed to pack so much activity and text into it. I'd love to be inspired by your work.

    • GokceInan's avatar
      GokceInan
      Community Member

      Thank you, that means a lot Katahar​! I’m really glad you found it inspiring. I put some extra effort into the graphics, hoping to spark a bit of creativity. It means a lot to hear this kind of feedback! 😊

  • The aesthetic is so beautiful and I loved how simple and engaging the tabs were; its given me some inspiration! 😊

    • GokceInan's avatar
      GokceInan
      Community Member

      Thank you, Shazeena! I’m happy it gave you some inspiration—that was exactly the point! 

  • MerveSatmaz's avatar
    MerveSatmaz
    Community Member

    Love how clean and engaging this interaction is! The visuals and layout make the experience both informative and enjoyable. Great work Gokcenur!

    • GokceInan's avatar
      GokceInan
      Community Member

      Thank you so much, Merve! I’m truly grateful. I’m glad you liked it and I really appreciate your feedback.

Getting Started with the E-Learning Challenges

Find practical answers to common questions about the E-Learning Challenges, a weekly event that helps you build skills, create your portfolio, and grow as an e-learning professional.