SensorySTORIES
Published in

SensorySTORIES

INTERNATIONAL CORPORATE WEBSITE — MADE SIMPLE!

Octapharma launched its new global website, octapharma.com, in October 2019 as the central point of call for all target groups and audiences around the world. The Sensory-Minds team accompanied Octapharma in this project from the very first strategy workshop at the beginning until Go Live and also beyond — and set up a state-of-the-art corporate website masterpiece.

The Client

Octapharma manufactures life-saving medication from human proteins. The company is the largest privately owned and independent plasma fractionator in the world. They wanted to create a new global website that connects patients and health care professionals around the world — taking on the challenge to master the “Patient centricity” approach, which has been a hot topic in the pharmaceutic industry for quite a time.

“Our goal is to develop an online presence centered around the patients who rely on our products and to showcase our innovative health solutions to advance human life.”

People around the globe suffer from rare blood diseases. Octapharma produces medicine to improve those people’s lives. © Octapharma AG

The objectives

The old website was based on an outdated version of a content management system, which was not mobile-friendly and also not optimized for search engines. In addition, it was no longer brand compliant. New corporate guidelines were in development and there was a growing need for improved international and online brand representation.

Following Octapharma’s brief, Sensory-Minds were asked to develop an international brand compliant website that is modern, state-of-the-art, and patient-centric. The new website was requested to be easy to maintain, user-friendly and outstanding in the health care market. It should place emphasis on Octapharma’s responsible engagement in improving the quality of life of our patients.

The main goal was to carve out the “Octa DNA” by creating different solutions that help target groups with their core problems and needs. In this way, the website was intended to “become a partner in life” (strategy title) by offering relevant information and useful online solutions to its key audiences.

Another important goal was to strengthen the overall brand image of Octapharma worldwide. Therefore the new brand design (developed in a previous step for offline media usage) needed to be successfully transferred to the digital world, applying the best usability and user experience.

The technical infrastructure should mainly focus on search engine optimization, easy content editing and low maintenance, and should allow a fast rollout to the Octapharma market worldwide.

During the project, the requirements of all internal stakeholders (management, marketing, media, product managers, market executives, etc.) had to be respected while staying within time frame and budget.

Our business innovation process

Octapharma and Sensory-Minds conducted several research activities:

  • Workshops to identify target groups, project vision and general
    requirements
  • User surveys (phone interviews and on-site observations)
  • Discussions within focus groups
  • Usability testing
  • Analysis of user data (for example: Google Analytics)
  • Interviews with internal stakeholders (e.g. management, global
    marketing, market executives)
Example User Journey © Sensory-Minds

We established an overall concept based on user journeys. The identification of daily needs and obstacles of users was elementary for the creation of relevant web services. Sitemap and information architecture then were created based on those specific needs of the main target groups (defined in user interviews, focus groups etc.).

We established the idea of a smart assistant feature, which provides user-relevant content, identifies target groups and gives content recommendations

Content and medical information is displayed on a user specific basis and according to legal requirements in a user relevant context — different for health care professionals and patients, different in every country.

We used agile development methods to reach final target solutions. We found that “two-week sprints” offered fast hands-on results that could quickly be reviewed and discussed within the project team and with external stakeholders. Based on the motto “fail fast, learn fast”, we worked on prototypes continuously. By using a balanced scorecard we made sure to meet our business and user objectives throughout the whole process.

Obstacles due to pharmaceutical code

We needed to adjust the user journey to be compliant with the pharmaceutical code. There are specific requirements for every market regarding authentication of health care professionals and patients. This was mandatory, as too is data privacy. We needed to find an overall solution.

At first, we envisaged services that built much more upon collecting data about users, in order to better address them individually and provide personalized content. But, due to the restrictions mentioned above, this had to be adjusted. Instead we put an emphasis on storytelling and user-relevant content such as patient stories, patient engagement, events, etc.

“An agile approach, state of the art technologies, an open minded client and a great project team — that is what made the Octapharma Website relaunch an outstanding project.”

André Körner | Business Unit Director @ Sensory-Minds

The solution

The focus on patients shaped the approach to content and user-interface design. The content aims to help patients and other stakeholders learn about the therapies Octapharma develops and all the production, quality and safety processes behind them in easy and accessible language. Textual information has been reduced to a media adequate reading format and is focussing on the needs of the target groups to “become a partner in life”.

One of the core elements on the website is the smart assistant, which can identify and distinguish different user groups and therefore help them find individually relevant information more easily. The personalized assistant helps users configure the website to their own personal preferences. It also can give specific content recommendations. That makes the website easy to use for users, e.g. patients, health care professionals and donators etc.

The website was constructed with a user-friendly content management system and an integrated search engine. Easily viewable on all screen sizes — from desktop to smartphone — with a modular UI design system and flat design material based UI framework (including an online style guide), the website is fully responsive and W3C conform (accessibility compliant).

Technology

The technical setup is very innovative. We use a state-of-the-art combination of Storyblok, the modern headless Content Management System, and a React, CSS and Javascript based frontend. By using Next.JS we deploy the website as a static version to and Microsoft Azure Cloud hosting platform, which allows high-functioning delivery worldwide. Several third party services (such as a mailing feature) were also implemented, using software as a service applications.

The state of the art cloud-based infrastructure and the headless content management system means content can be easily customized and managed worldwide, allowing us to tailor our positioning for every market and audience.

The combination of cutting edge technology, design and collaboration across regions has resulted in a website that offers a fantastic top-level user experience, localized content, supported by strong story-telling, on an easily replicated platform that can be rolled out in any country in a very short time frame. During 2020, up to 20 market websites are being developed within the same IT system and using the same design.

Easy to maintain CMS Storyblok. © Sensory-Minds

“With Storyblok we’ve found a great partner — the missing puzzle to our tech stack. Our developers are loving it — and users will also do, because it’s just blazing fast!”

Sascha Strohmeier | CTO @ Sensory-Minds

Summary

“Patient centricity” approach has been a hot topic in the pharmaceutic industry for several years, but it is enormously challenging to implement because the industry is complex and highly regulated. This project has navigated those challenges through a completely unique approach to design and storytelling.

The new brand compliant website of Octapharma emphasizes the human to human approach using real world stories from real donators and patients as well as scientists and researchers to give insights of how Octapharma develops and produces high-quality human proteins.

Target groups were involved in the whole process on a regular basis. Based on user surveys and usability testing during the project, the feedback given in terms of brand compliance, content relevance and usability was excellent.

The flexible content concept, which allows content editors to choose from a set of templates and a variable number of components is also outstanding.

View more cases of Sensory-Minds on Vimeo.

Macarena Guillamón, Senior Corporate Communications Manager at Octapharma AG, commented on this project:

“Our online visitors will now experience a more vibrant and comprehensive view of Octapharma. It is the central point of call for all our target groups throughout the world…“

To view to full project please go to octapharma.com.

Get in contact:

Eve Cecon
Business Innovations / New Business @ Sensory-Minds
e.cecon@sensory-minds.com

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sensory-Minds

Sensory-Minds

Design Studio for New Media & Innovative Technologies