Skip to main content

LMS DIY Design Lab: Homepage UI/UX Inspiration

  • January 9, 2026
  • 5 replies
  • 69 views
vv2943a
Contributor I
Forum|alt.badge.img+1

This series is inspired by individuals working with limited resources and little to no access to dedicated design teams. I’ve been working in the Docebo space for over a year now, managing and designing our LMS entirely on my own.

When I stepped into my role, our LMS was already built—but it focused on functionality over look and feel. My goal has been to create pages that better organize the large volume of information in our central repository, starting with the homepage (and make it look pretty lol). There’s still a lot to learn and unlock within the platform when it comes to what’s possible from a design and UX standpoint, and this series documents that journey.

Topic: Homepage Design

Some background on my use case - we use Docebo internally for onboarding, training, and (soon) professional development. I have tinkered with a lot of the features on my homepage and so far I am happy with my results! I did the following things by using the widgets available in Docebo, especially the HTML widget:

  • A navigation bar that leads to important links (HTML widget)
  • A carousel to showcase an overview of the LMS, “Meet the Team”, highlighted important apps we use in the company, and a TED talks page I built for inspiration (HTML widget)
  • Courses/Learning Plans are displayed based on completion (Courses & Learning Plan Widget)
  • Added a widget that helped me embed a Google Doc that updates in real time if I made revisions in the Google Doc (HTML widget)
  • Programs I use to help me make all this - ChatGPT, Docebo Community posts, Fark Tools (courtesy of a community member ​@Bfarkas), Adobe Express or Canva, codepen, and chats with other Docebo Users (shoutout to ​@JZenker and his Inspire conference session last year!)

This is just the homepage! I was able to make other landing pages too but I am still tinkering with them. As much as I love the homepage - simple, clean, and the design is cohesive, I feel like I am missing something?? I haven’t heard any complaints from my users though haha.

 

Questions I have:

  1. Did you build a separate homepage for leadership positions like executives or managers? How does the design differ? What widgets were most effective for them?
  2. What cool things were you able to bake into your homepage without a 3rd party coming in to help you? It could be cool things that you’ve done through the widgets!
  3. If you have a navigation bar, what do you put on it? I find that I need to refresh my options because I feel like only “Onboarding” and “Tech Hub" is used

 

