Driving app downloads with SwyftInvoice’s landing page

SwyftInvoice is an app designed to streamline the invoice process for small service-based business owners. With its simple invoice creation process and multiple automated tracking options, it helps users decrease the time spent on sending and tracking invoices.

The SwyftInvoice company needs a landing page that describes the features and benefits of the app and encourages small service-based business owners to become customers. While the mobile app is its primary product, the company also wants to develop a web application to facilitate desktop usage.

To communicate SwyftInvoice’s value proposition to its target customers.

To drive app downloads.

To offer a web app for the service.

This was an independent project for the Google UX Design Certificate. Therefore, I was the UX Designer responsible for the entire process: User Research, Problem Definition, Design Ideation, Wireframing, Prototyping, Usability Testing, and UI Design.

March to June 2024

Context

SwyftInvoice needs a high-converting landing page and web app.

The company designed the SwyftInvoice app to increase the efficiency and effectiveness of invoice management for small service-based owners. After rounds of usability testing and iterations, the company is ready to launch its flagship product. Therefore, SwyfftInvoice Co. needs a landing page that resonates with its target audience and ensures they understand why this app is the right choice for their business. The website will also facilitate a desktop version of the app To ensure that all potential users can benefit from SwyftInvoice.

My process

A multi-stage iterative process

I employed an iterative design thinking process while conceptualizing the SwyftInvoice landing page and web app. This process ensured that I prioritized users’ needs while designing the product.

Empathize with users

Early insights into what users actually need

Target users: Small service-based business owners aged 20 to 50 who send invoices to clients.

A thorough understanding of the users’ needs guided the creation of the SwyftInvoice app. I used this knowledge to direct SwyftInvoice’s next move to develop a landing page to promote the app.I conducted interviews with four potential users who matched the target demographic to ensure that I understood the following:

• • • How do they currently send and track invoices?
    • What are some common challenges they face when sending and tracking invoices?
    • What will make sending and tracking invoices easier?

I uncovered the following pain points:

Users are overwhelmed by the myriad of invoicing software options available.

Users fear investing in a solution that does not deliver the expected results.

“Invoicing isn’t just about getting paid; it’s about valuing my time and expertise. Finding the right system isn’t just a task—it’s an investment in the efficiency and professionalism of my business.”

The findings from my initial research allowed me to create the following persona whose attributes guided the creation of the landing page and dashboard.

I wanted to narrow in on the persona’s point of view, so I created the following user story for Brielle.

As a business coach with a busy lifestyle, I want to find the right invoicing software for my business so I can spend less time worrying about tracking invoices.

The user journey map created during the design process of the mobile app proved instrumental in understanding how the landing page and website app will help our users accomplish their goal of finding the right invoicing software for their business.

Define the problem

How can the landing page and web app address users’ needs?

At this point, I had a clear understanding of potential users’ pain points. It was critical to define the most important problems the SwyftInvoice landing page would solve.

I used the 5Ws and H framework to create the following problem statement for my persona:

Brielle is a busy business coach who needs an efficient invoicing software service to use in her business because manually tracking invoices takes up too much of her time.

With this problem statement in mind, I formed the following hypothesis:

If Brielle visits a landing page that resonates with her by demonstrating all the features and benefits of the invoicing app, she can sign up for the software and reduce her manual workload.

My thinking then shifted to identify specific questions the landing page should answer to solve the users’ problems.

1. 1. What is the product about?
   2. How can it help me?
   3. Why should I trust it?
   4. Why is it the right solution for me?
   5. How do I use it?
   6. How is it different from other software services?
   7. How can I contact SwyftInvoice if there is a problem?
   8. Can I try the product out before committing to it?

Ideate design solutions

Generating ideas to solve users’ problems

I started the early ideation process by gathering inspiration from how other brands in the invoicing SaaS space crafted their landing pages. This type of competitive analysis was necessary to:

• • • Understand the structure of popular SaaS landing pages.
    • Analyze their strengths and weaknesses.
    • Map out the layout of the SwyftInvoice landing page.
    • Identify common UI patterns.
    • Ensure the SwyftInvoice landing page answers critical questions for its users.

I proposed the following user flow that outlines the path a typical user will take on the SwyftInvoice landing page to achieve the goal of finding a solution to help them send and track invoices efficiently.

