Creating a Conversion Driven Landing Page Before the Launch of a Product
novücard
Mobile landing page.
Role: User Research, UX and UI Design, Product Design
The daily grind of the design process isn't only difficult. It is actually tiresome. You eventually become unable to distinguish anything on your screen after looking at it for hours on end. Why then do we designers continue to do it?
Because of outcomes like the ones I'll demonstrate below. Since its initial iteration, this landing page, which was developed with a very small budget, has generated more conversions than any other part of our marketing strategy (2021/22).
If you've ever wondered if it's possible to create a highly engaging landing page without having a product first check out this case study.
I have withheld and obscured some confidential visual and written material from this case study in accordance with my agreement with Alt.bank.
Introduction
After many years at alt.bank I felt like I had a pretty good grasp of what our users would want of a credit card landing page. But, during months of research, trying to build the perfect solution for our problem seemed harder than it in fact looked at first.
After all, we had a number of difficulties, and the time for the product launch was running out.
How then did we create a waitlist that not only helped us win our consumer base's confidence but also encouraged conversion?
The challenge
novücard is alt.bank's first credit card. This credit card, designed for the unbanked and the underbanked, gives you the option of having two different sorts of limits: one based on your investments (cofrinhü) and the other based on a special credit score analysis the bank's IT team developed.
Because our customer base operates on the periphery of the banking industry, this independent score is crucial. With low credit score obtained through official channels (like Brazil's Serasa Score), this public often has to rely on asking a friend for their credit card if they want to rent a movie online or sign up for a product.
Therefore, they have fewer financial independency. At alt.bank, our mission is to help these customers enter the banking system through official channels, building their credit slowly over the years. But you can't say all of that on a landing page, right?
Specially when over 80% of your consumers are using mobile devices, have poor internet connections and a low-budget phone.
We had to be extremely clear about our priorities in order to communicate that, or else we'd become confused trying to explain everything. So the first task of our team was defining what was a priority in the landing page.
And we came up with the following list:
👆 Our top priorities
1. First and foremost, ensure that consumers will engage with the form;
3. Demonstrate the reliability of novücard despite its infancy;
2. Make sure people are aware that they are registering for a waiting list at this point rather than a card. Nothing is promised about their card.
4. Describe the idea behind the offered credit card, which is unique from the majority of those available in the market.
The second issue, which was equally crucial, was that we were marketing the MVP rather than the actual product because it wasn't yet ready for market.
We couldn't rely just on a landing page to convey that message to users, so we created a special communication route (with email campaigns, SMS/WhatsApp) to make sure they were aware of it. Otherwise, our clients would have a highly frustrating user experience.
Why mobile-first?
The mobile first approach is becoming increasingly important in Brazil as mobile usage continues to grow in the country. According to a report from the Brazilian Internet Steering Committee (CGI.br), there were 246 million mobile internet users in Brazil in 2019, representing a penetration rate of nearly 120%. This makes Brazil one of the countries with the highest mobile internet penetration in the world.
The mobile first approach is especially important for businesses in Brazil because of the high number of mobile internet users and the limited access to fixed internet connections, particularly in rural and low-income areas. By focusing on mobile, businesses can reach a large number of potential customers who may not have access to fixed internet connections.
Additionally, many Brazilians rely heavily on their mobile devices for their daily activities, including banking and shopping. As such, it is crucial for businesses to have a mobile-friendly presence to meet the needs of their customers.
Another important aspect is that, the mobile-first approach in Brazil is also relevant for the development of the payment methods. Mobile banking and mobile payments are becoming increasingly popular in Brazil, and businesses that do not have a mobile-first approach may miss out on potential customers who prefer to use these payment methods.
The research
Reference collected for the novücard website (Source: Dribbble https://dribbble.com/shots/3716863-Homepage-Revolut-Website)
For me, the first step to any project is to collect the references. That's a way for me to organize what I the team came up with and to collect my own thoughts. So off I went to the internet to find solutions that were similar to ours.
Thankfully, the fintech word isn't short of references. I was able to create very quickly a moodboard on Miro of what we wanted the page to look like. In a week we already had the visuals and were ready to start developing the content.
UX Writing is a passion of mine, so during the whole process I collaborated and contributed to the writing team in order to get the perfect message across. This is what we came up with:
Rough sketches of novücard's website
The solution
Have you ever tried launching a product with no product at hand? While the cards were still in the making the website team was focused on its mission: to develop the landing page of our dreams.
And we got started with the most important part of our message: building the form that contained all the information we needed to launch every step of the campaign. Name, telephone number, email and an agreement to the Terms of Service and to receive e-mails from the bank.
There we had it: the entire flow of messages that would make it clear to our user that they were a part of a waiting list.
Another important thing was to make sure they'd sign up and we did so by implementing the form at the top. That way, before the user could be bombarded with information they had just enough to get go: a header that explained the product, a subtitle that explained what they were signing up for and a call to action that was clear this was a waiting list.
Hopefully, we thought, if someone is eager enough for a credit card to get into our waiting list -- or has been one of our clients for long enough to have taken the interest in the product already from other forms of communication from the bank -- it wouldn't be asking for too much for them to recommend a few friends, right? 😊
That strategy worked like a charm. We had an excellent return in conversions by making sure the form was at the top and peaked the interest of the customer from the get go.
Here are some examples of how those screens looked when I joined the project and that showcase part of my contribution:
In conclusion
So, if you don't yet have your product, is it still possible to design a landing page? Yes, if you are able to deliver a product to them within a few weeks and have a clear roadmap of the challenges at hand.
This work was done over the years with great effort on the part of the alt.bank team.
Soon after the debut of this landing page, the product was made available as an app on the App Store and Google Play. A slow rollout for those on the waiting list was necessary, and we received a lot of great feedback on the product from the get go.
So this is the story all about how I helped alt.bank build up their customer base in expectation for a launch of a product that was still in the making, converting as many as hundreds of thousands of users and getting our message across.
Extras
During the development of these screens we also developed an additional page, with extra information on the credit card. That way, users who had already filled up their information had more to visit on the website and a reason to keep checking beck for updates.
These are a couple of the screens for this section:
Desktop screens
At alt.bank, most of our clients user smartphones. And not only to use their internet banking, but for everything. So our priority was a mobile-first solution when creating this MVP.
I'll leave the desktop version of the website just so you guys can see how the responsive design behaved when open on different size screens.
Landing page screens for desktop
Accordion menu for the desktop version of the landing page (FAQ)
--
Want to learn more? If you speak Portuguese, you might be interested in the following articles:
https://einvestidor.estadao.com.br/ultimas/fintech-alt-bank-lanca-cartao-sem-restricoes-credito/
samjovana.com
Copyright © 2023 Sam Jovana.
All rights reserved.
Contact