Apify homepage
Opportunities #
Context #
The previous landing page was targeting both business owners and developers looking for web scraping solution, which created an inconsistent tone and voice and both marketing and sales teams had a hard time explaining the benefits to the potential customers. The company had made a strategy shift and decided to focus on developers only.
The gist was to move from sales-led growth to a product-led one. To reflect this strategy, it was time to polish the landing page which was pretty outdated so that it would meet the following criteria:
-
Increase conversion
-
Show off features and benefits
-
Illustrate social proof
Circumstances #
There were two options: either hire an external agency or create the new landing page in-house.
After an extensive research googling web design agencies and studios, we decided to go for the latter. Also, the web design state was not taken care of so this was a first step in refreshing the part of the design system for the web.
Plus, the CEO wanted to be included in the process of brainstorming and was very passionate about providing their insights. Outsourcing the project would have been inconvenient due to time pressure.
Research #
I researched the anatomy of landing pages for most developer-focused platforms, tools and services.
-
Modal.com
-
GitHub
-
Replit
-
etc.
The main points that stood out and that I decided to take into account were:
-
Unique selling proposition
-
Effective storytelling
-
Social proofs in a form of testimonials
After the research, I organized a meeting with a CEO, a developer advocate, a content folk and a marketing lead where I proposed two possible directions:
-
Use storytelling with bento grid style
-
Use storytelling with coherent steps
In the end we chose the storytelling approach where the idea was to start with writing a letter to a developer looking for web scraping tool.
We brainstormed together. Two of the members came up with the wording, the content folk did the proofreading on the fly. I was proposing which graphics should accompany each message.
Once we had a so-called skeleton, it was my role to create the designs and collaborate with the developer team (New User Experience).
Building #
Colors #
A few months back the whole design team did a brainstorming session and created a set of few gradients to be used in marketing assets. I decided to apply these in a subtle way.
Typography #
The font that was used until that point was Lota Grotesque. This one was incorporated by an external graphic designer a while ago and after some time, we figured out that this font did not hold the corresponding aesthetic feel for the developer audience. We replaced it with Inter for titles and system fonts for body text.
Supporting graphics #
The supporting graphics should
-
Strengthen first impressions
-
Embed psychological trust
→ I created graphics of the user interface for the platform itself, used CLI, code blocks with real code and decided to apply a subtle animations on some of them on scroll
Solid CTAs #
Content and visibility.
Compact Actor cards #
The typical card in Actor store shows off more information which I felt was not ideal in this case. I created a more compact version for the purpose of marketing stuff.
With the developer we decided to make this list of Actors editable by marketing team so that they are independent on the developers in case one of the Actors stops working.
A footer in a form of a globe #
I chose to end the storytelling with a fluid transition into the footer by using a globe as a background. It was crucial to make the globe work on all devices.
Outcomes #
Key results we got a month after the release
+14% sign ups
+27% page views
+4s average time spent on page
Challenges #
-
Get all stakeholders on board
-
SVGs in Safari were blurry → remove shadows from the exported SVGs and add them using CSS
-
Sitting on multiple chairs – product owner + designer + coder (ensure the code block theme corresponds)
-
Push for fast release
-
Hand over intended animations to one dev
-
Fish for the testimonials (marketing team) since some of the customers were covered by NDA; make the texts brief and polished.
-
Write requirements and hand them to Apify Store product owner to cherrypick eight public actors (based on relevance and other criteria)
-
Make sure the visuals match the real situation – we did not want to show an inexistent log message in the CLI (command-line interface) visual
Output #
The output Figma file is available here:
The page on production is here: apify.com
Credits #
Thanks to this incredible team we exceeded expectations. Shoutout to these Apifiers:
Implementation
Honza Turon
Dan Nguyen
Jan Barta
Copywriting
Natasha Lekh
Brainstorming
Jan Curn
Ondra Urban