After planning the user flow, I proceeded to map the information architecture. This process was necessary to plan and prioritize how the landing page would show relevant content to the user to convert them into customers of SwyftInvoice. I outlined a sitemap for the SwyftInvoice website to organize its content and structure. I decided to do a section-level breakdown of the landing page to ensure its content achieves SwyftInvoice’s conversion goals and answers the users’ questions.

Create Wireframes

Visualizing a solution

With the information architecture and proposed content in mind, I sketched paper wireframes to brainstorm and visualize potential layouts for the landing page and web app. I iterated on these sketches until I felt they accomplished the goals of presenting the content in an easily digestible format that will provide users with information about the features and benefits of SwyftInvoice and converting them into customers.

I opted to create mid-fidelity responsive wireframes in Figma since these would be more useful and understandable to the client when presenting initial concepts. I continued refining my early ideas for the landing page and dashboard while paying a little more attention to detail to ensure that the layout and structure would provide users with an enlightening experience that would inform their decision-making. Including content with the landing page’s proposed layout will help the client appreciate the direction.

Create high-fidelity prototype

Designing the product

I needed a solid design to approach potential users for testing. I believed testing the mid-fidelity wireframes would not result in the types of insights I needed to optimize the landing page for conversions. So, I created a style guide that represented the SwyftInvoice brand cohesively and compellingly. I used the SwyftInvoice brand colors throughout the landing page. For typography, I elected to use one typeface with variations in font weights to keep the design as minimalist as possible to keep the focus on its content.

I used the following high-fidelity mockups to create a prototype to proceed to the usability testing stage.

Usability testing

Testing the high-fidelity prototype

I designed a mixed-methods research study with five participants to test the landing page and web app dashboard. The study had the following research goals:

• • • To assess the overall effectiveness of the landing page in communicating the product’s value proposition and driving conversions.
    • To identify areas of confusion, friction, or distraction for users.
    • To gather insights to inform landing page optimization efforts.
    • To assess the effectiveness of the web app dashboard design in helping users achieve the goal of efficient invoice management.

Based on the nature of the insights needed, I gave the participants open-ended prompts to answer while they interacted with the prototype. This method ensured that they elaborated on their thoughts and perspectives so I could discover opportunities to improve the user experience. I also asked the participants to answer a Net Promoter Score survey to determine their likelihood of recommending SwyftInvoice to a friend.

Before moving forward with this project, I needed to find out:

• • • Can users quickly understand what the product does and the value it offers within the first few seconds of viewing the landing page?
    • Can users find the information they are looking for on the landing page?
    • Is the main call to action clear and prominent?
    • Does the content effectively address the target audience’s pain points and needs?
    • Is the design visually appealing and engaging?
    • How easily can users sign up for a free trial or demo?
    • Are the pricing plans clear and easy to understand?
    • Does the landing page cover any potential objections or concerns users might have?

The participants shared diverse perspectives about their experiences with the prototype, so organizing the data to find patterns and themes was necessary. Therefore, I created an affinity diagram to categorize the data and better understand their opinions.

Some key themes emerged from the data, allowing me to develop actionable insights. I prioritized these insights to iterate on the design to create an enhanced user experience.

Priority 0 insights

1. Some users found the value proposition section too wide and difficult to read.
2. Some users want to see testimonials higher up on the page to help with faster decision-making.
3. Some users did not want to scroll to the bottom of the page to find the option to download the mobile app.

Priority 1 insights

1. Some users want to see a video demo of the product to help them understand how SwyftInvoice works.
2. Users wanted an easier way to connect with customer support.

My solutions

• • • Redesign the value proposition section to make it easier to read.
    • Include a mobile app download option under the hero section.
    • Add more testimonials and place them after the value proposition section.
    • Add a video demo.
    • Add a chat button for instant customer support.

“Everyone is moving away from paper and spreadsheets. This app will help lots of people.”

Iterations

Making research-based design changes

I made the following iterations based on the insights from the usability study.

Final designs

A landing page designed to convert visitors into users

Now that I made iterations based on user feedback, the landing page answered all questions identified in the research plan. I was ready to refine the UI further and present finalized designs. Here is a detailed walkthrough of the designs post-testing.

The hero section- Making a robust first impression

I designed the hero section to quickly capture visitor attention by using a clear and compelling headline and an engaging sub-headline highlighting the key benefits of SwyftInvoice. Both convey the brand’s value proposition and encourage visitors to want to learn more about the service. The hero section also contains a clear CTA to guide visitors toward signing up for a free trial. To make this section more visually appealing, I used a subtle background image representing moving lines to play on the brand’s speed motif.

