Marketing Design

Landing page "leveling up"

(A)

In the advancement of numerous crowdfunding projects, the design of the landing page has always been a crucial component. A well-designed landing page aims to convert website visitors into sales or leads. A carefully crafted landing page can showcase the authenticity and feasibility of the project, making it easier for supporters to believe in the value and potential of the project. As different clients have presented increasing demands, we have been iterating our design and processes to keep up with the times.

(B)

Starting from simply meeting client needs, we progressed to designing fixed templates through Content Management Systems (CMS) and providing training for all designers, ultimately achieving embedding pages within clients' Shopify platforms. We evolved from merely helping users (SMB) achieve their ideals to providing a fresh boost for businesses' brands (SME/MM).

(C)

- 2019-2020.

About landing page

A landing page is a specific web page that users are directed to through clicking on advertisements, emails, or other channels. It is designed to promote and guide users to take specific actions, such as purchasing products, registering as members, or filling out forms. Landing pages play a crucial role in online marketing by improving conversion rates and enhancing user experience, thereby increasing sales and potential leads.

V 1.0 Instapage

Instapage is a landing page tool that has been identified as suitable for overseas market validation. It is a powerful and flexible tool that caters to the diverse needs of businesses, whether they are small enterprises or large organizations.
Automation, Landing Pages, Webinars, Email Marketing and more - in one platform.
[fig 1]
As a web-based tool for landing pages, it offers several advantages.

Firstly, Instapage features an intuitive page editor [fig 2]. Without the need for coding, designers can easily create professional landing pages by using the drag-and-drop functionality to place elements such as text, images, videos, or forms on the page and customize them through simple settings. In addition, Instapage provides a rich template library, allowing users to select templates that suit their needs, thereby saving time and effort.

Secondly, Instapage has responsive design functionality. Given that an increasing number of potential clients are using mobile devices to view various web pages, ensuring that landing pages display well on different screens is crucial. The responsive design functionality of Instapage ensures that landing pages can adapt to various devices and screen sizes, providing a seamless user experience. Designers can preview the page on different devices and make adjustments accordingly.

Thirdly, Instapage offers robust tracking and analysis tools [fig 3]. By integrating tools such as SEO, Google Analytics, and Facebook pixel, Instapage can track and analyze important data such as landing page traffic, conversion rates, and user behavior in real time. This data provides the design and marketing departments with an in-depth understanding of user preferences and behavior patterns, enabling them to optimize marketing strategies and page designs.
[fig 2]
[fig 3]
[fig 4]
Finally, Instapage also provides A/B testing and heat map functionality [fig 4]. A/B testing involves presenting two different versions of a page to different users and comparing their performance and conversion metrics to determine which version is more effective. This testing method helps optimize page design and improve conversion rates. Heat map functionality records user click behavior on the page and generates a heat map, helping to understand user interests and points of focus, further optimizing page layout and content.

Although in the first quarter of 2020, Instapage shifted to a traffic-based pricing model, leading to a surge in our usage costs, our team still considers it an indispensable tool, especially for critical projects. We are also seeking a balanced cost model for landing page development.

V 2.0 Webflow CMS

Our team has chosen to use Webflow to build landing pages, replacing our previous reliance on Instapage. This not only reduces costs but also provides us with greater freedom and flexibility.
Take control of HTML, CSS, and JavaScript in a visual canvas. Webflow generates clean, semantic code that’s ready to publish or hand to developers.
[fig 5]
Based on our specific needs, we have found that Webflow's powerful features are highly suitable for our business. We have utilized Webflow to create our company's WWW, landing pages,  Project we love, Pledgebox. While Webflow allows for design without code, it does involve settings related to CSS and HTML, which some users may find cumbersome. Therefore, we have designed a landing page based on a content management system (CMS) to provide visual designers and marketers with a more convenient experience.
The system is divided into three parts: basic settings, content pages, and thank you page.

Basic settings: This includes domain settings, search engine optimization, hero image, call-to-action (CTA), and footer. These settings help improve the visibility of the page, guide traffic, and provide clear user navigation and calls to action.

Content pages: This includes five tested high-conversion page layouts, including standalone image, standalone video, columns, and rich text. Designers and marketers can choose the appropriate format for design based on their needs and insert the content as CMS items into the basic content.

Thank you page: This is the page where customers are redirected after registering their email on the homepage. Customers can make reservations, join Facebook groups, or ask questions here.
All pages are designed responsively to adapt to different devices. Once the project is live (e.g., on Kickstarter), the entire page will be redirected to Kickstarter to guide traffic.
[fig 6]

The end result

By using Webflow CMS, we have not only improved the efficiency and quality of page design but also increased the flexibility and scalability of the pages, all without relying on scarce technical resources.
[fig 7]

V 3.0 Shopify & shogun

Shopify is a popular e-commerce platform that provides businesses with the ability to build online stores, while Shogun is a page builder app used on Shopify. The emergence of Shogun has provided a new solution for creating landing pages on Shopify, making it easy for users to build pages with many advantages and features.

As more and more companies require the use of Shopify to build landing pages for brand promotion, the limitation of Webflow not being able to be embedded into other platforms has become increasingly prominent. However, the emergence of Shogun has solved this problem.
Easy to use visual page editor to design blog posts, product pages, landing pages & theme sections
[fig 8]
We have been assisting more and more crowdfunding projects to go live, and our company's business is rapidly growing. This is both an opportunity and a challenge. In one project, a client requested us to create a landing page on their Shopify store to increase traffic to their e-commerce website during the pre-launch phase of their product. It was a great idea, but soon we encountered a problem. While Shopify has many available templates, our landing page required custom development. Webflow couldn't be embedded into other platforms, and our developers needed to focus on perfecting new projects (such as a viral marketing tool with integrated data analytics and optimization, called a thank you page). So, we had to find a solution on our own. We ultimately chose Shogun for page design and development, and successfully completed the client's request.
[fig 9]
Shogun provides an intuitive visual page editor where users can easily design pages by dragging and dropping elements, allowing for quick layout and design completion. This visual design approach makes it convenient for users to edit and build pages, improving design efficiency and quality.

During the process of building pages with Shogun, it also offers quick page design features, enabling users to create pages that align with their brand style in a short amount of time. Additionally, Shogun solves common page development issues, making it easier for users to complete page design and development tasks.

With these tools, our design and development capabilities are comprehensive enough to meet the product and brand promotion needs of individual and business users.

Postscript: Design Guidelines

Through the experience gained from multiple projects, in the fourth quarter of 2020, I have summarized and designed UI design guidelines for Shopify Shogun and Webflow, and provided training for other visual designers. My goal is to empower other designers with the skills to build pages so that the team can progress together.

This set of design guidelines applies to Webflow and Shogun. Both tools require manual HTML and CSS settings to gradually build the entire page and maintain responsive design for desktop and mobile using different CSS settings.
[fig 10]
Next project