Breathing new life into Takeda's website

At Bejamas, we share a common commitment with Takeda. While Takeda advances lives through science and technology, we're passionate about crafting exceptional user experiences through cutting-edge web development technologies. Collaborating with a like-minded company fueled our excitement as Takeda approached us to rebuild their website.

In this case study, we explore how Bejamas and Takeda collaborated to transform Takeda's online presence. With our expertise in web development and the Jamstack approach, we aimed to create a website that matched Takeda's mission and delivered a seamless experience for its users.

About Takeda

Takeda Pharmaceutical Company Limited is a global biopharmaceutical leader headquartered in Japan, boasts a distinguished history dating back to 1781. Their focus lies in four therapeutic areas: oncology, rare diseases, neuroscience, and gastroenterology (GI). Moreover, Takeda invests in plasma-derived therapies and vaccines. Guided by the principles of "Takeda-ism" — integrity, fairness, honesty, and perseverance — they are determined to bring better health and a brighter future to patients worldwide, prioritizing trust, reputation, and sustainable business practices.

How Takeda and Bejamas crossed paths

… Requires client’s input.

Challenges and objectives

Takeda had clear goals and hurdles that led them to seek help from Bejamas. They wanted to freshen up their main website, which hadn't changed for over ten years. The aim was to make it look better and modernize its underlying technology stack, following the latest web standards and practices.

One big challenge they faced was their component library, a vital tool used in all their projects. Takeda needed this library to be updated, including new and old components, so that everything would work smoothly across their websites.

Project management and communication

Bejamas and Takeda worked closely together, employing a collaborative project management approach. We held regular stand-up meetings, lasting 1-20 minutes, with the development and quality assurance teams. These meetings allowed around 12 team members to communicate openly and coordinate effectively.

Slack was our internal communication channel while Takeda relied on Microsoft Teams and Outlook, ensuring a multi-channel approach for smooth information exchange.

Throughout the project, we prioritized alignment and transparency. Regular stand-up meetings allowed team members to share progress updates, discuss challenges, and make informed decisions.

The collaboration began in November and concluded with the first release in June, adhering to a well-defined timeline.

The technology stack

We needed to update Takeda’s component library, which serves as the foundation for multiple websites, ensuring consistency and efficiency. The updates went beyond visual enhancements and included optimizations for better performance and easier maintenance.

To achieve this, Next.js was used as the core framework for building web pages. Next.js allowed us to develop individual components and integrate them seamlessly into the component library.

For content management, we used Sanity, which provided a user-friendly interface for managing and updating content. The updates made to the components were reflected in Stackbit's visual editor, which pulled data directly from Sanity. This simplified content management and improved collaboration between teams.

Initially, Takeda also utilized Sourcebit to connect multiple CMSs. However, as the projects migrated to the new stack, Sourcebit was no longer needed and was subsequently removed.

Managing old and new layouts

One of the major challenges we encountered was to determine how to update the component library and its architecture while simultaneously preserving the old layouts for the legacy pages and introducing new component layouts for the main page's redesign. This was a problem as both layouts had to coexist together in the system without causing disruptions or conflicts.

The solution to this was devised by adopting an approach that used Sanity's flexibility. Specifically, we decided to add a property to each component or section in Sanity that would determine whether it would render the old design or the new one. This approach ensured that while creating components or sections in Stackbit, the design to be used could be selected as per the requirement.

I spoke with one of our developers, Victor Bustamante, to gain insights into how exactly we addressed this challenge. Here's Victor's explanation of how we overcame it:

As an example, let's focus on the redesign of the BannerCTA component, which involved creating three variants: the default version and two new redesigns. Each component may have a different number of variants, some having only the default and one other option.

On the Next.js side, we created an index for the component that includes an object defining the variants to render based on the value of the componentLayout field retrieved from Sanity/Stackbit.

Using the withVariants function, we can then render the appropriate variant of the component based on the value of componentLayout. This approach simplifies the rendering process in Next.js.

Within Sanity, we developed a function called buildComponentLayoutField that takes an array of options/variants and generates the schema used by Sanity to display the available options. By default, the default option is always included.

In the component schema, we call this function and pass the array of options. In this case, we added the two new redesign options to the withTakedaRedesignOption array. As a result, the component will have the default option plus any additional options specified in the array.

To add another option or variant, we simply modify the array and the componentLayouts in the component index. Additionally, we create the new redesign option in its respective folder like below. This modular approach allows for easy expansion and modification of the component library.

Using this solution, the legacy pages were unaffected by the redesign of the main page, as the components associated with them continued to use the old designs. On the other hand, for the main page's redesign, the new component designs could be easily utilized, making the design selection very straightforward.

Pushing boundaries with Stackbit for Takeda

At Bejamas, we embrace cutting-edge technologies to create websites that push the boundaries. During the Takeda project, we collaborated with Stackbit, a platform that enables visual editing of modern web apps. While Stackbit provided many features, we had specific requirements that were initially unsupported. Fortunately, Stackbit's development team was eager to assist and accommodate our needs.

For example, we wanted to add a localization feature to the website. Although Sanity already supported localization, Stackbit lacked this capability. We reached out to Stackbit's development team, and they went the extra mile to develop and seamlessly integrate the localization feature for us. They enabled a feature flag exclusively for us to use this functionality.

Furthermore, during Stackbit's migration from YAML to a JS format configuration, we were among the first to adopt this approach, even before official documentation was available. Our commitment to staying ahead of the curve ensured that we leveraged the latest advancements in technology.

At Bejamas, we're not only early adopters of cutting-edge technologies but also collaborators who actively push the boundaries of what these technologies can achieve.

Results

During the Takeda project, we encountered limitations in implementing our desired changes due to our involvement with the legacy website's team and restricted control over certain aspects. We were unable to freely choose the technology stack or make extensive modifications to the core elements of the library.

Despite the constraints we faced, we focused on optimizing the components and enhancing the designs. Our goal was to ensure optimal performance and user experience for Takeda's website.

To evaluate the performance of the website, we conducted tests using Core Web Vitals and Lighthouse.

The following results will be replaced once Takeda team fixes the performance problems.

The results showcased our commitment to delivering a fast, responsive, and user-friendly website.

Final words

And that's our journey with Takeda! If you're seeking a rebrand or an upgrade for your website, Bejamas offers a free consultation to help bring your vision to life.