Ofire Plus
Ofire Plus

Ofire Plus

Physical hazards monitoring and prevention system

YEAR
2021
ROLE
UX/UI Design
 

 
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.
 
notion image

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.
 
Initial Images of product
Initial Images of product

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.
 
 
notion image
 
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.
 
notion image
notion image
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
 
notion image
notion image
 
 
 

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.
 
To showcase an example I selected the FWI indicator. It is noteworthy how the colours of the scale combined with the dot and the microcopy ensure in almost every case that the design remains accessible even for the most demanding circumstances.
 
"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".
 
notion image
notion image
 
 

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 :
 
 
notion image
notion image
notion image
 
notion image
Ofire Plus Design Mockups
Ofire Plus Design Mockups
 
notion image
 

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
 
 
 

List of deliverables

  • Workshops and stakeholder alignment
  • Product UX Market Fit & User analysis
  • User research and persona creation
  • UX prototyping
  • Product design mobile & web dashboard
  • Design System with agnostic components system

Want to know more?

notion image