Prototypr Logo

Framer Sites: Building Landing Pages to Tell Stories, with Olvy

Graeme Fulton
Graeme Fulton
Share on twitter
Olvy logo with mesh gradient background

An Interview with Olvy

Designers make great founders, especially those who can code. Meet Arnob, Nishant, and Rupak, the designer/developer trio behind Olvy - a product designed for creating beautiful release notes that add joy to shipping software products.

Since their initial launch as a fledgling indie team of 3, they’ve listened to users, adapted, and pivoted their product, leading them to a round of funding and new hires.

They’re no stranger to building and shipping things fast - Arnob previously launched Culrs, a colour palette tool that’s also available as a mac app, whilst Nishant lead engineering at Atlan, helping build the product from the first git commit. They’re smart about which tools to use and when.

Website builders should facilitate creativity and help us tell our story, rather than getting stuck with constraints.

In this interview, we’re focusing on how they designed and built their latest product, and the tools and techniques they used to create meshy gradients and animated SVG illustrations on their landing page (hello Framer Sites):

Olvy Landing Page created in Framer Sites
Olvy homepage, made in Framer
Olvy Landing Page with Illustrations
Olvy Landing Page with Illustrations

But first, let's start with the problem they’re solving.

decorative section divider

Discovering the Problem

What is Olvy Feedback, and how did you discover the problem you’re trying to solve?

Olvy started as a Changelog and a Release Notes tool, used by some great companies like CodeSandBox, Polygon, and a bunch more.

While we were building the first version of the product we realised there is a bigger problem to solve. As a product’s audience grows, you go from knowing every user to receiving feedback from 1000s across multiple channels (e.g. Discord, Slack, email, Intercom), which is hard to digest. We experienced this first hand after Olvy was featured on ProductHunt, finishing as product of the day - we gained thousands of users, but struggled to act on their feedback.

While we were building the first version of the product, we realised there is a bigger problem to solve.

Olvy Feedback therefore acts as a single source of truth for all those communication channels. Through an ecosystem of plugins, Olvy captures feedback and makes it actionable by highlighting patterns in feedback, and turning them into JIRA or Linear tickets to pass onto an engineering team.

How are you discovering your first users?

We launched a beta page to tell the story we experienced above, and to see how many people resonate with it. We launched it as a standalone landing page to target users who have a similar problem, and allow them to sign up to our waitlist.

Since Olvy is popularly known for it’s Changelog tool, we already have a user base. Olvy Feedback builds upon Changelog, but it’s also something new, so we needed separate space to share this story, and at the same time, enable those who can relate to the problem to sign up and learn more.

We launched a beta page to tell the story we experienced.

decorative section divider

Landing Page: Design to Launch

Here’s how Arnob and co set up the Olvy Feedback landing page with minimal resources.

How did you create the landing page for Olvy Feedback in such a short time?

Answered by @Arnob Mukherjee

Website builders should facilitate creativity and help us tell our story, rather than getting stuck with constraints. The website builders of the past were very CMS based (think WordPress or even SquareSpace) - they appear easy to use at first, but you end up learning their entire system to customise a template, which can be constraining and clunky.

The best tools get out of the way, you forget you're using one

In contrast, modern companies are becoming more and more expressive - visual bookmarking tool, MyMind is a great example - we’re now very story oriented, and need more creative freedom to express our stories in different ways.

The blank canvas: Framer Sites

Designers love canvases and designers at Olvy love them too. The Framer Sites workflow feels like home to any designer. I can create designs like I would in Figma – Framer works just the same as how I create mockups. But the magic part is that in the click of a button, we can be live with a fully functional, responsive website:

Olvy Landing Page created in Framer Sites

When a designer sits in front of that empty digital canvas, it’s like a canvas of dreams, stories, creativity - everything can be as beautiful as we imagine. We feel like Framer Sites is a tool sent by the gods for designers to just do that – think of the possibilities, and then make them come to life for fellow humans out there, in no time.

decorative section divider

Why No Code? You have great developer and design expertise.

