This project was built with:

PPTA - Plasma protein therapeutics association | Web development

Carol Loiola

Web Designer

Webflow Developer

Figma

Webflow

Project

Process

1. Webflow setup, design implementation & custom development

2. Custom development, CMS and data integration

3. Testing and debugging

4. Launch

5. Maintenance and support

Challenges

High performance while having a complex design

Structure of CMS collections

Outcomes

Client support and CMS collections

Project

The Plasma Protein Therapies Association (PPTA) advocates for safe, accessible treatments for rare diseases and medical conditions, representing plasma collection centers and manufacturers of plasma-derived therapies.

PPTA sought a website redesign to boost awareness of plasma donation and its lifesaving therapies, while enhancing their association’s profile. The new website needed to be modern, vibrant, user-friendly, and interactive, catering to both members and the general public.

This project was developed in collaboration with YUMEDA Studio. We handled both the UX/UI design and development; however, my responsibility was solely on the development side.

Process

1. Webflow setup, design implementation & custom development

Creating and setting up the webflow project.

Building layout and structure of pages.

Ensuring responsive design across devices.

2. Custom development, CMS and data integration

Custom code implementation, such as text animations, CMS-driven sliders, and WebGL backgrounds.

Setting up and creating CMS collections.

Adding all data to the website.

3. Testing and debugging

Thorough testing and debugging processes to ensure functionality.

Continuous performance improvements.

4. Launch

Setting up and connecting to custom domain.

Deploying the website for public access.

5. Maintenance and support

Ongoing maintenance for performance and security.

Dedicated customer support for CMS collection management and comprehensive documentation.

Challenges

High performance while having a complex design

Integration of complex 3D elements and animations into the website, overcoming challenges and investing considerable time to ensure optimal performance.

Structure of CMS collections

Implementation of a well-structured CMS collections framework for the resources and media comprising over 100 additions across multiple pages. Our goal was to create a flexible structure that allows the client to easily add or modify content in the future.

Outcomes

The extensive content reorganization, targeted user pages, complete redesign, and robust development aligned with the company's vision have significantly improved the user experience.

But let's allow the numbers to speak for themselves:

+38% Page views

+27% Sessions

-8% Bounce rate

Client support and CMS collections

Certainly, one of the most important aspects of a project is communication and effective interaction with the client.

Listening and being flexible to adapt and implement your work in a way that aligns with their needs.

That's precisely what we did at YUMEDA studio for the PPTA project.

The client expressed the need for dynamic content across various sections and pages of the website. On the website, we can observe 14 collection lists, with the client actively updating at least three of them.

We understand that Webflow is a highly user-friendly and intuitive platform. However, even so, someone unfamiliar with the platform or similar technologies can easily feel overwhelmed.

Therefore, to ensure the project's success, I devised a personalized approach to convey this information and genuinely educate on the operation of various critical aspects of the system.

Here are some of the accomplishments:

- Firstly, the initial step was the creation of a website that outlined a step-by-step guide on using the editor.

- To elucidate the document, address queries, and maintain ongoing support, we conducted a walkthrough session with the client. It was a call where I elaborated on the step-by-step instructions in detail.

- Finally, considering the complexity of the flow with abundant information and nuances, I also created a document on Notion explaining the collection lists where the client would be actively making changes.

The project delivery took place almost a year ago, and these documents, along with continuous communication with the client, have been and continue to be essential for the project.

I persist in adapting and listening to their needs to achieve the best possible outcome.

Thus, I share this to underscore the significance of communication.

Communicate. Listen. Implement.

Like this project

Posted Aug 28, 2024

Built a 10+ page site using Webflow with custom JS/CSS. Used Finsweet's Client First, integrated CMS for easy updates, and provided support materials.

Likes

Views