Working with the client
AIRC (the Italian Association for Cancer Research) asked us to redesign their institutional website and their overall digital communication in order to increase donations and public awareness about cancer research in Italy. First of all we gathered informations with stakeholder interviews and co-creation workshops. As a result we redesigned the Information Architecture of the whole AIRC digital ecosystem. In addition we defined a set of rules and components the client needed for content creation.
Creating a Design System
During the first month we worked closely with the client defining principles of design and tone of voice. Then we created a styleguide to determine typography, color palette and the use of video, photography and illustration. Finally we completed the system adding user interface components such as buttons, inputs, cards, carousels etc… We shared the final result with the client as an online document. The Design System is still used by our agency and the client in each new digital project.
Templating and UI design
The heart of AIRC’s website is its contents. With hundreds of articles written by the scientific committee, AIRC is the most important source of information in Italy regarding cancer research. For this reason, our main challenge was to promote all these contents increasing readability, number of visitors and time spent on each page. To do so, we designed page templates using guidelines and components from the design system in order to increase consistency and feasibility.
The output of the design phase was tested several times with users during the process. Initially, we performed a perception test on the home page comparing it with ones of our competitors. During these sessions, we asked participants to point out the website that best fitted with certain criterias such as transparency and trustworthiness. Therefore we gathered precious feedbacks and made some crucial changings to the styleguide and page content. Afterward, we conducted a moderated usability testing on main navigation, donation and e-commerce funnels.
Funnel optimization and A/B testing
Usability tests became incredibly useful while designing conversion funnels for both donation and e-commerce website. We avoided many usability problems with payments and forms just watching people interact with our prototypes. Once the website went online, we conducted several A/B tests on donation funnel in order to increase conversion rate. With this kind of tests we discovered interesting facts about our users such as preferred donation amounts and critical pain points (fiscal code field).
In the first months after new website’s launch we achieved great results compared to the previous year:
- + 50% unique visitors
- + 60% average time spent
- + 33% page views
- + 8% number of donations