top of page
logometeo.png

This project was created during my work at Evolve Media

ENVI WIZARD
Dashboard design for a pollution detection system

SUMMARY

Envi Wizard is a system that identifies the potential sources of pollution in real time, using meteorological data, applying a unique model and calculating airflow trajectories back in time from the reporting areas and forward in time from potential emission sources.

In this case study I will share the decisions behind the Envi Vision dashboard.

MY ROLE IN THIS PROJECT

UX Design

Interaction Design

Visual Design

RESEARCH

The first step of the research was to talk to the founders of the app

and understand the technology behind it. I also investigated their target customers and the use cases of the dashboard. 

2 USER TYPES

Since the new dashboard is in the concept phase and doesn't have any users. I identified 2 personas through the stakeholder interview.

 

Needs: Fast, easy to use, intuitive

1 - City Hall Worker

Works in the city’s control center. Incharge of getting calls and dispatching

the relevant inspector to the site. The citizens' health and safety are

his main concern. 

User Flow

flow01.png

2 - Environmental Expert

Researchers air pollution works 

Needs: Accuracy and flexibility in data entering

User Flow

flow02.png

BRANDING:

envi-wizard.jpg

Hover

Filled

Focused

Error

Success

DESIGN SOLUTION

My goal was to create a friendly interface for a complex system. Clearing unnecessary data on one hand and on the other keeping hints and tips to make it understandable. 

Login screen

dashboard mockup1.jpg

Clean and clear data fields, and clear CTA

Home screen

dashboard 01.jpg

Tooltips are provided for an additional explanation for a form field unfamiliar to some users.

Tool tips

dashboard mockup02.jpg

Filling in information

0101.jpg

The goal of this page is to provide a clear indication of possible pollution source. 

Results page

0202.jpg

DESIGN GUIDELINES

My goal was to create a friendly interface for a complex system.

Clearing unnecessary data on one hand. and on the other keeping hints and tips to make it understandable. 

Typography:

Rubik is a sans serif font, with slightly rounded corners 

Rubik

Light      Regular      Medium      Bold

​ABCDEFGHIJKLMNOPQRSTUVWXYZ

Colors:

colors.png

Text inptus:

SEGMENTED CONTROL

1.png

Default

INPUT FORMS

Default

DATE AND TIME PICKER

18.png
19.png
Untitled-4.png

Hover

Default

Focused

TAB

Default

20.png

Focused

21.png
10.png

TOOL TIPS

PRIMARY CTA

13.png

Inactive

Default

Hover

14.png

Success

Default

15.png

Inactive

Default

Hover

17.png

Inactive

Default

Hover

COMPONNENS.png
05.png
BC-enviwizerd.jpg
bottom of page