Fotivda

Design System. UI Design.

Background

Fotivda (an oral VEGF receptor tyrosine kinase inhibitor) was approved as a new treatment for patients with kidney cancer, with the key advantage over other treatments being that it has less severe side effects, allowing patients to continue with their normal lives. A campaign concept had been developed by the Creative Director based around the idea of the patient as a superhero doing normal things.
A Photoshoot managed by the creative director created a library of still and video assets to be used in the campaign.

The Challenge

As lead visual designer, I worked closely with the Creative Director and lead a small design team consisting of a senior designer, a junior designer and two artworkers in shaping a visual identity for the campaign, and a library of design assets which could be used across digital and print.

Development of a brand book

Print materials were the first in project timeline, so after typographic and iconographic exploration, a visual identity was developed, and a brand book created.

Digital design using inherited assets and creation of an Element Repository

Based on the visual guidelines of the brandbook, a library of user interface components was created including buttons, button states (hover, disabled, pressed), cards, dialogues, inputs, and sliders.

iPad app: User journey / Personas

The first digital project was creating an iPad app which acted as in interactive sales aid to physicians, allowing them to view clinical data as well as telling the campaign story.

Page templates

Layout grids and page templates were designed for different sections of the campaign, breaking content ino chapters intersperced with videos tellling the campaign story. A large amount of flexibility was required for each page layout, firsty as the amount of data shown from studies varied from page to page, and secondly as allowances had to be made for different line lengths when the content was translated into other languaes.

Final screens

Designing page templates and a central component library ensured visual consistency was maintained across the product when implemented in international markets.

Video app: Sketching

The second digital project using the component library was the design of an interactive video app, showcasing a panel discussion with leading clinical practitioners. A key feature of the app was the ability to browse the video by topic of discussion, enabling users to quickly skip to parts relevant to them.

Wireframes

A new page layout was designed, incorporating components from the element respoitory, maintaining consistency across digital assets.

Specificaion for developers

An external development team were provided with html files describing placment and styles of components.

Exhibition

The interactive video app and data app were both also used on exhibition stands as seen in the rendering below.