Thais Costa
Strategy for Refugee Inclusion
UNHCR approached Butterfly Works with a request to design an interactive webpage for their public document, Education 2030: A Strategy for Refugee Education. The goal was to create a dynamic online platform that served multiple stakeholders. The general public should be able to access key information, including statistics, targets, and data, while UNHCR’s network of partners should have the ability to log in and showcase their best practices and practical tools.
​
My Role:
I had the privilege of co-facilitating a concept design session at UNHCR alongside my colleague, where we collaboratively defined the initial direction for the project. Following the session, I took the lead in graphic design and user experience design for the website. This included developing the overall web design, creating custom illustrations, and building a clickable mock-up using Figma software. Below you can find screenshots of the clickable mock-up.
Company/ partners
Output
An interactive website design for the UNHCR Strategy for Refugee Education.
Location
Global
Date
2020
The design challenge
The design challenge for this website project was to create a platform that could effectively serve the diverse needs of three distinct user groups: the general audience, partners, and academics. For the general audience, the website had to provide easy access to essential information, including strategic objectives, targets, and data, presented in a way that was engaging and accessible. The design had to ensure that this information was clear and digestible, allowing visitors to quickly understand the key messages and statistics related to the project. Balancing simplicity with comprehensive data visualisation posed a significant challenge, as the site needed to present complex content in a user-friendly way while maintaining the credibility and accuracy required for a public-facing platform.
The website also needed to create a space for active engagement and knowledge-sharing. A dedicated section was created to showcase the partner network, highlight best practices in the field, and offer practical tools and resources. This section also included a clear call to action, encouraging partners to join the initiative, collaborate, and take action. This required careful consideration of user flow and interaction design to ensure that partners could easily find the resources they needed, contribute their own expertise, and seamlessly engage with the wider community.
Balancing the needs for a public-facing information portal and a more collaborative, action-oriented space for partners was a key challenge in the design process.
The outcome
To ensure that the webpage meet the diverse needs of its users, we facilitated a collaborative session at UNHCR. This session would allowed us to gain a deeper understanding of the various user groups and ensure that we define the complete scope of technical requirements for the platform.
We organised an ideation session at UNHCR, involving key colleagues and possibly additional partners. This session will guided participants through an exploration of different user types, use cases, and desired functionalities for the website. The outcomes of the ideation session translated into a comprehensive product requirement document that outlined all the technical requirements and functionalities necessary for the platform’s development.
This approach fostered an user-centered design, ensuring the platform addresses real needs and achieves a greater impact. The result was a concept web design for UNHCR's 2030 - Refugee Education Strategy. We finalised the project with a presentation of a clickable mock-up in desktop and mobile version. Please see here the links to the mock-ups: Mobile, Desktop.
​
​
