Blinqpay — A conversion-optimized landing page UI/UX case study
Creating a landing page is one of the most effective and simple ways to attract more consumers by promoting your product or service across different platforms.
If you simply have a concept for a product or service, a landing page may be used to gauge interest before constructing and implementing it.
Identifying the Key Pain Points
Because landing pages are typically created for specific business goals such as gaining more users, subscriptions, or product sales, design selections have a significant impact on their performance.
Most crucial elements of a good landing page:
- Have a single, well-defined conversion target (like getting a new user)
- Ensure that every piece of your page contributes to the conversion objective.
- One CTA (call-to-action) button is constantly displayed, and the user may choose to utilize it at any moment.
- Use testimonials or customer tales to provide social approval.
- To make long text simpler to read, use subheadings, bullets, and layout.
The Challenge
I gave myself a goal to create a landing page during the pandemic, keeping the following principles in mind:
- It must adhere to the guidelines outlined in the preceding section (points in the most important elements of a successful landing page part).
- It must have features that are popular on landing pages.
- It must follow the most recent design trends on Dribbble (e.g. bold typography, use of subtle shadows, gradients, rounded corners on cards)
- Only utilize parts that are simple to build during the development phase and can be coded in a few hours.
Blinqpay is specialized in payment solutions and uses innovation to solve financial issues in Africa and beyond.
Design: Execution
During the design process, I began with the Hero section because it is the area that viewers would see immediately when the website finishes loading.
I picked a two-column style for the hero section because it allows the user to subconsciously integrate the key content with the images. Because of the F-shaped reading pattern, I put the text group on the left side of the layout. Because of the F-shaped reading pattern, the users will start with the primary message first.
The curvy large gradient at the top aesthetically improves and modernizes the hero section’s overall appearance and feel. The reason for the overlaid curvy element over the large gradient is to show the visual dynamism balance the left and right sides of the design.
In terms of CTA button placement, I used them to create a framework for the landing page’s structure.
The most essential CTA is in the hero area, where the user may take action right away. Placing the how-to video link underneath it might also help to emphasize the user’s decision. This will subconsciously trigger the ease of use.
A persistent ‘Get started’ CTA button is accessible in the permanently positioned navigation bar in case the user is not convinced straight away and needs additional information before activating the CTA button. As a result, a CTA choice is constantly accessible when browsing and exploring the landing page’s content.
If you would like to download the original Figma source file and have a look at the full landing page design, you can find everything here.
Takeaways
This project provided a fantastic chance to think more extensively about landing pages and experiment with various options, such as where the CTA buttons should be placed.
The landing page is far from finished at this point because, in a real project, this would be the beginning point for developing and launching the website in order to track user reactions and interactions. Then utilize the data to enhance and optimize the design even further.
Thanks for reading, I am widely opened to feedbacks especially the ones that would make the product better as well as the write-up! :)
Follow me on Dribbble or Twitter to get updated when something new pops up. 🎉
