We started ideating through remote workshops(thanks CORON) in the whiteboard platform Miro. Having gathered our insights, we reframed these to identify opportunities for design using the “How Might We?” method.

We generated possible solutions by asking ourselves how we might make the page more dynamic, show off GRP´s global reach, allow the user to filter through the partners effectively, how we might present the whole network and give all partners space whilst providing a good user experience?

We built on this by creating User Stories to identify which features were needed to close these gaps from the perspective of the user. We also conducted interviews and set out surveys which validated our conclusions.

We created a filter function allowing the user to quickly sort through the partners based on working region, themes, headquarters and organisation type.

To render the category of partners wanted through filter, the code would match the value recorded in the dropdown input to our partner data.

We chose Gatsby over Next.js as a framework for this project as everyone in the team had worked with Next.js in our previous modules.

We developed a responsive grid rendering the partner cards based on the search inputted. Inside the React component used to contain the cards, we used a function to map through the partner data and render partner cards accordingly.

The partner data was in a local JSON file which we used to extract the relevant information to populate the partner cards. The logo were lazy load to load page quicker and to contribute to bandwidth conservation.

Technologies used:

• - React
• - Gatsby
• - Netlify