Chemical Dispersion Modeling Website

Flowchart of the original software

As the client had been using the original software for a long time, it was essential to understand the existing user flow. Together with the engineers, we organized the user flowchart and added the corresponding source code functions for a more comprehensive analysis.

A small piece of the flowchart with sensitive information hided.

The New Web Sitemap

To create a better experience and maintain the core functions of the original software at the same time, I tried to imitate the existing user flow but to optimize some complex processes so that it could be more simple for both users and developers.

For example, the functional map of the original software is quite complicated, so I redesigned the process into 5 main steps, which would be easier to use and develop.

The functional map comparison between 2 systems.

A simplified sitemap of the web.

Wireframe

• Environment Setup

In the original software, users can only input Longitude and Latitude Information, and they even have to input almost the same data again when stimulating the chemical dispersion. Therefore, after some iterations with our client, we embedded the Google Map preview (a) and added an address column so that system can directly transform the address into Longitude and Latitude (b).

In the visual design phase, this user flow would be further improved.

• Weather conditions automatic setup

The biggest change in this revision was that we discarded the complicated input columns in the original version. In another way, we connected the public APIs' of weather stations in Taiwan (a) and automatically filled in the requested columns. Some parameters, such as inversion height and stability class, etc, were calculated by the algorithm. (b)

In this way, the user doesn't need to fill in or calculate any data by themselves, which saves a lot of time.

• Chemical in tank conditions setup

One of the setups in this software was to simulate the condition of chemicals stored in a tank. The setting process was very complicated, and each parameter would even interactively influence another one. Therefore, I used a process step pattern to minimize the user burden.

a. The user can edit the previous settings.

b. As some parameters would influence the next settings, I put a save button in each step and only when the button was activated and clicked will lead user to the next step.

Design System

As for the design system, except for color and typography, I also designed some important components such as buttons, forms and modal, etc. Besides, I used Figma variants to improve my work efficiency.

The primary and the secondary color were based on the web system that our client was using.

Some of the components I designed using Figma variants.

Environment Setup

The original wireframe design has been found imperfect during the development because the way developers called APIs were varied from my previous thoughts. Therefore, I adjusted the user flow of location input columns.

How I Presented my Design to Developers

If the flowchart was not complicated, I would use some simple flow arrows to demonstrate the interactions and describe the conditions, regulations, and default options on notes to make communication with developers more efficient.

The weather conditions automatic setup page.

However, the user flows were usually complicated, so I would normally illustrate an independent flowchart to explain the interactions.

The complicated flow of chemical in tank conditions setup.

Some Other Pages Worth Sharing

The environment conditions automatic setup page.

The chemical in tank setting page.

The dispersion modeling output result page.