How We Helped AuthoredUp Increase Conversions by 64% [Webflow Development Case Study]

This case study aims to show you a process we used to develop the AuthoredUp's website in Webflow.

We will guide you through the analysis we conducted and how we planned the whole process and website that will help them increase conversions in the future.

Let’s begin.

Challenge

The goal of this project was to create a dynamic and user-friendly website for AuthoredUp - a LinkedIn content creation tool that helps individuals build their presence and personal brand on LinkedIn.

Before we started developing a website, we analyzed the performance of the existing one and saw many areas for improvement.

The old website issues:

• Non-properly optimized for the user journey and funnel conversions
• Lower conversions that we were predicting they could be with improvements
• The homepage wasn’t communicating all the USPs precisely
• There were a lot of pages that were missing
• The Blog page was not completely optimized in terms of UX and SEO

Here's the look of the old website:

The development of AuthoredUp’s new website went through 4 iterations.

The goal was clear - developing a functional and great-performing website that will be easy to scale in the future as the business grows.

With a focus on seamless user experience and modern design aesthetics, the website was envisioned to be a vital tool for marketing and brand building.

Results We Achieved

First and foremost, the new website look:

‍

Since we launched the website, the number of signups increased by 57.2% during this period, and conversions went up by 64%. 

This number still grows and we expect it to grow even more after we implemented some corrections and optimizations on the live version of the website.

‍

We’ll be posting updates on this article once we get more data over time.

You can also see the trend in conversion growth that is going up:

‍

‍

A brief summary of the approach taken

Here are the steps we took during this process to ensure a fully functional and responsive website:

• Analyzed the Needs and Goals - Conducted thorough discussions with AuthoredUp stakeholders to understand their objectives and requirements for the website.
• Identified the Most Fit CMS Platform for the Website - After careful evaluation of various content management system (CMS) platforms, Webflow was chosen for its flexibility, ease of use, and ability to accommodate AuthoredUp's unique requirements.
• Listed All the Pages That Should Be Created - Compiled a comprehensive list of website pages based on the identified needs and goals, ensuring that all essential content and functionalities were included.
• Collected All Resources for the Website - Gathered relevant resources such as images, links, reviews, testimonials, and icons to be used throughout the website.
• Ensured that these resources were aligned with AuthoredUp's branding guidelines and visually enhanced the overall user experience.
• Prepared the Design System - Established a design system that defined typography, color palette, layout principles, and component libraries to maintain consistency and coherence across the website.
• Designed the Website and Gone Through Changes and Improvements - Utilized the prepared design system to create mockups and prototypes of the website's layout and interface.
• Developed and Prepared Elements for Future Pages - Concurrently with the design phase, began developing and preparing reusable elements and components that would streamline the creation of future pages.
• Integrated compelling copywriting that effectively communicated AuthoredUp's value proposition and resonated with the target audience.
• Conducted rigorous testing to ensure the website's functionality across different devices and browsers.
• Implemented search engine optimization(SEO) best practices to improve the website's visibility and ranking on search engine results pages.
• Set the Tracking Tools - Implemented tracking tools such as Google Analytics to monitor website performance, track user behavior, and gather valuable insights for ongoing optimization and refinement.

1st Iteration - Analyzing the Tool and Its Features

To ensure the website's effectiveness, a thorough analysis of AuthoredUp needed to be done properly. 

This involved examining various aspects such as its functionality, user interface, and features that resonate with AuthoredUp's target audience. 

Based on our analysis of the LinkedIn tool and extensive market research, we meticulously mapped out the features and functionalities essential for AuthoredUp's website.

This involved identifying core elements such as its platform and extension, content creation and editor feature, drafts and snippets, detailed analytics, and so on.

Based on this, we prioritized features that aligned with AuthoredUp's business objectives and that differentiated from competitors so we could present it properly.

2nd Iteration - Design Phase

Throughout the design phase, the focus remained on creating a visually appealing, user-friendly, and brand-aligned website that effectively communicated AuthoredUp's value proposition and catered to the needs and preferences of its target audience. 

Iterative feedback and refinement ensured that the final design met the highest quality and usability standards.

1. Ideation, Wireframing, and Prototyping

Creating a board in Figma with such examples was the first step.

We initiated the design process by putting everything in one place and creating:

• Design guidelines, logos, and color palettes
• Website components
• Wireframes that we used as low-fidelity representations of the website's structure. 
• Copy inspiration

Within this stage, we developed a cohesive visual design that aligned with AuthoredUp's brand identity and communicated its values and personality effectively.

We incorporated elements such as color scheme, typography, imagery, and iconography to create a visually appealing and consistent design language.

We also ensured that the visual design reflected AuthoredUp's brand guidelines while also resonating with the preferences and expectations of its target audience.

We wanted to make it intuitive and adapt to LinkedIn as much as possible so users can feel good spending their time on the website, just like they’re on LinkedIn.

‍

We’ve created the brand guidelines and style guide that will be used, and we made a few improvements to the old branding guidelines to make the brand more memorable and unique.

‍

So, once we did it, the process of the design could have begun.

We started developing pages both for desktop and mobile devices to ensure everything is in place, exactly as we wanted it to be.

‍

2. We had to Incorporate user experience (UX) principles

Before diving into design, we conducted user research and analysis to understand the needs, behaviors, and pain points of AuthoredUp's target audience.

We applied UX principles to optimize the website's usability, accessibility, and overall user experience.

Implemented intuitive navigation, clear calls to action, and streamlined user flows to enhance user satisfaction and engagement.

