Bright Bird

A corporate website for a company that provides mental health care to the subscribed companies' employees that's easy to use, engaging, and matches the needs of today's generation

Business Analysis
DevOps services
QA
UI/UX design
Web Development

Project description

The BrightBird website serves as a hub for employers and their staff to engage with the company about leveraging the platform for their business needs. Through a contact form, clients can provide their contact and company information, facilitating seamless integration of the pre-built mental health solution. In addition to providing detailed company information, the website features demo audio materials, offering visitors a glimpse into the functionality of the platform.

Industry:	Organizations, Mental Health
Platforms:	Web
Role:	Software developer, IT consultant
Tech Stack:	React.js, Next.js, Strapi CMS, GSAP, Sendgrid, Google Analytics, AWS, Cloudflare

Problem introduction

Our client has reached out to us with the idea of creating a corporate website with features such as contact forms, animations, and a great-looking design for his mental health support platform. The primary goal of this initiative is to develop a visually appealing and interactive website that not only represents the brand effectively but also engages visitors and encourages action. However, developing the company website requires meticulous planning and execution to ensure that the final result will fit the brand's vision and style. Furthermore, balancing aesthetics with functionality presents a challenge, as excessive animations or intricate designs may hinder user experience rather than enhance it. Thus, the project must navigate these challenges while striving to achieve the overarching objectives of creating a user-friendly, visually captivating, and ultimately effective corporate website.

Main goals

Website development from scratch, based on the client’s branding
Implementation of different animations across the website, based on the customer references and our expertise
Page loading speed optimization for mobile devices
SMTP service integration for sending emails from the contact form
Integration of Google Analytics to gather visit information
Implementation of multilanguage support in English and Dutch

Tech Challenges

Creating a new website for our client posed several challenges that demanded adaptation and ingenuity from our team. Firstly, integrating the GSAP animation library demanded learning and mastering a new tool, ultimately allowing us to create captivating animations enhancing user engagement. Secondly, incorporating the headless CMS Strapi required adjusting our workflows, yet provided flexibility and scalability for the content management. Additionally, implementing multilingual support presented its own set of challenges, necessitating careful consideration of language structures and user interface elements. Optimizing page loading speed on mobile devices was crucial for enhancing user experience, leading us to implement various techniques such as image compression and code optimization. Hosting the website on AWS (Amazon Web Services) offers scalability, reliability, and security benefits. However, configuring AWS services, such as EC2 instances and S3 buckets, requires expertise to ensure optimal performance and cost-effectiveness. Leveraging Cloudflare as a CDN further enhances website performance by caching content at edge servers worldwide, reducing latency and improving reliability for users globally. Despite these challenges, our team tackled each obstacle with determination, ensuring the successful completion of the project. Through collaboration, innovation, and persistence, we delivered a high-quality website that not only met but exceeded our client's expectations. These challenges served as opportunities for growth and learning, ultimately contributing to the development of our team's skills and expertise in responsive website development and animated design.

Core Functionality:

Responsive Design
Interactive animations
Contact form for employers
Contact form for employees
Demonstration of audio files for different mental health problems
Multilingual Support
Page loading speed optimizations

Solution

We’ve developed custom design mockups for desktop and mobile devices, optimizing usability and visual appeal for seamless browsing experiences across all platforms.

As we progressed with the project, we found that GSAP had limitations in handling the complex animations our client desired. We explored alternative solutions, integrating GSAP with other libraries or custom coding. This successful approach required extra research, testing, and development effort. To ensure animations worked well on mobile devices, we simplified them using efficient coding, and employing the best responsive design principles. Our comprehensive testing strategy, starting from the project’s inception, helped identify performance issues earlier, facilitating timely optimizations.

We prioritized page speed optimization to enhance user experience by reducing loading times. Faster loading pages improve usability, decrease bounce rates, and increase engagement. Additionally, optimizing page speed aligns with search engine algorithms, potentially improving search rankings and driving more organic traffic to the website. Cloudflare CDN integration has helped to achieve this goal.

After thorough testing and quality assurance on the staging environment, the website was deployed live on AWS. This involved transferring files to the web server, configuring server settings, and ensuring the site’s accessibility to users.