Here is a peek at my homepage! I would love to see what others have built 😊

 

    5 replies

    JZenker
    Guide II
    Forum|alt.badge.img+2
    • JZenker
    • Guide II
    • January 9, 2026

    Looks so good - love the nav bar! Can’t wait to see what you build next!

      bcabrera
      Forum|alt.badge.img
      • bcabrera
      • Newcomer
      • January 9, 2026

      Hey, 

      I hope this helps. 

      We built separate landing experiences based on audience (frontline/basic users vs. managers/leadership).

      For basic users, we keep the homepage very streamlined and task-based (quickly get to “what I need to complete next”) with limited navigation and fewer options overall. For managers, the design adds “team enablement” paths — not just their own learning, but quick access to tools/features that help them track and support their teams (ex: progress visibility, reporting-type views, etc.), while still keeping the layout simple.

      On the “cool things without a 3rd party” side: we leaned heavily on standard widgets + the HTML widget to create tile-style navigation (flip cards/buttons). That’s been a big win because it lets us keep the nav bar minimal and adjust the tiles as priorities change, instead of constantly adding more items to global navigation. We also use a few tiles to route to approved external resources so the homepage functions as a one-stop hub.

      For the nav bar specifically, we intentionally keep it to a few evergreen items (ex: My Learning / Catalog / Reporting for manager audiences) and rely on the tiles for everything else.

        bcabrera
        Forum|alt.badge.img
        • bcabrera
        • Newcomer
        • January 9, 2026

        Hey, 

        I hope this helps. 

        We built separate landing experiences based on audience (frontline/basic users vs. managers/leadership).

        For basic users, we keep the homepage very streamlined and task-based (quickly get to “what I need to complete next”) with limited navigation and fewer options overall. For managers, the design adds “team enablement” paths — not just their own learning, but quick access to tools/features that help them track and support their teams (ex: progress visibility, reporting-type views, etc.), while still keeping the layout simple.

        On the “cool things without a 3rd party” side: we leaned heavily on standard widgets + the HTML widget to create tile-style navigation (flip cards/buttons). That’s been a big win because it lets us keep the nav bar minimal and adjust the tiles as priorities change, instead of constantly adding more items to global navigation. We also use a few tiles to route to approved external resources so the homepage functions as a one-stop hub.

        For the nav bar specifically, we intentionally keep it to a few evergreen items (ex: My Learning / Catalog / Reporting for manager audiences) and rely on the tiles for everything else.


        Here’s an example of I did. 

         

         

        vv2943a
        Contributor I
        Forum|alt.badge.img+1
        • vv2943a
        • Author
        • Contributor I
        • January 15, 2026

        ​@bcabrera 

        Thanks for that insight! I appreciate the feedback on the questions I had. 

        • What Docebo features did you use to create team enablement paths for the managers’ landing page? Maybe I haven’t looked hard enough but the only feature I saw useful so far was the page for “Assign to Teams” but no widgets stood out to me for managers
        • I love the tiles idea and I can only imagine that editing it is quick and easy. Do you mind sharing that html/css code?
        bcabrera
        Forum|alt.badge.img
        • bcabrera
        • Newcomer
        • January 22, 2026

        ​@bcabrera 

        Thanks for that insight! I appreciate the feedback on the questions I had. 

        • What Docebo features did you use to create team enablement paths for the managers’ landing page? Maybe I haven’t looked hard enough but the only feature I saw useful so far was the page for “Assign to Teams” but no widgets stood out to me for managers
        • I love the tiles idea and I can only imagine that editing it is quick and easy. Do you mind sharing that html/css code?

        We use a combination of Branching, Groups and Enrollment Rules to ensure they get to the right landing page. With Groups and Enrollment Rules you should be able to specify which pages they can see and land on. 

        Code for the flip cards: 

        CSS Code: 
         

        * FLIP CARDS Start */

        .flipcard-grid {

            display: grid;

            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));

            gap: 0.5rem;

            width: 100%;

            box-sizing: border-box;

        }

         

        .flipcard-container {

            width: 100%;

            height: 220px;

            perspective: 1000px;

            position: relative;

        }

         

        .flipcard {

            width: 100%;

            height: 100%;

            transform-style: preserve-3d;

            transition: transform 0.6s ease;

            position: relative;

        }

         

        .flipcard:hover .card-front {

            transform: rotateY(-180deg);

        }

         

        .flipcard:hover .card-back {

            transform: rotateY(0deg);

        }

         

        .card-front,

        .card-back {

            position: absolute;

            width: 100%;

            height: 100%;

            backface-visibility: hidden;

            border-radius: 6px;

            overflow: hidden;

            transition: transform 0.6s ease;

            display: flex;

            align-items: center;

            justify-content: center;

            text-align: center;

            padding: 1rem;

            box-sizing: border-box;

        }

         

        .card-front {

            background-size: cover;

            background-position: center;

            transform: rotateY(0deg);

            z-index: 2;

        }

         

        .card-back {

            background-color: #F8F0E4;

            /* Heritage White */

            color: #000000;

            /* Black text */

            font-size: 1.4rem;

            /* Increased text size */

            transform: rotateY(180deg);

        }

         

        .flipcard_overlay {

            width: 100%;

            height: 100%;

            background: rgba(224, 25, 51, 0.3);

            display: flex;

            align-items: center;

            justify-content: center;

        }

         

        .card_front_title {

            font-size: 1.5rem;

            font-weight: bold;

            color: #fff;

            text-align: center;

            padding: 1.5rem 0.75rem 0.75rem;

            line-height: 1.1;

            word-break: keep-all;

            position: relative;

            z-index: 2;

        }

         

        .card_back_text a {

            display: inline-block;

            margin-top: 0.75rem;

            padding: 8px 16px;

            background: #E01933;

            color: #ffffff;

            /* Button text stays white */

            text-decoration: none;

            font-weight: bold;

            border-radius: 4px;

            text-transform: uppercase;

            font-size: 1rem;

        }

         

        .card_back_text a:hover {

            background-color: #FF3751;

        }




        HTML Code: 

        <!-- Flipcard Grid: Top Row -->
        <div class="flipcard-grid">

          <!-- Card 1: Restaurant General Manager -->
          <div class="flipcard-container">
            <div class="flipcard">
              <div class="card-front" style="background-image:url(&quot;[IMAGE_URL]&quot;);">
                <div class="card_front_title">[TITLE 1]</div>
              </div>
              <div class="card-back">
                <div class="card_back_text">
                  [DESCRIPTION 1]<br />
                  <a href="[GENERIC_LINK_URL]" target="_blank" rel="noreferrer noopener">
                    [LINK TEXT 1]
                  </a>
                </div>
              </div>
            </div>
          </div>

          <!-- Card 2: OPS Standards -->
          <div class="flipcard-container">
            <div class="flipcard">
              <div class="card-front" style="background-image:url(&quot;[IMAGE_URL]&quot;);">
                <div class="card_front_title">[TITLE 2]</div>
              </div>
              <div class="card-back">
                <div class="card_back_text">
                  [DESCRIPTION 2]<br />
                  <a href="[GENERIC_LINK_URL]" target="_blank" rel="noreferrer noopener">
                    [LINK TEXT 2]
                  </a>
                </div>
              </div>
            </div>
          </div>

          <!-- Card 3: Momos -->
          <div class="flipcard-container">
            <div class="flipcard">
              <div class="card-front" style="background-image:url(&quot;[IMAGE_URL]&quot;);">
                <div class="card_front_title">[TITLE 3]</div>
              </div>
              <div class="card-back">
                <div class="card_back_text">
                  [DESCRIPTION 3]<br />
                  <a href="[GENERIC_LINK_URL]" target="_blank" rel="noreferrer noopener">
                    [LINK TEXT 3]
                  </a>
                </div>
              </div>
            </div>
          </div>

          <!-- Card 4: Restaurant Tech -->
          <div class="flipcard-container">
            <div class="flipcard">
              <div class="card-front" style="background-image:url(&quot;[IMAGE_URL]&quot;);">
                <div class="card_front_title">[TITLE 4]</div>
              </div>
              <div class="card-back">
                <div class="card_back_text">
                  [DESCRIPTION 4]<br />
                  <a href="[GENERIC_LINK_URL]" target="_blank" rel="noreferrer noopener">
                    [LINK TEXT 4]
                  </a>
                </div>
              </div>
            </div>
          </div>

          <!-- Card 5: Equipment -->
          <div class="flipcard-container">
            <div class="flipcard">
              <div class="card-front" style="background-image:url(&quot;[IMAGE_URL]&quot;);">
                <div class="card_front_title">[TITLE 5]</div>
              </div>
              <div class="card-back">
                <div class="card_back_text">
                  [DESCRIPTION 5]<br />
                  <a href="[GENERIC_LINK_URL]" target="_blank" rel="noreferrer noopener">
                    [LINK TEXT 5A]
                  </a><br />
                  <a href="[GENERIC_LINK_URL]" target="_blank" rel="noreferrer noopener">
                    [LINK TEXT 5B]
                  </a>
                </div>
              </div>
            </div>
          </div>

          <!-- Card 7: EVP -->
          <div class="flipcard-container">
            <div class="flipcard">
              <div class="card-front" style="background-image:url(&quot;[IMAGE_URL]&quot;);">
                <div class="card_front_title">[TITLE 7]</div>
              </div>
              <div class="card-back">
                <div class="card_back_text">
                  [DESCRIPTION 7]<br />
                  <a href="[GENERIC_LINK_URL]" target="_blank" rel="noreferrer noopener">
                    [LINK TEXT 7]
                  </a>
                </div>
              </div>
            </div>
          </div>

          <!-- Card 8: Above Restaurant Leader -->
          <div class="flipcard-container">
            <div class="flipcard">
              <div class="card-front" style="background-image:url(&quot;[IMAGE_URL]&quot;);">
                <div class="card_front_title">[TITLE 8]</div>
              </div>
              <div class="card-back">
                <div class="card_back_text">
                  [DESCRIPTION 8]<br />
                  <a href="[GENERIC_LINK_URL]" target="_blank" rel="noreferrer noopener">
                    [LINK TEXT 8]
                  </a>
                </div>
              </div>
            </div>
          </div>

          <!-- Card 9: Guest Services -->
          <div class="flipcard-container">
            <div class="flipcard">
              <div class="card-front" style="background-image:url(&quot;[IMAGE_URL]&quot;);">
                <div class="card_front_title">[TITLE 9]</div>
              </div>
              <div class="card-back">
                <div class="card_back_text">
                  [DESCRIPTION 9]<br />
                  <a href="[GENERIC_LINK_URL]" target="_blank" rel="noreferrer noopener">
                    [LINK TEXT 9]
                  </a>
                </div>
              </div>
            </div>
          </div>

          <!-- Card 10: Public Safety Foundation -->
          <div class="flipcard-container">
            <div class="flipcard">
              <div class="card-front" style="background-image:url(&quot;[IMAGE_URL]&quot;);">
                <div class="card_front_title">[TITLE 10]</div>
              </div>
              <div class="card-back">
                <div class="card_back_text">
                  [DESCRIPTION 10]<br />
                  <a href="[GENERIC_LINK_URL]" target="_blank" rel="noreferrer noopener">[LINK TEXT 10A]</a><br />
                  <a href="[GENERIC_LINK_URL]" target="_blank" rel="noreferrer noopener">[LINK TEXT 10B]</a>
                </div>
              </div>
            </div>
          </div>

        </div>

        <!-- Section Divider (keep OUTSIDE the grid) -->
        <h2 style="text-align:center;font-size:2rem;color:#b22222;margin:2rem 0 1rem;font-weight:700;">
          [SECTION TITLE]
        </h2>

        <!-- Flipcard Grid: Bottom Row -->
        <div class="flipcard-grid" style="display:flex;flex-wrap:nowrap;justify-content:center;max-width:100%;">

          <!-- Card 1: Manuals -->
          <div class="flipcard-container">
            <div class="flipcard">
              <div class="card-front" style="background-image:url(&quot;[IMAGE_URL]&quot;);background-size:cover;background-position:center;border-radius:10px;">
                <div class="card_front_title">[BOTTOM TITLE 1]</div>
              </div>
              <div class="card-back" style="background-color:#fff;border-radius:10px;text-align:center;padding:12px;">
                <div class="card_back_text">
                  [BOTTOM DESCRIPTION 1]<br />
                  <a href="[GENERIC_LINK_URL]" target="_blank" rel="noreferrer noopener">
                    [LINK TEXT B1A]
                  </a><br />
                  <a href="[GENERIC_LINK_URL]" target="_blank" rel="noreferrer noopener">
                    [LINK TEXT B1B]
                  </a>
                </div>
              </div>
            </div>
          </div>

          <!-- Card 2: ServSafe Portal -->
          <div class="flipcard-container">
            <div class="flipcard">
              <div class="card-front" style="background-image:url(&quot;[IMAGE_URL]&quot;);background-size:cover;background-position:center;border-radius:10px;">
                <div class="card_front_title">[BOTTOM TITLE 2]</div>
              </div>
              <div class="card-back" style="background-color:#fff;border-radius:10px;text-align:center;padding:12px;">
                <div class="card_back_text">
                  [BOTTOM DESCRIPTION 2]<br />
                  <a href="[GENERIC_LINK_URL]" target="_blank" rel="noreferrer noopener">
                    [LINK TEXT B2]
                  </a>
                </div>
              </div>
            </div>
          </div>

          <!-- Card 3: Steritech -->
          <div class="flipcard-container">
            <div class="flipcard">
              <div class="card-front" style="background-image:url(&quot;[IMAGE_URL]&quot;);background-size:cover;background-position:center;border-radius:10px;">
                <div class="card_front_title">[BOTTOM TITLE 3]</div>
              </div>
              <div class="card-back" style="background-color:#fff;border-radius:10px;text-align:center;padding:12px;">
                <div class="card_back_text">
                  [BOTTOM DESCRIPTION 3]<br />
                  <a href="[GENERIC_LINK_URL]" target="_blank" rel="noreferrer noopener">
                    [LINK TEXT B3]
                  </a>
                </div>
              </div>
            </div>
          </div>

          <!-- Card 4: FRUM -->
          <div class="flipcard-container">
            <div class="flipcard">
              <div class="card-front" style="background-image:url(&quot;[IMAGE_URL]&quot;);background-size:cover;background-position:center;border-radius:10px;">
                <div class="card_front_title">[BOTTOM TITLE 4]</div>
              </div>
              <div class="card-back" style="background-color:#fff;border-radius:10px;text-align:center;padding:12px;">
                <div class="card_back_text">
                  [BOTTOM DESCRIPTION 4]<br />
                  <a href="[GENERIC_LINK_URL]" target="_blank" rel="noreferrer noopener">
                    [LINK TEXT B4]
                  </a>
                </div>
              </div>
            </div>
          </div>

          <!-- Card 5: FHS Insights -->
          <div class="flipcard-container">
            <div class="flipcard">
              <div class="card-front" style="background-image:url(&quot;[IMAGE_URL]&quot;);background-size:cover;background-position:center;border-radius:10px;">
                <div class="card_front_title">[BOTTOM TITLE 5]</div>
              </div>
              <div class="card-back" style="background-color:#fff;border-radius:10px;text-align:center;padding:12px;">
                <div class="card_back_text">
                  [BOTTOM DESCRIPTION 5]<br />
                  <a href="[GENERIC_LINK_URL]" target="_blank" rel="noreferrer noopener">
                    [LINK TEXT B5]
                  </a>
                </div>
              </div>
            </div>
          </div>

          <!-- Card 6: FedEx -->
          <div class="flipcard-container">
            <div class="flipcard">
              <div class="card-front" style="background-image:url(&quot;[IMAGE_URL]&quot;);background-size:cover;background-position:center;border-radius:10px;">
                <div class="card_front_title">[BOTTOM TITLE 6]</div>
              </div>
              <div class="card-back" style="background-color:#fff;border-radius:10px;text-align:center;padding:12px;">
                <div class="card_back_text">
                  [BOTTOM DESCRIPTION 6]<br />
                  <a href="[GENERIC_LINK_URL]" target="_blank" rel="noreferrer noopener">
                    [LINK TEXT B6]
                  </a>
                </div>
              </div>
            </div>
          </div>

        </div>
         

        Terms & ConditionsCookie settingsAccessibility statement