↑ Back to top

Overview

Problem & Result

Research & Testing

Co-Design

Wireframe

High-Fi

Design-System

Flux Forecast

Flood alerts SaaS app, enhanced usability and efficiency by 25% and reduced errors in assessing flood risks by 30%.

fluxforecast.com

Overview

Context

Flux Forecast is a SAAS analytical platform which provides flood risk information up to 7 days in advance for extreme weather events.

Using cutting-edge science and technology they translate large data into a simple UI by understanding rainfall, snow melt, land disturbance from forest fires.
‍
Currently they work closely for governments and industry experts in North America

Role

UX Research, Usability Testing, Interaction Design, Design System.

Time Line
12 Weeks

Project Type
Enterprise Tool

Team
3 Designers
1 Project manager
1 Developer
CTO
CEO

Problem and objective

Complex weather data sets are handled primarily by specialized
scientists and are therefore inaccessible and incomprehensible to the general public. There is a gap in understanding the infrastructures
impact of extreme weather events by infrastructure enterprises
or government agencies.

Contributions

→ Interviewed stakeholders
→ Conducted secondary research
→ Planned usability testing with KPI's.
→ Facilitated stakeholder workshop
→ Re-organised Information Architecture.
→ Crafted mid and high-fi prototypes.
→ Owned design library and dev. documentation efforts.

Result

Designed key Journey

Tested existing platform and redesigned the dashboard, alerts page, with a focus on intuitive navigation—reduced 70 seconds for emergency response teams to respond in dire situations.

Re-organised the Information Architecture

Identified navigation pain points from testing the app. Ensured emergency response team search critical alert information and visualise quickly in dire situations.

Crafting design library from scratch

Created a new design system to be scalable for future use cases, meeting WCAG guidelines and future product features.

Words from project manager

Mia, Product Manager

"A pleasure working with Guru as he applied a spectrum of design activities; including user research, persona definition, prototyping and user testing.

We were really impressed with the final hi-fi prototypes and detailed design documentation handoff materials included in the final deliverable, as well as the diligence and professionalism demonstrated by Guru over the entire course of the project."

Investigated problems

Through Kick off I aimed to learn about the product, the people behind it, and core users struggles with the app which helped to plan out next steps.

1. Stakeholder interviews

From interviewing CEO, CTO, Project manager in an semi-structured method. I gained insights about the tool from who has familiarity and enabled a safe space to share where the tool can be improved.

Objective of this interviews:
→ Gather attitudinal insight about current issues.
→ Identify the key user groups.
→ Where to focus from design process & competitors.

2. What are other key players doing in this space?

Speaking with stakeholders we learnt that there are no competitor in the market. So I explored 15 other products in similar space to learn its functions, navigation, interface and features that can be inspirational. Below are few of the platform learnings.

Identified major user group

The research encompassed diverse channels, leading us to pinpoint two pivotal user groups:

Municipal governments: Concentrating on specific geographic areas.
Large infrastructures: Concerned with the safety and coordination of human resources.

I strategically directed the focus towards Emergency Response Team. Since product triumph hinges on the precise deployment of human resources at emergency situations.

Prioritised Emergency Response Team

Through stakeholder conversation I narrowed and focused on Emergency Responder User. Developed an persona, made the team align on Goals, wants and needs which helped us establish our usability testing goals.
‍

Usability test insights

Ease of use and comprehensibility were two primary measures for success.

Quantitative: Conversion Rate, Task success rate, Time on task
Qualitative: Recording user Satisfaction Score

Technical jargons

Language should be made clear and understandable for all users, not just those familiar with flood prediction terminology.

Visual

Sections are not obvious to the users in the way that they are found or other products they have interacted with.

Navigation

Many underlying issues with the placement of the buttons and links since users were struggling with precision. This can be tackled by restructuring the features amongst the tabs.

Accessibility

This was prominent and noticed during our audit where text, colour contrast, icons didn’t meet the minimum WCAG guidelines.

Co-designed with the foundry team

I brought in the stakeholder to facilitated workshop for ideation and map current and future state user journey. This helped to identify main steps of user journey, assist stakeholders to develop empathy, define the project scope with timelines.

Prioritisation grid to measure impact and feasibility

The development team was focused on other projects and the platform had to be launched in 2 months so there was less functional changes and focused on developing feasible high impact ideas first and tackling less impactful yet still feasible ideas later.

Reorganised Information Architecture

Through heuristic evaluation(not done by me), usability testing and creating to-be scenario map, it was evident that the platform needed to be improve the navigation structure.

Usability metrics like success rate and task difficulty displayed how all 5 users struggled—restructuring some of key features amongst the tabs would help tremendously in improving usability and fulfilling the site's navigations.

From testing, I started noticing potential for dramatic usability improvements through Information Architecture (IA) changes. This motivated to take ownership a restructure an comprehensive IA phase.

Wireframe & Iteration

Stakeholder feedback

After quick low-fi sketch sessions, I presented the wireframes to the stakeholders for their input before conducting usability tests.

After receiving feedback from experts, iterated wireframes and developed hypothesis for testing.

Usability test feedback

The stakeholder feedback could also come from biases hence why I wanted to directly get feedback from users as well. Once received feedback from the stakeholders, and I planned the usability testing of the medium-fidelity prototype with four participants. The research protocol for these tests involved the key tasks as the usability test in the initial testing phase.
‍

Success Metrics:
→ Measure of confidence in task success for qualutative findings

Quantitative findings included:
‍→ High success rate for the main of task
→ Task difficulty rate
‍

Used testing results to guide high-fi prototypes
All Participants reported that they would appreciate more guidance as first-time users, but reacted positively to the navigation and visual design cues.

High-Fi Prototypes

Improved alerts calsification interface by presenting critical information upfront, offering more visual cues, intuitive filters, and better element separation.

Introduced a filter and sort feature, which allows users to quickly locate relevant groups and assets as the product scales across British Columbia and California.

An onboarding tour for new users to assist them in familiarizing themselves with navigation and the tool's capabilities. This addresses challenges faced during testing where finding specific pages were difficuilt.

Users can replay tutorial by accessing Glossary tab in header.

Significant updates to the modal overlaid on the map displaying all active alerts and map filters.

Design library and documentation processes

The product was built a long time ago. As a result, the designs lacked a modern look. While making designs for the redesign, I had some liberty to experiment as long as it stayed within the limits of brand guidelines.

So the first thing I did was create a design system around the existing guidelines when designing interface from ground up. I also laid down some form-UI best design practices, which would be helpful for the developers.

My reflection

Project scope. The project scope documentation, especially in collaboration with the Foundry Spatial team, proved invaluable in clearly defining our objectives and limitations, helping us avoid feature creep. For example, there was a moment when there was a significant push for the inclusion of snowfall features in this release. However, due to the absence of initial project scoping, tight time constraints, and a lack of user testing data for the snow melt feature, I decided to postpone the idea to phase 2.
‍
Documentation. When I tackled documentation challenges it was tempting to slack off and deliver the minimum, since the other designers as well didn't want to get involved as the project is coming to an end. However, had enough of mediocrity in many companies, I adopted a mindset of striving for excellence. Developer needed more guidance, better explanations, and structure. Watching my teammates settle for the basics made me realise the importance of going above and beyond, considering multiple scenarios, interactions during documentation.