WebApp Builder → Experience Builder

At the Nearshore Habitat Program at Washington Department of Natural Resources, I’ve helped migrate multiple web apps constructed in WebApp Builder over to Experience Builder as Esri sunsets WebApp Builder. Notably, I reconstructed the Floating Kelp Indicator app, part of the Puget Sound Partnership’s Vital Signs Program, in Experience Builder. I restyled the map and layer symbology and coded customized Arcade-driven pop-ups that generate graphs dynamically using intersects. I configured mobile compatibility so that viewers on mobile devices and tablets would have a functional and engaging viewing experience, helping expand the app’s audience. I also re-designed the click-through PDF pop-up reports for each sub-basin to match the new style. This new update has improved aesthetics, better functionality, and has allowed this application to continue to be one of our most widely-used tools.

Previous Design

This image shows a previous version of the WebApp Builder version of the project web page with its original design.

Screenshot of original experience builder. Map is grey with brightly colored polygons and small bright points.

New Design

Here you can see my reconstruction of the application in Experience Builder, featuring a restylized web map.

I used Arcade and CSS to improve the pop-ups for each layer, creating dynamically generated graphs and dynamic text color, improving the consistency of the visual language of the application.

Finally, I re-designed the subbasin summary pages, accessible via the pop-ups, using Adobe Illustrator and ArcGIS Pro to construct visually appealing graphics that convey key information, link back to relevant pages, and match the visual language of other products.

Previous Design

New Design

Previous
Previous

Cartography Club: Retro

Next
Next

Olympia Oyster Restoration in Hood Canal