So, we improved the old pricing page.

‍

But it wasn’t the final design.

We solicited feedback from AuthoredUp stakeholders, team members, and potential users at various stages of the design process.

Conducted usability testing to identify usability issues and areas for improvement, making necessary adjustments to enhance the overall user experience.

The enterprise section looked a lot the same as other pricing sections.

And we tested it, so we wanted to improve it a bit more and distinguish it in some way.

Output - we got to this new pricing page.

Since we started working on creating content for them, we needed to ensure that the blog section was intuitive and functional.

3rd Iteration - The Development Phase

After careful consideration of various options, Webflow was selected as the preferred technology platform for its robust features, flexibility, and ease of use.

As our team is mostly made of marketers with strong technical backgrounds, we went with Webflow, as it gives the best programmatic SEO capabilities and is aligned with our team’s workflow.

Also, this technology is our main focus when it comes to Web development & Technical SEO services, so going with Webflow made the most sense.

Webflow's intuitive visual interface allowed for efficient development and customization of the website without the need for extensive coding.

Here’s the technical performance of AuthoredUp's website made in Webflow.

Frontend Development by Following Best Practices

The development of the website was approached in iterative phases, leveraging Webflow's flexible platform to implement features efficiently while maintaining scalability. 

Initially, we focused on building essential pages and features that lay the foundation for the website's functionality and user experience. 

We implemented frontend development using Webflow, adhering to industry best practices and standards to ensure optimal performance, accessibility, and responsiveness across devices.

We utilized HTML, CSS, and JavaScript to customize and enhance the website's design and functionality while leveraging Webflow's built-in tools for efficient development.

4th Iteration - Deployment Phase

By finalizing development, optimizing performance, and ensuring compatibility with various browsers and devices, we prepared the website for deployment.

But before that, we needed to ensure everything was set up properly, from website migration and redirections to tracking tools, etc.

1. Setting and Testing Migration in Terms of Redirections and Functionality

Here we needed to conduct thorough testing to ensure a smooth migration process from development to production environment, including setting up proper redirects and preserving functionality.

First, we mapped all the existing pages and URLs we wanted to have and that needed redirections in case they were no longer planned to exist.

Then, we identified places that were changing the URL structure and created the rules and new destination paths that will be used for the redirections.

Once we were sure we covered them all, we started creating redirections within the Webflow.

What really helped us during this process is Webflow’s ability to create wildcard redirects, so you don’t need to redirect the whole group of URLs within the same path one by one.

Instead, you can do it within a single step.

Once we got done with that, we verified that all website features, links, and functionalities remained intact post-migration, resolving any issues or discrepancies identified during testing.

2. Setting Analytics and Tracking Tools

Before the official launch, we wanted to configure tracking parameters and events to monitor key metrics and goals that will allow us data-driven decision-making and optimization.

We integrated essential analytics and tracking tools such as Google Analytics, Google Tag Manager, Google Search Console, and Facebook Pixel to gather valuable insights into website traffic, user behavior, and marketing performance.

We wanted to measure patterns and trends in user behavior to understand how visitors interacted with the new website and which areas or features were most popular.

3. Launching the Website and Conducting an Audit

The moment has come.

We launched the website to the public domain during the weekend when the traffic was the lowest so we could solve any potential blocker or unexpected event. 

Once we made sure everything was fine, we started promoting it across relevant channels and announcing its availability to AuthoredUp's target audience.

We conducted a comprehensive audit to identify any technical issues or performance bottlenecks that may impact the user experience or website functionality.

We also analyzed website health scores, page load times, bounce rates, and other key performance indicators to identify areas for improvement and optimization.

But everything was in place.

Evaluating the Success of the Website against Predefined Objectives

We left the website for two weeks and compared the website's performance metrics, such as traffic, conversions, and engagement, against the previous ones on the old website.

It helped us understand whether the website effectively met its goals in terms of generating leads, increasing brand awareness, and enhancing user engagement.

Reviewing Feedback from Stakeholders and Users

Besides that, we solicited feedback from AuthoredUp stakeholders to gauge their satisfaction with the website's design, functionality, and performance.

It helped us measure our performance, and based on all this tracking and measurements, we:

• Identified areas of the website that did not meet expectations or fell short of predefined objectives.
• Prioritized areas for improvement based on their impact on user experience, conversion rates, and overall effectiveness in achieving business goals.
• Provided recommendations for improving future website development projects based on lessons learned and experiences gained during the AuthoredUp website project.
• Included suggestions for optimizing processes, leveraging new technologies, and enhancing collaboration to streamline development and improve outcomes.

Results

Since we launched the website, the number of signups increased by 57.2% during this period.

This number has increased even more after we implemented some corrections and optimizations on the live version of the website which resulted in 64% growth in conversions.

‍

You can also see the trend in growth conversions that is going up:

Conclusion

The journey of building the AuthoredUp website has been both challenging and rewarding. 

Through meticulous planning, creative design, and diligent development, we have successfully crafted a dynamic place that effectively showcases AuthoredUp's offerings. 

By leveraging innovative technologies like Webflow and prioritizing user experience, we have delivered a website that meets AuthoredUp's objectives.

We are confident that AuthoredUp’s website will be a valuable asset for the company and a testament to our dedication to excellence in web development, UI/UX design, and SEO.

Looking ahead, we are excited about the possibilities and opportunities to innovate further and refine the AuthoredUp website.

Need our help to improve your website and its growth, and wanna innovate with us?

Book a free 30 minute call, and let’s discuss on how we can help your business grow!