Answered by @Arnob Mukherjee

I’ve been more of a fan of writing code than using a no-code tools – this feeling has essentially been because of the flexibility that code brings. You can do anything if you are writing raw code.

You can do anything if you are writing raw code.

However, it takes time. We realised we’d need more scalable way to run the website than going through a lifecycle of writing and deploying code.

Less code = more content

For me there were two reasons:

  1. For SEO, it’s is important to create dedicated pages for certain keywords of our product, so we may need a lot. Our previous marketing stack was based on Gridsome and Tailwindcss – without a CMS. That meant to edit content, we’d have to change things in a codebase, and then redeploy - too much work!

  2. We’re also still in the early stages, and wanted to launch our beta site as fast as possible. I started looking for a situation where I as a designer could just set things up on my own, and go live in no time.

As soon as I tried Framer Sites, I decided to switch our Marketing stack entirely to it. No-code opens up collaboration too, so as our team grows to more designers and marketeers, they can easily start using Framer, without getting into a hassle of asking engineering help. The whole department becomes independent.

No-code opens up collaboration...the whole department becomes independent.

decorative section divider

Your site uses a lot of gradients and animation. How is it possible with Framer Sites?

Answered by @Arnob Mukherjee

When we were thinking about the new branding, we went with gradients to create a smooth and calm feeling that reflects the nature of what our product solves. We’re creating a feedback management tool after all - it does a lot of heavy lifting, sorting through chaos to create something manageable, hopefully making make people’s lives less chaotic.

We were looking to quickly get started, and explored different types of mesh gradients on our moodboard. We started looking for packs which hits that right emotion that we decided and then we found a pack in yellow images called “DUSK - Animated Gradients Backgrounds

It was straight forward to drop into Framer Sites. Here’s the link to it.

Dusk Animated Gradients Cover Image
Dusk Animated Gradients

For the colours, we keep the Olvy Brand Pink #FD9BBD as our base, and combine it with both a colder and warmer palette. These colour combinations sit really well together, presenting itself as funky and energetic, and sophisticated and calming at the same time. We always try to present this trait in our brand assets and product videos.

CSS Effects in Framer Sites

Answered by @Arnob Mukherjee

Framer also comes with in built animation options. You can customise each element, changing when and how it appears on the screen. For example for this section we wanted the text to flip as soon as it enters the viewport:

Olvy landing page animations
Olvy landing page animations

And here’s a quick step-by-step for how it can be done in Framer 👇

  1. Select the text

    Screenshot fo Framer with Olvy Header selected
    Selected the Text
  2. Set the trigger to Scroll – this ensures the text animates on scroll.

  3. Set ‘start from’ to ‘middle’ – this ensures the animation triggers when the text is in the centre of the viewport.

    Screenshot fo Olvy in Framer
    Set animation triggers
  4. Then hit “Enter” and configure the states. In our case, opacity 0 for the first state, and then translate it to 100% opacity.

  5. You can also set the rotation x with perspective.

  6. Finally, set the transition smoothness with the in built transition option:

    Screenshot of transition panel in Framer
    Set the transition
decorative section divider

Animations that Tell a Story

In this part, Rupak shares the process behind creating the animations, and how they help in telling the Olvy Feedback story.

The Illustrations

Answered by @Rupak Mishra

We are still in the process of figuring out our visual identity for a longer term, but a few thoughts are currently in place that act as our north star for creating illustrations and brand assets.

At Olvy we are a little obsessed with beautiful designs and we are in a constant state of creating something that sets us apart. The simplistic flat illustrations are created by me in Figma.

Screenshot of Olvy landing page showing illustrations of heads in a curcle
Illustrated Heads

Figma ⇒ Adobe After Effects

We used animation to help share the story we wanted to convey to our lovely audience. Animations help explain how Olvy works, but in a much more creative way.

My primary tool to create such lovely animation is Adobe After Effects.

Animation showing creation of animated head in After Effects
Animate in After Effects

