How we designed landing pages with a 30% conversion rate for Workspace
TapChief Workspace Landing Page — UI/UX Case Study. In this case study, I will be sharing how we designed landing page for Workspace and optimised it for a higher conversion rate.
What is TapChief Workspace?
TapChief Workspace is the one product that you need to manage and grow your business.
Your Proposals, Tasks, Invoices, Files, and everything else you need to grow as a freelancer, you’ll find on Workspace.
You also get a dedicated space for every project to keep your client communication, project scopes, and documents streamlined.
It is everything you ever wanted. 🎉
1. Define objectives, goals and priorities
Before we start making wireframes or designing anything, we need to first decide the objective and priorities behind the landing page.
We made an effort to understand the user needs and behaviour to ensure we have a maximum conversion rate from the landing page.
Goals:
1. Maximum email sign-ups 📈
2. Users are educated about Workspace 👨🏻💻
Priorities:
1. Enable user education with the help of animations
2. Research
“Research is what I’m doing when I don’t know what I’m doing” — Wernher von Braun
User Research:
The product team at TapChief conducted user research through telephonic conversations. Each one of these conversations was documented in Google Docs. Through the course of building this landing page, we repeatedly referred these documents to make design decisions.
Competitive Analysis:
A competitive analysis was performed on 15 landing pages of companies building a similar SaaS product. It gave us valuable insights and key learnings on how we need to put across the product to the user and educate them to ensure we get maximum conversion.
Individual key learnings were listed for each landing page and well documented. All the key learnings and insights from individual pages were consolidated to help us with our design decisions.
Some of the key learnings from the competitive analysis were:
- Address the value proposition in the main heading of the web page
- Icons for each feature and solution pages
- Minimal use of text to represent it in a manner which is not overwhelming for the viewer
- Provide an entry point for other feature pages within the feature pages
3. Visual Guide
The next step was to choose all the necessary visual components required for designing the landing page. Most of these were already part of TapChief’s design style guide. We made several additions in the color palette and icons.
Color Palette:
Along with the primary brand color (Mango Tango) of TapChief, we made two other additions to the color palette for Workspace. Text color was kept consistent with #333.
Typography:
We ahead and retained the type we have used for TapChief in all our other websites.
Icons:
A new set of icons was designed by Anoop for Features and Solutions pages of Workspace. It was made a priority to include the main element of the logo in each of these icons while giving an equal amount of priority to minimalism.
4. Illustrations
Open Source Illustrations: We used a couple of open-source illustrations from Drawkit.io for hero image in solution pages. Using these illustrations significantly reduced the time we spent on designing solution pages. It goes to show the power and usefulness of the open-source design.
Custom Illustrations: One of our priorities while making the landing page was to educate our users with the help of animations. To make animations, we had to create these illustrations from scratch on Adobe Illustrator. We created a total of 96 illustrations and 65 animations.
5. Tech & Design Stack
We had to choose something that would make it easy for us to do multiple iterations to the landing page without any hassle. The best solution available out there was Webflow. Using a no-code platform also meant that we reduce significant development efforts on the engineering team.
For the longest time now, we have been using Sketch at TapChief. But we decided to make our jump into Figma with Workspace LP because we wanted to increase collaboration. At the same time, the situation with COVID-19 meant that collaboration was one of the main priorities.
All the animations were uploaded on Webflow using Lottie files. To use Lottie Files, we had to use Adobe AfterEffects and Bodymovin plugin. All the illustrations for the animations were created on Adobe Illustrator.
6. Design
Main Landing Page: The main landing page is where the user first arrives when they open the TapChief Workspace landing page. This page acts as entry points for feature pages, solution pages and allows us to sign up users.
Feature Pages:
TapChief Workspace has four feature pages, namely Projects, To-Do, Contacts, and Finance. Each feature page explains the different things a user can do on TapChief Workspace. The users are educated about all the features with the help of animations.
Conclusion:
We hit 2000 subscribers within the first four days with a conversion rate of 33.8%. According to HubSpot, “On average, landing pages generate a 5–15% conversion rate.”
It was a brilliant learning process to manage a full-fledged project as an intern. It allowed me to learn new tools like Webflow and Figma while making the best out of my previous skillset of using Adobe Illustrator and Adobe AfterEffects.
Throughout building the landing page, I worked along with Anoop, who is the Design Lead at TapChief. We also collaborated with Neil and Nakita from the Product team. They played an important role in giving us guidance and perspective of a user throughout the project. Abhijith from the Engineering team played a huge role in ensuring all our users could successfully sign up for Early Access of Workspace. It’s still open, go ahead and reserve your spot at tapchief.com/workspace.
Did you know that you could give up to 50 Claps to this Medium article? 👏
Hold the button for a few seconds. Try it out!