High-quality product imagery

I added a large image of SwyftInvoice’s mobile and web app under the hero section that grabs visitors’ attention, reinforces the value proposition, and previews what users can expect from the product.

Clear value proposition

The content echoed SwyftInvoice’s value proposition throughout the landing page. In this section, I wrote copy that spoke to the user’s main pain points and presented the product as a solution. This kind of problem-awareness content piques user interest in SwyftInvoice and increases their desire to try the solution. Therefore, I placed a CTA next to the value proposition to drive users to download the app.

I also communicated SwyftInvoice’s value in the features section of the landing page. I highlighted the product’s main benefits and used visuals to demonstrate how each feature functions on the app.

Instead of asking users to book a demo call, I added a demo video to show users the product’s functionality to further help with decision-making.

Pricing options

The pricing section is a strategic tool for attracting and converting customers. It clearly outlined the features of each plan and suggested the recommended users for each tier. Each level contains upgraded features and benefits that allow customers to upgrade their plans as their needs evolve. The section also contains clear calls to action to encourage visitors to sign up for the service.

Social proof

The landing page provides potential users with social proof in testimonial videos and a slider with reviews from real users. This strategy builds trust and credibility by demonstrating that others have used and benefited from SwyftInvoice and encourages potential customers to do the same.

Download the app

Since encouraging app downloads is one of the goals of the landing page development, I included a section that prompts visitors to download via the App Store or Google Play. This section also included compelling copy that reinforced the value proposition.

FAQs

I added FAQs to proactively, clearly, and concisely address concerns and objections. This step removes barriers to conversion and aids in decision-making. This section helps visitors quickly find information without having to contact customer support.

The footer

Though often overlooked, I designed the footer to build trust, improve functionality, and enhance the user experience of the landing page. It gives visitors additional navigation options, contact information, and social media links while reinforcing SwyftInvoice’s value proposition.

Sign up screen

Once visitors decide to sign up for a free trial of SwyftInvoice, they are taken to this screen to create an account. Instead of using a product image, I added a testimonial to this screen to increase conversions.

Log in screen

Returning users are taken to the following screen to log in to their accounts.

Web app dashboard

The SwyftInvoice web app’s goal is to facilitate desktop usage of the service. The team assessed all use cases and determined it was necessary to complement its mobile app with a web app for in-office use.

Impact

When I developed the product strategy for this conceptual invoicing app, I prioritized key performance indicators (KPIs) and metrics crucial for gauging its effectiveness in a real-world launch. I would closely monitor user acquisition, engagement, and retention statistics continuously. Measuring free trial to paid conversions, app downloads, and customer acquisition cost (CAC) will show the effectiveness of SwyftInvoice’s user acquisition efforts. Analyzing the landing page’s website traffic for the bounce rate, average time on page, traffic sources, and sign-up rate will help the team understand visitor engagement. Looking at the daily/monthly active users (DAU/MAU), feature adoption rate, average invoice value, and number of invoices sent will provide insights into user engagement. To understand user retention, I would track its customer churn rate, monthly recurring revenue (MRR), and annual recurring revenue (ARR). I would conduct regular Net Promoter Score (NPS) surveys to assess customer loyalty. Analyzing these KPIs and metrics and soliciting user feedback allows the team to continuously improve the app and optimize its product strategy for long-term success.

Reflection

This project presented a valuable opportunity to design and iterate on a landing page and web app dashboard for a SaaS invoicing application. Throughout the process, I gained significant insights into the competitive landscape of invoicing software and users’ expectations when searching for solutions to their invoicing challenges.

One of the key takeaways was the importance of using copy and imagery to communicate a clear value proposition. The initial landing page design focused on SwyftInvoice’s key features and benefits. However, user testing revealed a stronger preference for social proof and product demonstrations to aid decision-making. This feedback loop highlighted the importance of understanding user preferences and expectations to enhance user experience and meet business goals.

Another point to note was the importance of visual branding in building competitive advantage. While many invoicing apps exist, SwyftInvoice’s clear, unique, and consistent visual language will help the brand stand out in the minds of potential customers and build brand loyalty.

This project has ignited my interest in finding a balance between supporting business strategy, aligning with user needs, and achieving product vision. I am eager to dive deeper into product strategy for SaaS Fintech companies. Overall, this has been a valuable exercise in design thinking, user research, UI design, and crafting compelling user experiences for SaaS products.

“I’m always open to trying new products, especially if it makes my life easier as opposed to what else is out there.”