FEEM Website Redesign

Fondazione Enrico Mattei presents itself as a forefront reality in the field of research on sustainable development and climate change. The main goal of FEEM research focuses on the economy, energy, and environmental field to ensure a future to future generations. As a Think Tank, the Foundation is seeking at creating a real community around the themes mentioned previously. In this way thought, ideas and people can be can be gathered, making a huge difference in the research field. Although all the papers and documents on FEEM website are mainly referring to a scientific-technical target the Foundation clearly shows the will to get in touch also with a non-expert audience.


The Challenge

The actual website is not promoting and neither enhancing any of features mentioned, for this reason, they requested a website redesign in order to make their brand identity matching their brand image. Of course, it will be important to promote the research community through a website that is not going to be just a “showcase website” but a real platform where people can interact with each other making the research improve all together. In addition, the Foundation requested a new strategic communication plan and a new logo in order to completely relaunch the Foundation.

Of course, after a huge initial research we were able to set up our own goals for this project:

  • Untie the Foundation reputation from the energy provider Eni;
  • Promote the Foundation as a Think Tank internationally;
  • Communicate the Foundation as a centre of excellence, reliable and influential;
  • Increase users loyalty;
  • Extend the target to non-experts;
  • Increase investment and partnership;
  • Promote knowledge sharing.

  • My Role

    As part of a team, I was in charge of the User Researches, the flow of interaction, the Wireframes/Low fidelity mockup and the visual design of the User Interface. In addition, I worked alongside with the Content Strategist, in order to align our goals and needs, and with the Prototyper. I also had to check with the designer, who was taking care of the new identity, in order to be coherent with colours and style in the UI part.


    Kick-off

    After reprocessing the brief, since none of us was familiar with the “sustainable development and climate change research” field we all began with an initial research on the topic and the keywords arisen during the meeting with the Foundation. We did then some mind-maps all together in order to have clear in mind what we were talking about.


    Analysis

    The second step was then focusing on a research on the state of the art regarding the foundation. We applied all different tools such as the Business Model Canvas, Value Proposition Canvas in order to deeply understand how the foundation is creating and delivering value to their users. We then focused on running a market analysis, in order to be able to make an effective SWOT analysis. We also analyzed the brand identity, through a Kapferer Prism, and all their communication channels including the website, for which we did a specific SWOT analysis.



    FEEM SWOT Analysis


    FEEM's Website SWOT Analysis



    User Research

    To determine in the detail what were the target type I had to start with a stakeholder research and analysis in order to identify all the subjects involved, that turned out to be far more than those initially declared by the Foundation.To identify all the stakeholders we run a qualitative research on FEM’s website and on the internet, this way we were able to identify the various activities in which the Foundation is involved and, consequently, its main stakeholders. We analyzed in detail internal, external, primary, secondary stakeholders mapping, for each category, the main needs, involvement, and interests.


    The Target and the main needs

    The target category that we identified through the stakeholder analysis are:

    1. Academic world
    2. Investors
    3. Potential target such as companies, political decision makers, school institutions and local Communities.

    We then dealt with the segmentation of each target category and a detailed analysis of each through Empathy Maps. Thanks to this tool we were able to to have a complete overview of the audience needs.


    General Audience Needs

  • Visibility
  • Money
  • Realization
  • Feeling useful (helping to change the world)

  • Website Users Needs

  • Understanding the content (whether I am an academic or not)
  • Understand who is FEEM
  • Search for information
  • Interact with other worldwide researchers and have access to others people studies
  • Collaborate optimally
  • Quick and functional landmark website
  • Have access to useful contacts
  • Personal visibility
  • Professional visibility (with their own research)
  • Receive advice (for example, political decision-makers)
  • Find some projects to work on
  • Consult and download search material
  • After identifying the user needs we proceeded with a benchmark of the market leaders, as well as some positioning map in order to prioritize our goals.


    Concept

    After all the initial researches and analysis we organized all our ideas through a semantic map, as shown in the picture below. In the centre, you can see the core keywords arose during the brainstorming and on which we focused our work.

    After that, we started having a look to web trends and some different case studies in order to deliver a competitive website not just in term of look and feel but also features and content organization.


    Semiosis

    After finding, through the brainstorming, the main focuses of our project we were able to think about the semiosis.


    Language requirements

    The superficial content of the website must be understandable to everyone and therefore have a divulgatory function but without waiving an authoritative language. The more you get into the content of the site, the more the language becomes scientific/technical.



    Shapes

    Its core that the visual elements convey FEEM’s identity.

  • Innovation: this kind of value can be conveyed through the use of sharp cuts in the graphic elements.
  • Future: this idea can be conveyed orienting the construction of the graphical elements towards the right side, which perceptively represents future’s direction.
  • Authority: in order to convey this idea we must use basic geometric elements, such as rectangles, triangles, squares because of geometric solidity and scientific rigour.
  • Authenticity: in order to convey the idea of authenticity we will have to “play” with the opacity parameter in order to use transparencies.
  • Dynamism: this can be conveyed through the use of animations and visual feedbacks.
  • Pictures: all the picture that will be used in the final version of the website must be legit, in order to convey the idea of authenticity and transparency. All the subjects of the picture must be the real researchers, because the Foundation is made out of people and without those people FEEM wouldn’t exist.


  • Colors

    Since colours influence human perception we decided to convey FEEM’s identity through some main colours:

  • Innovation/economy: blue;
  • Sustainable/environment: green;
  • Dynamism/energy: orange;
  • Corporate colour: light blue.
  • Of course, in addition to those main colours, shades of grey are always present in order to increase the legibility.


    Site Map

    Before getting into the mockup’s we had to think about how to organize all the contents and (information architecture) and of course all the new features such as:




    The Blog

    Was born as a source of content dissemination, while still maintaining an authoritative tone. This will be an opportunity for the Foundation to spread FEEM’s knowledge through their researchers, giving them visibility since the articles will be written by the researchers.




    The Network

    Is a platform where all the researchers and scientist can have access to communicate and interact with each other. This is a great opportunity for the Foundation to boost knowledge sharing.


    Wireframes and High Fidelity Mockup

    For the wireframes, we used the tool Balsamiq, which is really practical since you can focus completely on the contents without being distracted from the visual part. For the high fidelity mockup, we used Sketch.




    Wireframes




    High-Fidelity Mockups