UX/UI Design Case Study: Melloo Subscription Page

16th April 2018 / 6 minute read

melloo ux blog 3

When designing any web page, you should view it as an entry point to your website. After all, it could be your first point of contact with a customer. With this belief, you should ensure that each page effectively communicates your business, service or product to a user.

Because we worked closely with Melloo, we knew how best to apply their brand into their website’s design. With the combination of their branding and their customer’s (teachers) typical browsing behaviour, we knew our landing pages had to be visually appealing with concise content.

How we achieved this for the design of Melloo’s new subscription landing page

melloo ux blog


Although we had a live subscription landing page, we discussed with the client that the design didn’t sit right. Their brand had developed since we originally launched the Melloo site, and we wanted to aim for better conversion on the subscribe page.

We liked the subscription page design originally, but after months of design work for the release of new Melloo resources and other online marketing material, we helped evolve the Melloo the brand. It meant the subscription page no longer reflected the brand we had moulded.


Melloo is an online primary teaching resource provider, offering teachers across the world fun, vibrant learning materials. The Melloo team is made up of current and experienced teachers, and working with a team who had this industry insight was hugely beneficial.

The Melloo platform allows teachers to become part of a community where they can explore a vast range of primary teaching resources for all subjects. It’s a great method of support in their lesson planning. With all of this in mind, it was down to us to design a UX & UI which suited a typical, busy teacher.


You have seconds to grab the attention of an online user. It’s impossible to display every single piece of information on a single page. If you do decide to pack a page with information, users will more than likely drop-off. And when it comes to teachers, they will definitely not hesitate to go elsewhere if anything seems overly complicated.

The visuals and messaging had to be short, concise and appealing. Our designer worked hard on many variations for the new subscription page, with an aim of helping funnel busy teachers into subscribing to Melloo.

To put a design together, we had to consider the key selling point of the page. Of course, to make a teacher subscribe to Melloo is the fundamental aim. But then why should they subscribe? That’s up to us to show in the design and structure.

Graphic Elements

melloo ux blog

These three design iterations were created to reflect the messaging to the left. We decided to use the celestial night cycle as it not only looked visually more exciting, but represented the message we wanted to convey.

melloo ux blog 2

The testimonial section was designed with micro animation in mind. The simplistic round edged cards flow seamlessly across the page enticing the user to read them.

melloo ux blog 3

The diagram above shows different stages of the celestial day/night cycle. The graphic was drawn in illustrator as a spherical object that rotates on itself.

Using the SVG graphic, our developer brought it to life with CSS animations.

melloo gif

Animated Celestial Graphic

melloo ux blog

The separate drawn elements of the Box Graphic

melloo gif

Animated Box Graphic

melloo ux blog 6

We worked on the button and heading messaging to make the subscribe page pop.

Visually appealing and engaging for users, the subscription page is on brand and exciting to explore. It provides all the relevant information through minimal text and intriguing imagery and graphics.

Working on the project was enjoyable for us. Not only because we’re so familiar with the brand, but because it gave us great flexibility to create some funky graphics and messaging!

Go and check out the new Melloo membership/subscription page for yourself. Let us know what you think of it!

What's up next?