PHINEO Website — A contemporary design implemented in a proven context

commissioned by PHINEO

Phineo Website

www.phineo.org

    Scope

  • Implementing a new corporate design on an existing organization’s website involves several key steps: audit and analysis, concept development, wireframing and prototyping, graphic design, content strategy, development and integration, user experience (UX) enhancement, SEO optimisation, launch and monitoring, and ongoing support.

    Category

  • Digital

Turning Old into New — Website Rebrush

With the rebranding in 2023, PHINEO's image has changed from a start-up to a forward-looking company. Right from the start of the redesign process, we realised how important it was for the new design to meet the needs of users in all areas of communication, both in internal and external corporate communications.

The goal was to revamp the website with the new fresh corporate design. And we wanted to achieve more effective customer retention, identification and lead generation through a clearer user experience and structure. We had to seamlessly integrate the design with the existing content management system and match the code with the new parameters, visuals and colours. We created a cohesive and updated look, breathing new life into the oranisations website.

Redesign Strategy

The website has been carefully transformed to incorporate a contemporary and fresh corporate design. Special attention was paid to seamless integration with the content management system to harmonise aesthetics and functionality. Both the code and the new parameters, images and colours were carefully coordinated to ensure a visually appealing interface and smooth user experience. The rebrush not only improved the look of the site, but also brought it into line with modern design standards. By breathing new life into the site, the redesign will delight users with a cohesive and updated look and promote a positive and engaging online presence.

Design System — Structure and mapping of a scalable system

We embraced the new design language with a loose web style guide and pushed it forward with a partially component-based design. Our design approach followed the atomic design principle: the design was broken down into atoms, molecules and organisms that build on each other hierarchically. We wanted to create an efficient system for designers and an easy-to-implement system for developers. The mapping of the old styles and backend components to the new design was done in parallel.
We made sure that the system was carefully documented and that we developed organisational level components that could be easily adapted to different scenarios. In this way, we were able to create a flexible and scalable design system that could evolve and grow with requirements.

Implementation

During the website redesign process, we followed a systematic approach. Firstly, we established the fundamental elements such as the logo, font, and colours. Next, we replaced the main components of the website, including visuals and icons. Finally, we eliminated any redundant design elements to achieve a modern, sleek design with a contemporary look and feel.

    Useful Findings

  • Clear, visual presentation of text and images
  • Modularity in design
  • Communication of key themes through a cross-media communication strategy
  • Direct approach through CTA, newsletter and author components and integration into the focus themes
  • Prominent placement of a header component for the focus topics
  • Introduction of a brand voice, including User-friendly and understandable language for scientific texts

User Testing — Start with the target audience

I created a prototype and tested it with a selected group of people to see if the new design met their needs. This allowed us to resolve outstanding issues and gain insight into user behaviour. From the results of our discovery process, interviews and tests with the target group, we learned that clarity of visuals, modularity of design and a bold, adult brand voice were the key beliefs. We realised that we needed to use the online channels and the website more actively and holistically as a tool to communicate the core themes of the social sector in order to increase awareness and identification with PHINEO.

Final Design

Optimising the customer journey on the website, combined with a cross-media communication strategy, helps to communicate PHINEO's core themes and offerings. Step 1: A header element was developed for the website, highlighting current articles, reports and publications. In addition, social media content is published, the newsletter is used and events are promoted that support and deepen the themes. In this way, we create a more user-friendly experience that is better tailored to PHINEO's target audience.

Next possible Steps

Further action is recommended to improve the user experience in the future. One promising option is to optimise the contact options for potential customers and set up an effective feedback system. This can be achieved by implementing an intelligent chatbot that allows potential clients to make guided requests to quickly clarify their interests and redirect them to the appropriate programme area.

www.phineo.org