IFRC Go UI (User Interface) library — Guide to building new.
The International Federation of Red Cross and Red Crescent Societies (IFRC) is a worldwide humanitarian aid organization that reaches 160 million people each year through its 192-member National Societies. The IFRC work in more than 192 countries, bringing together almost 14 million volunteers for the good of humanity.
IFRC GO is our emergency operations platform for capturing, analysing and sharing real-time data during a crisis. It helps our network better meet the needs of affected communities. They play a number of roles for the global movement and one of the really exciting initiatives is the GO platform (https://go.ifrc.org)
The GO platform tracks disaster information around the globe and makes it accessible to inform better decision making for disaster response and preparedness.
This obviously has a huge impact on our ability to respond to those in crisis around the world, so we (the British Red Cross Digital Team) were very excited to help them when they got in touch to discuss the development of a UI Library.
What is a UI library and why is it needed?
The IFRC GO team aimed to build a UI (User Interface) library that will host all the details regarding the components, design guidelines and assets used on the GO platform. A user interface is the point of human-computer interaction and communication on a device, webpage, or app.
User Interface is important because it can make or break your customer base. With a user-friendly interface and easy navigation, a good understanding of user needs and how people interact with your product to achieve their needs and goals.
This will have a number of benefits for the team:
· More coherent look and feel — key when you consider there are 200 national societies, and we need the information to be easily understood.
· Save costs/time by developing standards which will reduce duplication of effort in future.
· The goal of the library is to be the go-to place for all GO team members (e.g., stakeholders, developers and partners) to access detailed UI components (including code snippets), style guide, best practices, examples, etc.
· It can also improve consistency across platforms, build more-intuitive products, and allow designers and engineers to focus on addressing bigger problems.
· All product stakeholders are resilient and designed for change.
To do so, IFRC approached BRC for help with the build of the UI library for the GO platform.
We work with Luke Caley, Luke Tredget and Zolan Szabo and key contributors from Seed and Yellow Umbrella Design. The initial BRC team was composed of 2 developers, Ivana Pantasi and Julio Peral.
I joined BRC in April 2021 and this was my first project — to finish building the outstanding components with support from James Garford as delivery manager. It was a big challenge which, once finished, turned into a huge accomplishment.
We used GitHub to host the UI library as a React app and deployed it originally to GitHub pages, this was later moved to a different host provider, but we kept Git for the version control of the code. GitHub allows application teams to deliver UI quickly and efficiently in their site. This is aligned to our high standards of quality and principles that give developers and designers a shared same language.
The designs, UI library prototype and content were provided by Mariam from Yellow Umbrella Design and the IFRC team using Figma. Based on them we created new sections e.g. brand & design guidelines and build new UI components e.g. forms, buttons, header, links, navigation, icons, logo, table plus many more using the GO platform components.
A key challenge was the project timeframe, we have had to build many components with mock data, and it was also hard to track down thousands of code files from the IFRC GO platform site.
We have now launched the updated UI library as you can see below the screenshot of UI library:
Great news! We did it, here is the IFRC GO UI library (https://go-user-library.ifrc.org).
It is a great benefit to have the IFRC Go Library because anyone that wants to use the GO platform now has access to the library to see the brand guidelines, assets, documentation, UI components (including code snippets) and examples of how to use the platform.
We have now handed it over to the IFRC team to manage the ongoing maintenance and content update and we hope to be working with IFRC again.
If you are interested in learning a new IFRC UI library, GO Platform and the work of the team, check out their great blog here: https://ifrcgoproject.medium.com/
