Physical hazards monitoring and prevention system
Ofire plus is a solution that enables local authorities to prevent or manage hazards wildfires, coordinate field volunteers, or inform the general public about them in a meaningful and accessible way.
Solution includes a client side mobile app which is paired with a SAAS web application, installed on the local authorities who act as a local admin. Map interactions and in-map user reporting is a crucial part of the app for both mobile and web.
This "ecosystem" is created primary for resilient communities and local authorities to inform the citizens of the community in a simple and meaningful way.
Design Research
The project's kick off involved multiple workshops with the product team to understand the product's vision, the business logic, the pain points the team had already researched and to elaborate on previous researches or assumptions the product team had already concluded.
Cognitive Walkthrough
The product had already an MVP solution when the collaboration started. I completed a thorough UX review (cognitive walkthrough) on the existing solution noting everything that could be of use later. Heuristic evaluation was completed but with a lesser detail due to the overall upcoming redesign.
Findings were cross checked with the business΄ needs and the product's vision.
Competitive Solutions
Simultaneously, research was also conducted for competitive solutions, like hazard prevention apps, on various parts of the world, contributing to the overall design solution proposal. What we found is that in most cases on cognitive level the apps score fairly well, with the exception the regular overload that exhibited. On aesthetics level in most cases the apps were lacking to such extent that exhibit usability issues, with the exception of only few.
User Interviews
Interviews were conducted with users representing different audiences. These interviews were conducted with semi structured questionnaire and led to a clear definition of audiences.
Ι included interviews with municipality employees, and representatives of local authorities. We also deemed appropriate to talk with firemen and they shared valuable insights. Another audience we considered extremely important were the field volunteers. These people belongs to groups who officially help in time of crises or emergencies.
All the above findings led to design a sustainable Information Architecture and relevant User Flows, including real user needs and pains as they already had interacted with the solution. Those findings, shared with the rest of the product team inside appropriate workshops assisted in team alignment and focus
Accessibility and Inclusive Design
An important aspect that affected every part of the design was that the application should be accessible by everyone. That meant appropriate microcopy and provision in design for fonts, contrast etc
UX Wireframes
I mainly use wireframes to assist the team in visualising the proposed solution, so the team better understands the user flows and the interactions so it is easier to make changes that don't cost. This approach also enables the team to stay aligned.
We used wireframes and map interactions to align with developers fontend and backend. The wireframes when singed off were used as the initial part of the development process. I also ensured that wireframes showed continuity and consistency in interactions between the web and the mobile app
UI Design
For the design concept the main goal was to create agnostic components so that micro frontend development to create organisations that constituted the design. Another important note is that a separate exercise had to be mad, so as to deliver proposals and options about map colours, cartography details and related visual metaphors. As a result, the UI Design of the map had also to be tested with the users to ensure that the information delivered was fast, clear and consistent
As a result the UI Design of the map had also to be tested with the users to ensure that the information delivered was fast, clear and consistent
Besides the afore mentioned other main challenges included
- Ensuring accessibility while delivering an attractive design and the other
- Retaining a consistent design language across each case.
- Maintain to a minimum the use of multiple colors to enhance the option for white labeling the product in the future.
"What get's measured get's managed" as the saying goes through mathematical model, the admin is able to calculate the dangers and visualise the model visually in a meaningful and comprehensive way, also communicating with field volunteers who can report incidents or hazards to the "War Room".
Reception
The product is under development to be implemented in various local authorities.
The design was considered successful with the stakeholders and user reviews receiving positive feedback :
Stakeholders' Feedback
We selected to work with Konstantinos for the development of the UX/UI design of an innovative wild fire prevention & safety App for a client of our company, Groovyenie PC. From the project on boarding, the solutions he provided to the client's project, the personas isolation to the wireframing and UX/UII, plus the unique and smart features he suggested for the App, which were later added to the App, lead us to deliver a really unique & most beautiful result to our client. During the whole process of the project, he teamed up with smooth and outer professional way with the client's programming team & project manager, leaving a feeling of consistency and reliability. For our next project, he would be the person to work with without further hesitation
