Myself and the MobiLoud team just launched a new homepage, and we’re pretty proud of it. Let’s go over what changed, and how we collaborated to get this shipped.

Design Highlights

Background colour

One notable change we've made is our choice of background colour. It was previously a light green (#D1FAE5) from our primary colour scale, and now, its a dark grey (#181818) from our neutral colour scale.

This change was one I tried on a whim and happened to like. We think it helps position MobiLoud upmarket as a "luxury" or "premium" solution for converting a website into a mobile app, rather than what you'd feel if you had visited their site with bright pastel-like colours.

Dynamically change navigation menu colour

Since we're now replacing all instances of light green background colours with a dark grey, we also need to change the navigation menu's colours to match.

Here's some jQuery we implemented to dynamically add styling to the navbar based on whether it's intersecting a div with dark background.

$(document).ready(function() {
  const navSticky = $('#navSticky');
  let sections = [];

  function calculatePositions() {
    sections = $('.section.neutral-900-bg').map(function() {
      const top = $(this).offset().top;
      const bottom = top + $(this).outerHeight();
      return { top, bottom };
    }).get();
  }

  function updateNavClasses(isIntersecting) {
    navSticky.toggleClass('dark', isIntersecting);
    $('.nav-link, .dropdown-toggle, .logo-svg').toggleClass('neutral-50', isIntersecting);
  }

  function checkIntersection() {
    const navStickyBottom = navSticky.offset().top + navSticky.outerHeight();
    const intersecting = sections.some(section => 
      navStickyBottom >= section.top && navStickyBottom <= section.bottom
    );
    updateNavClasses(intersecting);
  }

  calculatePositions();
  checkIntersection();

  $(window).on('resize', () => {
    calculatePositions();
    checkIntersection();
  }).on('scroll', checkIntersection);
});

This approach works for the time being, but in hindsight, it admittedly can be made much more performant by using the Intersection Observer API. Make use of our code at your own discretion.

Case Study component

We've decided to only display a single case study at a time, which gave us the opportunity to make each one individually more compelling.

The titles have been replaced by customer testimonials, and we now have the space to showcase more metrics than we did previously.

Card slider

The MobiLoud team was inspired by PostHog's "You'll hate PostHog if..." section, and had a similar idea for themselves that would use a previous set of custom icons they had on-hand. The above is what we ended up building.

Instead of building it as a conventional slider, I decided on a "drag to scroll" interaction instead. Props to Phuoc Nhuyen's blog post for the code that made it work.

Tool compatibility

A question the MobiLoud team often gets from leads are whether their website's third party integrations will also work in their native mobile app.

The answer is yes, and we built this section communicate that. Each third party tool you see in the screenshot also links to a dedicated post written on it, with the "View All" button taking them to mobiloud.com/integrations.

Process

Every project has its own beginnings. In this case, Nihal, MobiLoud’s Growth Marketing Manager, pitched the idea to me in our Kanban board in Basecamp.

Attached within it was a link to a rewrite of the page’s copy in Notion. The content strategy was largely his responsibility, and its implementation was mine.

Since a webpage is fundamentally markup, writing out the content in a Word-like document before designing in Figma is surprisingly effective. After all, it makes most logical sense for you to know what you want to say before you package it nicely.

From there, I take it to Figma to draft layouts for the content, and then start development once the picture is clear in my head.

It's also true that the medium influences the message — content and design form a two-way relationship. Once we got to see the copy inside a real landing page, we often find ourselves shortening and generally re-editing the copy to be more digestible, and this case was no different.

And that's that - how we redesigned and built the new MobiLoud homepage. If you're looking for a similar redesign of a website or landing page, you're welcome to reach out to me directly, and we'll be in touch in less than 24 hours.