After creating all the illustrations in Figma, I carefully import the files first to Adobe Illustrator, and carefully arrange the layers of each file depending on the kind of animation I would do going ahead.

Once done, I import the Illustrator files to Adobe After Effects, and proceed with animating these illustrations and to bring it to life.

Though the animation looks kind of complex, if you look carefully, you could see that I have animated the same basic properties.

The three basic properties that need to be considered to achieve this animation are Position, Rotation, and Scale. That’s the main properties when creating such beautiful animations.

Make it Loop

One thing that was strongly considered to make a landing page animation was to make it on a loop. This means the first frame and the last frame of a scene are always the same, so the whole animation appears to be in a seamless loop. That’s why the animation appears to be so pleasing to eyes without any interruptions.

Animated heads talking moving - capture of Olvy
Animated Heads talking

Lottie: Web Animations

We used our favourite tool Lottie to bring it to the web. We always try to experiment with Lottie animations and bring forward something exciting. I create these animations in Adobe After Effects and with the help of Lottie plugin these animations can easily be exported into .json files.

Animated heads being created in Lottie tool
Lottie animations
decorative section divider

A Story Through Animation

These animations further tell the story behind Olvy.

1. Companies Start Small

The idea behind the first animation above was to show that any organisation starts small with a few loyal users – those with whom you communicate all the time. You listen to their complaints and feedback, and come up with solutions to their different problems.

In the first screen of animation, I used a few head illustrations, and animated their position and rotation properties for various characteristics: hair, moustache and head. This was to resemble the constant engagement your user has with your product.

Animated heads being created in After Effects
Animated Heads in After Effects

2. A Growing Company

A really good sign of a successful business is customer growth. And surely everyone wishes for the same – but comes at cost.

The second and third screens introduce a surge in user engagement, showing how chaotic it can get across different communication channels.

Many heads in a circle moving, with app Icons popping up to show chaos
Communication Chaos

3. The Olvy Feedback Problem

At this point of the landing page story, we’re showing how a great product can have users constantly engage with it: feedback, feature requests, and complaints on all platforms: twitter, slack, discord, mail, etc.

Animation showing 4 holes, with messages flying in and out of them
Messaging chaos

The animation shows that an increase in user base also leads to an exponential increase in requests. To analyse and decode all of these, you need a lot of resources.

That’s the problem – then we move to the solution that Olvy provides. The last animation shows how Olvy simplifies the process for our user so, making their life easier.

Remember: Rotation, Position and Scale

Though the animation looks kind of complex, believe me if you look carefully you could easily see that I have animated the same basic properties that i stated earlier: Rotation, Position and Scale. Also made it appear in an infinite loop by keeping the first frame and the last frame of the animation same.

decorative section divider

Launching and Hosting

How is the experience of hosting the site with Framer? What is the process of setting up the domain like?

Answered by @Arnob Mukherjee

Hosting the site on Framer has been super smooth. It was mostly a one click connection with your domain service provider. The hosting speed also is amazing, having tested on different internet speeds, and the loading time is smooth.

We actually use their file hosting to show the background videos and it loads blazing fast.

Framer Sites screenshot
Framer sites

What’s Next?

We’re working on lots of ideas:

  • We’ve created a layer of ecosystems to capture feedback with different Integrations, letting you push feedback to Olvy

  • We’re working on analyzing feedback to find actionable patterns.

  • Olvy also allows you to send personlized messages in Slack or Discord to the same user that started the feedback

Check out our latest beta page release which talks more about the problem: https://beta.olvy.co/.

We would also love to extend early access to Olvy Feedback and Release Note Tool to your team and would be happy to answer any questions on a short call. You can book a time on this calendly link, and I can demo the product and what we’re planning. We are super excited about this and hope to see you soon.

Share to your friends
Share on twitter
Author avatar

Written by

Graeme Fulton

Making Prototypr and Letter.so

Creator of 💌 @Letter_HQ and @Prototypr

Stories like this, every week

Get a roundup of the best design articles sent to your inbox.


Related Posts