About the project

MyHaz is a citizen science tool for sharing observations of natural hazards in St. Vincent and the Grenadines. In this project I designed and developed a comprehensive design system that empowered developers to create consistent and user-friendly services. This design system facilitated the efficient development of three distinct applications by a team of five developers. Additionally, I designed a set of hazard icons that ensured readability and recognition across various screen sizes. To promote the MyHAZ tool and its features, I also created a poster/infographic that showcases how this service functions.

‍

In creating this design system, I started by gathering feedback from the team through a moodboard to establish the desired look and feel of the app. Using Figma, I developed a styleguide to ensure visual consistency across the app, manager, and portal. The stylesheet was created and documented in SCSS using the kss-node tool, with a focus on utilizing the BEM methodology for writing CSS code. Additionally, I designed distinct icons for the app that effectively convey different types of hazards and their status, aiding users in quick and easy recognition.

Related links

You can find more details about my experience creating MyHaz design system in this blog series: https://britishgeologicalsurvey.github.io/ui-ux/myhaz-design-system-1/